jQuery UI Widgets Forums Editors DateTimeInput Displaying Null Value in jqxDateTimeInput

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 3 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Displaying Null Value in jqxDateTimeInput #89733

    walker1234
    Participant

    This is a continued discussion from my other thread that I posted in wrong section. Here is the link to old thread.

    As mentioned, buttonclick callback was required in the last post, I am posting most of my code which shows the buttonclick callback and other things. Hopefully this will help in troubleshooting my problem.

    Here is my grid code :

     $("#jqxgrid").jqxGrid(
                    {
                      source: dataAdapter,
                      width: '550',
                      height: '200',
                      pageable: true,
                      columnsResize: true,
                      columns: [
                         {
                             text: 'Name', datafield: 'name',width:150},
                         {
                           text: 'Start ',
                           cellsrenderer: function (row_, columnfield_, value_, defaulthtml_, columnproperties_) {
    						   var formattedDate = "";
                               if (!isEmpty(value_)) {
                                   var dateObject = new Date(value_);
                                   formattedDate = (dateObject.getMonth() +1) + "/" +dateObject.getDate() + "/" +dateObject.getFullYear();
                               }
                               return "<div class=\"dateColumn\">" +formattedDate + "</div>";
                           },
                           datafield: 'start_date', width: 100
                         },
                         {
                           text: 'End',
                           cellsrenderer: function (row_, columnfield_, value_, defaulthtml_, columnproperties_) {
    						   var formattedDate = "";
                               if (!isEmpty(value_)) {
                                   var dateObject = new Date(value_);
                                   formattedDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
                               }
                               return "<div class=\"dateColumn\">" + formattedDate + "</div>";
                           },
                           datafield: 'end_date', width: 100
                          },
                          {text: 'Comment', datafield: 'annotator_comment', width: 150},
                          { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                               return "Edit";
                            }, 
                            buttonclick: function (row) {
                               // open the popup window when the user clicks a button.
                               editrow = row;
                               var offset = $("#jqxgrid").offset();
                               $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                               // get the clicked row's data and initialize the input fields.
                               var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                               $("#attributeName").val(dataRecord.name);
                                
                               // Changing Date format for Start Date on Edit Popup 
                              
                               var formatDateAssignedDate = "";
                               var dateObject = new Date(dataRecord.start_date);
                               formatDateAssignedDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
                               $("#assignedOnDate").val(formatDateAssignedDate);
                             
    
                               // Changing Date format for End Date on Edit Popup Only if the date value isn't null 
                               if(dataRecord.end_date !== null){ 
                               var formatDateEndDate = "";
                               var dateObject = new Date(dataRecord.end_date);
                               formatDateEndDate = (dateObject.getMonth() + 1) + "/" + dateObject.getDate() + "/" + dateObject.getFullYear();
                               $("#endAssignedOnDate").val(formatDateEndDate);
    
                               }
                               else{
    
                                $("#endAssignedOnDate").val(dataRecord.start_date);
                               }
    
                               console.log("Checking date value: "+dataRecord.end_date);// Prints null on the colsole screen
    
    			   $("#userComment").val(dataRecord.annotator_comment);
                               // show the popup window.
                               $("#popupWindow").jqxWindow('open');
                            }
                           }
    
                        
                     ]
                });  // END of  $("#jqxgrid").jqxGrid initialization
    			
    			 // initialize the popup window and buttons.
                    $("#popupWindow").jqxWindow({
                        width: 250, resizable: false,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01           
                    });
                    $("#popupWindow").on('open', function () {
                        //$("#attributeName").jqxInput('selectAll');
                        $("#assignedOnDate").jqxDateTimeInput({ theme: "arctic", formatString: "d",  width: '150px', height: '20px',allowNullDate: true  });
    		    $("#endAssignedOnDate").jqxDateTimeInput({ theme: "arctic", formatString: "d", width: '150px', height: '20px',allowNullDate: true  });
                    });

    As seen above, in the console log , console.log("Checking date value: "+dataRecord.end_date);// Prints null on the colsole screen, I see null value and have added the same value to the associated id associated with it(in the code here : $("#endAssignedOnDate").val(dataRecord.start_date); ) where jqxDateInput is defined.

    Does it has something to do with the popup window initialization code written inside this line $("#popupWindow").on('open', function () {?

    • This topic was modified 3 years, 7 months ago by  walker1234.
    Displaying Null Value in jqxDateTimeInput #89769

    Hristo
    Participant

    Hello walker1234,

    To set date in the jqxDateTimeInput you could use setDate method also.
    (please, take a look at our API Documentation how to set date of type string)
    I would like to suggest you try this separate when you are sure in the result to return this in the main project.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.