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>                      

[scottl]

Thanks for this detailed response Michael.   It's a shame this OOTB directive is so limited, you'd have thought a comprehensive date widget would've been one of the most important widgets that SN would need to make for the ServicePortal.

I think your suggestion of creating another provider might be the best approach.

[shferoz1]

How to get new changed value from <sp-date-picker> directive

[rahulraviprasad]

Currently spDatePicker only supports these 4 attributes

1. field

2. snDisabled

3. snIncludeTime

4. snChange

[Yaraslau]

1. Copy code from your-instance.service-now.com/scripts/app.$sp/directive.spDatePicker.js
2. Create angular provider your-instance.service-now.com/sp_angular_provider.do?sys_id=-1 with type Directive and insert code
3. Edit code 

   angular.module('sn.$sp').directive('spDatePicker', function (spConf, $rootScope, $document, $window, spAriaUtil, i18n, spDatePickerUtil, select2EventBroker, spUtil) {​

   to 

   function CustomDatePicker(spConf, $rootScope, $document, $window, spAriaUtil, i18n, spDatePickerUtil, select2EventBroker, spUtil) {

4. Add code in right place starting from 321 line

   scope: {
   			field: '=',
   			snDisabled: '=',
   			snIncludeTime: '=',
   			maxDate: '=',
   			minDate: '=',
   			snChange: '&'
   		},
   		controller: function($scope) {
   			$scope.live = isSafari ? "polite" : "off";
   		},
   		link: function(scope, element, attrs, ngModel) {
   			scope.g_accessibility = spAriaUtil.isAccessibilityEnabled();
   			var includeTime = scope.snIncludeTime;
   			var format, isUserEnteredValue = false, initDateTimePicker = true;
   			var dpValueTouched;
   			var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
   			format = includeTime ? dateTimeFormat.trim() : dateFormat.trim();
   			format = format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/a/g, 'A');
   			scope.format = format;
   			var config = {
   				keepInvalid: true,
   				pickTime: scope.snIncludeTime === true,
   				minDate: scope.minDate,
   				maxDate: scope.maxDate,				
   				format: scope.format,
   				locale: spUtil.localeMap[g_lang],
   				language: spUtil.localeMap[g_lang]
   			};
   			var dp = element.find('.input-group-btn').datetimepicker(config).on('dp.change', onDpChange);
   			if (scope.snIncludeTime === true)
   				$(element.find('.input-group-btn')).data("DateTimePicker").initial_value = scope.field.value;			
   			if (scope.minDate) {
   				dp.data('DateTimePicker').setMinDate(scope.minDate);				
   			}​
   if (scope.maxDate) {
   				dp.data('DateTimePicker').setMinDate(scope.maxDate);
   			}	

5. So you have additional attributes: min-date and max-date