Need help with sp-date-picker directive

[AK57]

Can someone please give an example on using the sp-date-picker directive with sn-include-time=true ?

I have tried to use it but the server script never catches the values from the html. How should the client controller look like in order to get this working ?

Thanks.

[Raju Koyagura]

Try something like below...

HTML

<div>
<sp-date-picker field="data.datePicker" ng-model="data.datePicker" sn-change="customDate()" sn-include-time="true"></sp-date-picker>
</div>

Client Script:

function($scope) {
/* widget controller */
var c = this;
$scope.customDate = function () {
$scope.data.funcName="OnDate";
c.server.update().then(function(){})
};
}

Server Script:

(function() {
data.datePicker="";
if(input && input.funcName=="OnDate"){
gs.addInfoMessage(input.datePicker);
}
})();

[Jamsta1912]

Hi Raju,

Thanks for this - it's very handy. When I use your example, it works, except that the date is immediately cleared from the picker as soon as it's selected. How do we make it 'stick' so that it remains visible to the user?

[Jamsta1912]

Ah, I've realised, it sticks if I add a line to your server side script:

(function() {
 data.datePicker="";
 if(input && input.funcName=="OnDate"){
   data.datePicker = input.datePicker;
   gs.addInfoMessage(input.datePicker);
 }
})();

But this leads to another question, which is really about how the binding works: If we're setting the date with the picker, and we have this directive in our HTML: ng-model="data.datePicker", why does this not automatically set data.datePicker on the server side... or am I misunderstanding how binding works and it's always the case that we have set the server side value explicitly?

[Jamsta1912]

I've also realised, my additional line is not the best way to do this, as it seems to run the re-trigger the function from the HTML side, so I'm getting the infoMessage twice.