Add a date range or date picker field in UI builder

[Karanpreet Sing]

Hi i need to add a component on the ui builder for picking start & end date on Ui builder . There is no date component on ui builder . Please advise how to add the date range picker.

[Amit Gujarathi]

Hi @Karanpreet Sing ,

I trust you are doing great.

To add a date range picker to the Ui Builder in ServiceNow, you will need to follow these steps:

1. Open the Ui Builder and navigate to the page where you want to add the date range picker.

2. Click on the "Add Component" button and select "HTML" from the dropdown menu.

3. In the HTML editor, paste the following code:

```html
<div class="form-group">
<label for="date-range-picker">Select date range:</label>
<input type="text" id="date-range-picker" class="form-control" />
</div>

<script>
$(function() {
$('input#date-range-picker').daterangepicker();
});
</script>
...

4. Save the HTML component and exit the editor.

5. Open the page in the Ui Builder and you should now see a "Select date range" label and a text input field with a date range picker.

Note: This code assumes that you have the necessary JavaScript libraries installed in your ServiceNow instance to use the date range picker, specifically the "daterangepicker" library. If you don't have this library installed, you may need to download it and upload it to your instance before you can use the code above.

Please Mark My Response as Correct/Helpful based on Impact

Regards,

Amit Gujarathi

[Brad Tilton]

This component doesn't exist currently but is something we have on the roadmap.

[JagjeetSingh]

This is how you can mimic the date range picker field in UIB.

1. Use input component.

2. In the "end" container add "button iconic" component and choose calendar icon.

3. Also add "Mini calendar" component with it.

4. Now create a boolean state parameter "hideCalendar". Bind it to Hide Component property of calendar component. Set the value to true by default. Now only your iconic button would show.

5. On calendar iconic button click event, set the hideCalendar state parameter to false. This would make the calendar visible.

6. Now create another state parameter "inputDate". Bind this to the "Value" property of input component.

7. On the mini calendar component events, choose "Value Changed" event and add handler to it. Choose "Update Client State Parameter" handler here. Choose "inputDate" parameter and bind the value to @payload.value.

8. Now on "Ok button clicked" event you can set the "hideCalendar" parameter to true. This would hide the calendar component again. On "cancel button clicked" event you can do the same and also set the "inputDate" to null.

You can add your own logic as well in between if you want via client scripts to validate the date entered by user manually.

Hope this helps.

[triciav]

Jagjeet,

How do I bind the input line 6? Now create another state parameter "inputDate". Bind this to the "Value" property of input component.