Set Date Picker options Service Portal snDatePicker Directive

[scottl]

Anyone know if it's possible to set any date picker options (minDate & maxDate) for the "sp-date-picker" directive? As I've tried everything, and nothing seems to be working, is there some custom attribute I'm not aware of which sets theses or am I missing something?

<sp-date-picker ng-model="entry.date.value" sn-change="" ></sp-date-picker>                      

[HungMiju]

Hi
Please try this link
https://material.angularjs.org/latest/demo/datepicker

[scottl]

Thanks Hung, but did you try this based on the stated directive as nothing worked for me based on that link?   Tried to set the max date, didn't work.

[HungMiju]

Please try this example
HTML Teamplte:

<div ng-app="appDatepicker" ng-controller="DatePicker">
           <div class="row marginLeft-4-sm marginTop15">
               <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
                   <div class="input-group">
                       <input id="FechaAltaInicio" type="text" class="form-control datepicker"
                       placeholder="Init Starting Date" uib-datepicker-popup=""
                       datepicker-options="datePicker.FechaAltaInicioOptions"
                       is-open="datePicker.FechaAltaInicioStatus.opened"
                       ng-model="FilterViewModel.FechaAltaInicio"
                       ng-click="datePicker.FechaAltaInicioOpen($event)"
                       onkeydown="return false"
                       ng-change="datePicker.changeMinAndMaxDates()" />
                       <span class="input-group-addon" ng-click="datePicker.FechaAltaInicioOpen($event)">
                           <i class="glyphicon glyphicon-calendar"></i>
                       </span>
                   </div>
               </div>
               <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
                   <div class="input-group">
                       <input id="FechaAltaFin" type="text" class="form-control datepicker"
                       placeholder="Finish Starting Date" uib-datepicker-popup=""
                       datepicker-options="datePicker.FechaAltaFinOptions"
                       is-open="datePicker.FechaAltaFinStatus.opened"
                       ng-model="FilterViewModel.FechaAltaFin"
                       ng-click="datePicker.FechaAltaFinOpen($event)"
                       onkeydown="return false" ng-change="datePicker.changeMinAndMaxDates()" />
                       <span class="input-group-addon" ng-click="datePicker.FechaAltaFinOpen($event)">
                           <i class="glyphicon glyphicon-calendar"></i>
                       </span>
                   </div>
               </div>
               <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
                   <div class="input-group">
                       <input id="FechaCierreInicio" type="text" class="form-control datepicker"
                       placeholder="Init Closing Date" uib-datepicker-popup=""
                       datepicker-options="datePicker.FechaCierreInicioOptions"
                       is-open="datePicker.FechaCierreInicioStatus.opened"
                       ng-model="FilterViewModel.FechaCierreInicio"
                       ng-click="datePicker.FechaCierreInicioOpen($event)"
                       onkeydown="return false" ng-change="datePicker.changeMinAndMaxDates()" />
                       <span class="input-group-addon" ng-click="datePicker.FechaCierreInicioOpen($event)">
                           <i class="glyphicon glyphicon-calendar"></i>
                       </span>
                   </div>
               </div>
               <div class="col-xs-11 col-sm-3 btn-group marginLeft19-xs marginTop-xs10">
                   <div class="input-group">
                       <input id="FechaCierreFin" type="text" class="form-control datepicker"
                       placeholder="Finish Closing Date" uib-datepicker-popup=""
                       datepicker-options="datePicker.FechaCierreFinOptions"
                       is-open="datePicker.FechaCierreFinStatus.opened"
                       ng-model="FilterViewModel.FechaCierreFin"
                       ng-click="datePicker.FechaCierreFinOpen($event)"
                       onkeydown="return false"
                       ng-change="datePicker.changeMinAndMaxDates()" />
                       <span class="input-group-addon" ng-click="datePicker.FechaCierreFinOpen($event)">
                           <i class="glyphicon glyphicon-calendar"></i>
                       </span>
                   </div>
               </div>
           </div>
       </div>

Client Script:

function($scope) {
   /* widget controller */
   var c = this;
//DatePicker
   $scope.datePicker = {
           FechaAltaInicioStatus: { opened: false },
           FechaAltaInicioOpen: function ($event) {
                   $scope.datePicker.FechaAltaInicioStatus.opened = true;
           },
           FechaAltaInicioOptions: {
                   maxDate: null
           },
           FechaAltaFinStatus: { opened: false },
           FechaAltaFinOpen: function ($event) {
                   $scope.datePicker.FechaAltaFinStatus.opened = true;
           },
           FechaAltaFinOptions: {
                   minDate: null,
                   maxDate: null
           },
           FechaCierreInicioStatus: { opened: false },
           FechaCierreInicioOpen: function ($event) {
                   $scope.datePicker.FechaCierreInicioStatus.opened = true;
           },
           FechaCierreInicioOptions: {
                   minDate: null,
                   maxDate: null
           },
           FechaCierreFinStatus: { opened: false },
           FechaCierreFinOpen: function ($event) {
                   $scope.datePicker.FechaCierreFinStatus.opened = true;
           },
           FechaCierreFinOptions: {
                   minDate: null
           },
           //Method for update minDate and MaxDate
           changeMinAndMaxDates: function () {
                   $scope.datePicker.FechaAltaInicioOptions.maxDate = new Date($scope.FilterViewModel.FechaAltaFin);


                   $scope.datePicker.FechaAltaFinOptions.minDate = new Date($scope.FilterViewModel.FechaAltaInicio);
                   $scope.datePicker.FechaAltaFinOptions.maxDate = new Date($scope.FilterViewModel.FechaCierreInicio);


                   $scope.datePicker.FechaCierreInicioOptions.minDate = new Date($scope.FilterViewModel.FechaAltaFin);
                   $scope.datePicker.FechaCierreInicioOptions.maxDate = new Date($scope.FilterViewModel.FechaCierreFin);


                   $scope.datePicker.FechaCierreFinOptions.minDate = new Date($scope.FilterViewModel.FechaCierreInicio);
           }
   };
}

CSS:

.validation-messages {
                       font-size: 11px;
                       color: darkred;
                       margin: -36px 0px 0 8px;
               }

Widget Angular Provider

name: uibDatepickerPopup
Client Script:

angular.module('appDatepicker', ['ui.bootstrap'])
.controller('DatePicker', function($scope){
})

[mspeirs]

Maybe this will help you find an answer. I just discovered that adding the attribute sn-include-time="true" to the <sp-date-picker> will allow it to show time as well as date. I didn't see this documented anywhere. I figured it out by looking at the code for the directive.

If you go to <your_instance>.service-now.com/scripts/js_includes_sp.js you can see the directive code (for sp-date-picker and others). I learned a lot by going through this code and seeing how it interacts with the SC Catalog Item and Form widgets through the sp-model directive. Press Ctrl + F and search for spDatePicker. I saw this line which helped me figure out how to display time: var includeTime = scope.snIncludeTime;

Unfortunately, I'm not seeing anything in there about setting a min or max date. But maybe you can copy the directive code and make your own custom angular directive. You would probably add the code to a new Angular Provider that you could include with any widget that needs to use it.

Here is where I discovered the url for the backend code that ServiceNow hides from us and does not allow us to edit directly: Slicing Through the Service Portal: Customizing the Catalog Item Form | Sensible ServiceNow

Here is an example of creating an Angular Provider directive: Creating an Angular Directive in Service Portal - ServicePortal.io - Service Portal, CMS, and Custom...