sp-date-picker Format

spike · ‎04-25-2024

Can anyone tell me what the date format is meant to be for passing into the directive sp-date-picker? I'm writing a widget and I just cannot get it to work.

I cannot find anything to tell me and for the life of me I cannot get it to work. All I get is an error on the console and the popup doesn't work:

TypeError: Cannot read properties of undefined (reading 'label') at Object.link ( <then lots of script links>

From my server script:

data.end_date = grChange.end_date.getByFormat('yyyy-MM-dd HH:mm');

From my HTML:

<sp-date-picker ng-if='edit' ng-model="data.end_date" sn-change="" sn-include-time="true" ></sp-date-picker>

Any and all help would be appreciated..

Community Alums · ‎04-26-2024

Hi @spike ,

It works for me please have a look on below script

HTML

<div>
        <label class="m-t-xs m-b-none text-muted"><b>Planned End Date</b></label>
        <br>
        <span ng-if='!edit'>Test{{data.end_date}}</span>
        <sp-date-picker
            field="c.saveRecord"
            ng-model="c.fromDate.value"          
            sn-include-time="true"
            sn-change="c.saveRecord()"
            ng-model-options="{getterSetter: true}" >
        </sp-date-picker>
      </div>

</div>

Client Controller

api.controller=function($scope) {
  /* widget controller */
  var c = this;
		
	c.saveRecord = function(){
		
$scope.data.end_date = c.data.end_date;
c.server.update().then(function(){
//window.location.reload();
});
		
	}
};

Server Side

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	
	data.end_date = [];
	var gr = new GlideRecord('change_request');
	gr.addQuery('sys_id', '87b1682a0a0a2c3e75af785bd9073d70');
	gr.query();
	if(gr.next()){
		data.users.push(gr.getValue('number'));
		data.end_date = gr.getValue('end_date');
	}
	
		console.log('input =' + input.end_date);
	if(input){
		
			var uptChange = new GlideRecord('change_request');
			uptChange.get('87b1682a0a0a2c3e75af785bd9073d70');
			uptChange.end_date = input.end_date;
			uptChange.update();
		}

})();

Note: In Server Side please replace the hardcoded sysId with your dynamic variables

Result :

Please mark my answer correct and helpful if this works for you

Thanks and Regards

Sarthak

View solution in original post

DrewW · ‎04-25-2024

Have you tried

data.end_date = grChange.end_date.getValue()

or

data.end_date = grChange.end_date.getDisplayValue();

or just

data.end_date = grChange.end_date;

Community Alums · ‎04-25-2024

Hi @spike .

I tried your problem in my PDI and it working fine for me please check below code

HTML

<sp-date-picker field="c.fromDate" ng-model="c.fromDate.value" ng-model-options="{getterSetter: true}"></sp-date-picker>

Instead of using server side please use client controller

Client controller:

c.fromDate = {
displayValue: '',
value: '',
name: '',
id: 'fromDate',
placeholder: 'From Date'
};

Result

Please mark my answer correct and helpful if this works for you

Thanks and Regards

Sarthak

spike · ‎04-25-2024

That's fantastic and gets the datetime picker to work. But I've got no idea how to get the data out of it and save it to the database.

I've got this in my client script:

$scope.saveRecord = function(){
$scope.data.end_date = c.fromDate.value;
c.server.update().then(function(){
window.location.reload();
});

And then this in my server script:

		if(input){
			var uptChange = new GlideRecord('change_request');
			uptChange.get(data.sys_id);
			uptChange.end_date = input.end_date;
			uptChange.update();
		}

But the data never gets written to the database.. Any thoughts?

Community Alums · ‎04-25-2024

Hi @spike ,

Can you please send me the HTML. This would be great help.

Thanks and Regards

Sarthak