I'm creating a form that requires a date input but rather than type the date and to avoid risk of typos and errors, I want to use this month view from the time picker:
Had a working version with a html page but we are now 9.2.3 so no longer available....
Field will only ever require a single date, never a time, never a range, never realtime, etc. Will also ensure the correct format (Day-Month-Year) is used - looking at you, America 😂
Thanks
Hi @capilarity,
You can use jQuery UI's datepicker directly from dashboard JavaScript. I've included two options below, one using a text input with datepicker and the other using a time input with various hidden.
The datepicker uses d-M-yy as the dateFormat value, e.g. 9-Nov-2024. The format string is documented at https://api.jqueryui.com/datepicker/#utility-formatDate. See the same page for options to modify the datepicker's appearance.
<!-- etc/apps/search/local/data/ui/views/date_picker.xml -->
<form version="1.1" theme="light" script="date_picker.js">
<label>Date Picker</label>
<init>
<eval token="form.date_tok">strftime(relative_time(now(), "@d"), "%e-%b-%Y")</eval>
<eval token="form.time_tok.earliest">relative_time(now(), "@d")</eval>
<eval token="form.time_tok.latest">relative_time(now(), "+1d@d")</eval>
</init>
<fieldset submitButton="false">
<input id="input_date" type="text" token="date_tok">
<label>Date 1</label>
</input>
<input id="input_time" type="time" token="time_tok">
<label>Date 2</label>
<default>
<earliest>1731128400</earliest>
<latest>1731214800</latest>
</default>
</input>
</fieldset>
<row depends="$hidden$">
<panel>
<html>
<style>
div[data-test-panel-id="presets"], div[data-test-panel-id="relative"], div[data-test-panel-id="realTime"], div[data-test-panel-id="dateTime"], div[data-test-panel-id="advanced"] {
display: none !important;
}
</style>
</html>
</panel>
</row>
<row>
<panel>
<html>
<h2>Date 1: <b>$date_tok$</b>
</h2>
<h2>Date 2 Eearliest: <b>$time_tok.earliest$</b>
</h2>
<h2>Date 2 Latest: <b>$time_tok.latest$</b>
</h2>
</html>
</panel>
</row>
</form>// etc/apps/search/appserver/static/date_picker.js
require([
"jquery",
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
$("#input_date input")
.prop("readonly", true)
.datepicker({
dateFormat: "d-M-yy",
onSelect: function(dateText, inst) {
var defaultTokens = mvc.Components.get("default");
if (defaultTokens) {
console.log("Setting default token $date_tok$ to " + dateText);
defaultTokens.set("date_tok", dateText);
}
var submittedTokens = mvc.Components.get("submitted");
if (submittedTokens) {
console.log("Setting submitted token $date_tok$ to " + dateText);
submittedTokens.set("date_tok", dateText);
}
}
});
});
(I actually use the above format in my emails. Less ambiguity. In text data, I use ISO 8601. 'merica!)
