sp-date-picker validation on ServicePortal

[Kalik2]

I have created start date and end date field using angular ng template using the below code.

<sp-date-picker
field="::spDatePickerConfig.startTime || {}"
ng-model="start.value"
sn-include-time="true"
sn-change="timeChange('start')">
</sp-date-picker>

I want that if the user selects a time outside office hours 9am-6pm , he should be asked to select time between office hours.

And if the user selects the time in the office hours but that time is already past, the next day's date should populate automatically.

How can I achieve this?

[jaheerhattiwale]

@Kalik2 Tried and Tested. 100% working solution.

Please change the code as follows:

HTML:

<sp-date-picker
field="::spDatePickerConfig.startTime || {}"
ng-model="start.value"
sn-include-time="true"
sn-change="timeChange(start)">
</sp-date-picker>

Client Controller:

api.controller=function($scope) {
/* widget controller */
var c = this;

$scope.timeChange = function(start){
c.data.enteredDateTime = start.value;
c.data.action = "checkStartDate";
c.server.update().then(function(resp){
if(resp.message){
alert(resp.message)
}

if(c.data.isOldDate){
alert("Entered date is past date, setting to new date")
start.value = c.data.newDate;
}
})
}
};

Server script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

data.message = "";
data.isOldDate = "";

if(input){
if(input.action == "checkStartDate"){
var enteredDateTimeString = input.enteredDateTime;
var enteredDateTime = enteredDateTimeString;

var enteredDate = enteredDateTime.split(" ");
var startTime = enteredDate[0]+" 09:00:00";
var endTime = enteredDate[0]+" 18:00:00";

var compDate = new GlideDateTime(enteredDateTimeString);

//Start time check
var initDate = new GlideDateTime(startTime);

var startTimeCheck = initDate.compareTo(compDate);
if(startTimeCheck == 1){
data.message = "Start time is before 9am.";
return;
}

//End time check
initDate = new GlideDateTime(endTime);

var endTimeCheck = initDate.compareTo(compDate);
if(endTimeCheck == -1){
data.message = "End time is after 6pm.";
return;
}

//Check if date entered is before today
initDate = new GlideDateTime();

var oldDateCheck = initDate.compareTo(compDate);
if(oldDateCheck == 1){
data.isOldDate = true;

compDate.addDaysLocalTime(1)
data.newDate = compDate.toString();
return;
}
}
}
})();

Note: Please replace the HTML code as well with the one added above here along with client and server.

Please mark as correct answer if this solves your issue.

[Kalik1]

I have tried this in a separate widget and it is working fine. However my html is in angular ng template. I am unable to access client controller functions from angular ng template. Do you know how can we do that?

[jaheerhattiwale]

@Kalik1 Let me check and come back here

[jaheerhattiwale]

@Kalik1 It should work.

BTW have you included the the angular template in the HTML like below.

<div ng-include="'<TEMPLATE ID HERE>'"></div>

If not added then please add.

If added then send me the screen shots of code.

Please mark as correct answer if this solves your issue.