Set minDate in spDatePicker (sp-date-picker) in Service Portal

[sureshhegde]

Hi Experts,

I'm looking on how to set a minDate in the spDatePicker (sp-date-dicker) OOB Date Picker in Service Portal. I'm looking to set current date as Min Date in the start date picker and based on that, I'm looking to set min date for End Date picker.

Looking for some solution if someone has tried this or was able to get this.

Thanks

Ashwath

[ogMGOPW]

You are literally my favorite person in the world. Thank you.

Where did you find this documented? I can't find it anywhere.

[Yaraslau]

You may find source code here:

your-instance.service-now.com/scripts/app.$sp/directive.spDatePicker.js

[Israel Baral]

Hey would you happen to know where I could find all the custom directives source code?

[Yaraslau]

For  sp-help-tag     ----->    /scripts/app.$sp/directive.spHelpTag.js

For sp-date-picker ------>  /scripts/app.$sp/directive.spDatePicker.js

Now you know

Please mark helpfull

[ChiranjeeviR]

Hi @sureshhegde,

To implement a minDate on the spDatePicker (or sp-date-picker) widget in ServiceNow Service Portal, you can use a combination of:

1. Setting minDate using AngularJS

2. Watching the start date to update the end date minDate dynamically

Here’s a working solution you can implement in a custom widget or modify your existing widget (like a form with two date pickers: start and end).

Step-by-step Implementation

1.In your widget’s HTML template:

<div>
  <label>Start Date</label>
  <sp-date-picker ng-model="data.startDate" options="data.startDateOptions"></sp-date-picker>
</div>

<div>
  <label>End Date</label>
  <sp-date-picker ng-model="data.endDate" options="data.endDateOptions"></sp-date-picker>
</div>

2. In your widget’s client controller (Client Script):

function($scope) {
  $scope.data.startDate = new Date(); // default start date
  $scope.data.endDate = null;

  // Set minDate for start date as today
  $scope.data.startDateOptions = {
    minDate: new Date()
  };

  // Set initial minDate for end date to today as fallback
  $scope.data.endDateOptions = {
    minDate: new Date()
  };

  // Watch startDate changes and update endDate minDate accordingly
  $scope.$watch('data.startDate', function(newVal) {
    if (newVal) {
      $scope.data.endDateOptions.minDate = new Date(newVal);
      if ($scope.data.endDate && new Date($scope.data.endDate) < new Date(newVal)) {
        $scope.data.endDate = null; // reset endDate if it violates the new minDate
      }
    }
  });
}

• sp-date-picker uses Angular UI Bootstrap’s datepicker, so options like minDate, maxDate, etc., are fully supported.

• This approach ensures:

  • Start Date can’t be in the past.

  • End Date is always after or equal to Start Date.

Thanks and Regards,

Chiranjeevi R

Please mark as Correct Answer/Helpful, if applicable.