using custom format date and time

[qtipaddictParticipant]

I want to format the value from a datetimeinput column to “yyyy-MM-dd HH:mm:ss” so I can send it to the server. When I try to format the Date object in the validation function, I get an error message “Entered value is not valid”. Here is my code:

{ text: 'Start Time', datafield: 'startDate', width: 150, editable: true, columntype: 'datetimeinput', renderer: columnsRenderer, cellsrenderer: alwaysEditableWrapRenderer, cellsFormat: "yyyy-MM-dd HH:mm:ss",
          validation: function (cell, value) {
            var date = $.jqx.dataFormat.formatdate(value, 'yyyy-MM-dd HH:mm:ss', grid.jqxGrid('gridlocalization'));
            return date;
          }
}

What am I doing wrong?

[Peter StoevKeymaster]

Hi qtipaddict,

1. The problem is that the validation function’s result expects true or false, not a String or Date object.
2. If you want to do something with the Date object, you should do it in the “updaterow” callback function before sending it to the server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[qtipaddictParticipant]

Okay, I put the formatdate call in the cellvaluechanged function so I can massage the Date before sending it as part of a JSON PUT request to the server. But after I refresh the page, I click on the date picker and the existing date/time is replaced by today’s date with time 00:00:00. How do I make the date picker set itself to the date and time values that’s already in the cell?

Also, after setting the date and time with the date picker, the value in the cell shows “Tue Jul 22 2014 09:00:00”. When I click in the cell, it changes to “2014-07-22 09:00:00”. How do I make it so that the format is always “yyyy-MM-dd HH:mm:ss”?

[qtipaddictParticipant]

Also, how can I check if the value in the “End Date” column is greater than the value in the “Start Date” column? I tried using cellendedit and showvalidationpopup but I get this error:

TypeError: this.validationpopuparrow is undefined in jqxgrid.edit.js (line 7)
…index: 99999; top: 0px; left: 0px; position: absolute;’ id=’dropdownlisteditor’>…

$("#jqxgrid").on('cellendedit', function (event)
    {
        debug("In cell end edit");
        var column = args.datafield;
        var rowIndex = args.rowindex;
        var value = args.newvalue;
        var oldvalue = args.oldvalue;
console.log(column);
console.log(rowIndex);
        var rows = $("#jqxgrid").jqxGrid('getboundrows');
        var rowData = rows[rowIndex];

        var startDate = rowData.startDate;
        var endDate = rowData.startDate;
        
        if (Date.parse(endDate) <= Date.parse(startDate)) {
          $("#jqxgrid").jqxGrid('showvalidationpopup', rowIndex, column, "End Time must be greater than Start Time.");
        }
        // Resume grid auto-refresh
        refreshGridData();
    });

[Peter StoevKeymaster]

Hi qtipaddict,

“getcellvalue” can be used for getting the value of a given Grid cell.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[qtipaddictParticipant]

Thanks Peter but the default value of the datetimeinput is a killer for me. After the grid is initialized with data and I click on a datetimeinput cell, the existing value is overridden by today’s date. I would really like to be able to turn that off. Also, when I set the date, it appears as “Tue Jul 22 2014 09:00:00″ but when I click in the cell, it becomes “2014-07-22 09:00:00″. Also, the date picker doesn’t let you set the time so I have to type it in. All of that makes it too frustrating for me as developer and the end-user. So, I resorted to using a textfield for dates. I use an external date.js script to convert between String and Date because I have to GET and PUT JSON as well as to validate the Date objects. If the jqWidgets team makes improvements on the datetimeinput, then I would be willing to revisit it at a later time.

[Peter StoevKeymaster]

Hi qtipaddict,

The Grid calls the column’s initeditor callback function when an editor is opened which means that the default date can be overriden by you through a call of the jqxDateTimeInput’s setDate method or its val method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[qtipaddictParticipant]

Thanks. But after I save the date “2014-07-28 00:00:00” to the database, jqWidgets changes the display of the date to “Mon Jul 28 2014 00:00:00”. How do I override that behavior?

[Peter StoevKeymaster]

Hi qtipaddict,

Please, prepare and share a sample of your scenario. You can use jsfiddle.net for that purpose.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[qtipaddictParticipant]

The date time issue I am trying to explain happens after the “cellvaluechanged” function sends a PUT request to the webserver so I cannot replicate for you using only jsfiddle. But I started the partial code on jsfiddle, http://jsfiddle.net/elai/FdxxR/2/.

Or, if you can see this screenshot. http://tinypic.com/r/rusj2r/8
After the value of “Start Time” is updated, it shows “Fri Aug 01 2014 14:12:44” but I want it to show “2014-08-01 14:12:44”. “End Time” is the value from the database.

[Peter StoevKeymaster]

Hi qtipaddict,

I think that the problem here is that you missed the fact that the value is JavaScript Date object, also all our widgets which are JavaScript widgets work with JavaScript Date Objects. This “Fri Aug 01 2014 14:12:44” is the result of calling toString() of a JavaScript Date object. If you want to format a Date object in a specific format, you can use the formatDate function of jqxDataAdapter or something else. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/formatting.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[qtipaddictParticipant]

But I don’t call toString() on the Date value. The Date field is set to type: 'date' in the dataSource. I also use cellsformat: 'yyyy-MM-dd HH:mm:ss' and the initeditor to format the date like you taught me.

initeditor: function (row, cellvalue, editor) {
            var startDate = moment(cellvalue, "YYYY-MM-DD HH:mm:ss").toDate();
            editor.jqxDateTimeInput('setDate', startDate);
          }

Somehow after cellendedit, jqWidgets loses the date format information and displays the raw value of the Date object. Because when I refresh the grid, the date is properly formatted. So as a temporary workaround, I call the grid’s updatebounddata in cellendedit. I would rather do it when the AJAX PUT succeeds but there’s no way to know when the AJAX call will return.

[Peter StoevKeymaster]

Hi qtipaddict,

Sorry, but I think that you missed to understand what I tried to explain you. I suggest you to make a difference between String and Date. jqxGrid and jqxDateTimeInput work with JavaScript Date objects. When you set the “type” to date, this means that the cell values are JavaScript Date objects. The “cellsformat” defines how a JavaScript Date object is displayed in the Grid, but the cell’s value is still a JavaScript Date object. I explained you in my previous post what to do if you want to send your server a formatted JavaScript Date object and I suggest you to follow my instructions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[qtipaddictParticipant]

Sorry, I am not deliberately trying to be difficult. I’m sending JSON to the server. JSON does not have a Date type so there’s no choice but to send the date as a formatted String. If I try to send a Javascript Date object, the server will complain. I re-read your posts several times already. If I missed your instructions, please repeat them in detailed steps so that there is no miscommunication. Thanks.

[Peter StoevKeymaster]

Ok, re-read my post from August 2, 2014. If you want to format a Date object in a specific format, you can use the formatDate function of jqxDataAdapter or something else. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdataadapter/formatting.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts