H

ave you ever wondered how you can change the default time displayed in a Date/Time dialog? In general, the Date/Time dialog is controlled by back-end code so there’s not much you can do with it. I’ve seen this question a few times now so I decided to come up with a solution.

Date Time Picker

Because the Date/Time picker dialog is controlled by back-end code, the only way to change the default time is via client scripting. What I found is that you can run a client script when the dialog comes up and set the hours, minutes, and seconds to whatever you want. The trick is running your client script at the right time. You can’t react to a change or a form submission like you might for regular client scripting scenarios. Instead, you need to react to the click of the calendar icon next to the Date/Time field.

Fortunately, the Prototype library that ships with ServiceNow includes something that does exactly what we need…the Event.observe method. The basic idea behind this method is to wait for a specific event (in this case the ‘onClick’ event from the calendar icon) and then run some code along with that event. I’ve used this method before in an article I wrote about controlling the ordering of client-side code.

Event.observe works by attaching itself to a specific event on a specific element. For the purposes of this solution, we need to find the ‘A’ tag associated with the calendar icon (the element) and check for the ‘click’ event. Then we can run the code to set the time to whatever we want…typically midnight or something similar. Below is a function that does just that. It works for regular forms and for catalog items. You just need to call the function and pass in the name of the Date/Time field or variable like this…

setDatePickerTime('<FIELD_OR_VAR_NAME>');

…and here’s the ‘setDatePickerTime’ function

function setDatePickerTime(field){
   //Attach an event listener to set default time value for date picker
   Event.observe($(g_form.getControl(field).id).next('a'), 'click', function() {
      setTimeout("$('GwtDateTimePicker_hh').value = '00';$('GwtDateTimePicker_mm').value = '00';$('GwtDateTimePicker_ss').value = '00';",0);
   });
}

Here’s an example client script I set up on the Incident form to run onLoad (which will almost always be the case for this script) and attach event listeners to the ‘Opened’ and ‘Closed’ fields so that their time picker would be set to midnignt.

‘Set Date Picker Time’ Client Script
Name: Set Date Picker Time
Table/Catalog Item/Variable Set: Wherever you need it!
Type: OnLoad
Script:

function onLoad() {
   //Set the date picker default time to '00' for 'Opened' and 'Closed' fields
   setDatePickerTime('opened_at');
   setDatePickerTime('closed_at');
}

function setDatePickerTime(field){
   //Attach an event listener to set default time value for date picker
   Event.observe($(g_form.getControl(field).id).next('a'), 'click', function() {
      setTimeout("$('GwtDateTimePicker_hh').value = '00';$('GwtDateTimePicker_mm').value = '00';$('GwtDateTimePicker_ss').value = '00';",0);
   });
}