asked on

jqgrid date column in date format

Hi All,
Advance thanks!
I am using ASP.NET MVc core and jqgrid in the ui. I receive both date string (Last Update) and actual date field (DocumentSubmissionDate). I need date field only, i added in the view to take snapshot to display here. My issue is i need to display date field just like that string date (i.e. mm/dd/yyyy by remove T and show AM/PM). Please find the script below

<script type="text/javascript">
$(document).ready(function () {
var $DocumentData = $('#jqgClaims');

$(window).bind('resize', function () {
//$("#jqgClaims").setGridWidth($(window).width() / 1.03);
//$("#jqgClaims").setGridWidth($(window).width() / 1.47);
jQuery("#jqgClaims").setGridWidth($('#parentDiv').width() - 10, true);
}).trigger('resize');

$DocumentData.jqGrid({
url: '@Url.Action("GetDocumentList", "wsApproval")',
datatype: 'json',
mtype: 'POST',
cmTemplate: { align: 'left' },
colNames: ['Claim No', 'Doc No', 'Document Name', 'Document Status', 'Last Update','DocumentSubmissionDate', 'Supervisor Id', 'Examiner Id', 'Reassign Id','test' , 'DocumentTypeCode'],
colModel: [
{ name: 'ClaimNumber', align: 'left', search: false, hidden: false, width: '80%' },
{ name: 'DocumentNumber', align: 'left', search: false, hidden: true, width: '80%' },
{ name: 'DocumentTypeName', align: 'left', search: false, hidden: false, width: '250%' },
{ name: 'DocumentApprovalStatus', align: 'left', search: false, hidden: false },
{ name: 'DocSubmissionDate', align: 'left', search: false, hidden: false, width: '200%' },
{ name: 'DocumentSubmissionDate', align: 'left', search: false, hidden: false, width: '200%' },
{ name: 'SupervisorId', align: 'left', search: false, hidden: false },
{ name: 'ExaminerId', align: 'left', search: false, hidden: false },
{ name: 'ReassignId', align: 'left', search: false, hidden: false },
{ name: 'TableID', align: 'left', search: false, hidden: true },
{ name: 'DocumentTypeCode', align: 'left', search: false, hidden: true }

],
beforeSelectRow: function (rowid, e) {
return false;
},
ondblClickRow: function (rowId) {
var rowData = jQuery(this).getRowData(rowId);

var url = '@baseUrl/SupervisorApproval/Details?pClaimNumber=' + rowData['ClaimNumber'] + '&pDocType=' + rowData['DocumentTypeCode'] + '&pDocNum=' + rowData['DocumentNumber'] + '&pSupervisorID=' + rowData['SupervisorId'] + '&pReassignID=' + rowData['ReassignId'] + '&pTableId=' + rowData['TableID'] + '&pDocStatus=' + rowData['DocumentApprovalStatus'];

window.open(url, '_blank');

},
loadonce: true,
loadtext: 'Loading...',
firstsortorder:'desc',
caption: 'Document List',
//footerrow: true,
userDataOnFooter: true,
jsonReader: { repeatitems: false, id: 'Id' },
pager: $('#jqgpClaims'),
rowNum: 15,
rownumbers: true,
sortname: 'DocSubmissionDate',
sortorder: 'desc',
sorttype: function (cellvalue, rowObject) {
return cellvalue ? cellvalue + '_' + owObject.DocSubmissionDate : rowObject.DocSubmissionDate;
},
viewsortcols: [true, 'vertical', true],
viewrecords: true,
height: 'auto',
//width: $(window).width() / 1.35

autowidth: true,
shrinkToFit: false,
forceFit: true,

})

});

</script>

Kind regards,
Pooja
jqgrid-snapshot.JPG

HainKurt

use this function

https://jsfiddle.net/zfrbkbpj/

function formatDate(myDate) {
  return (myDate.getMonth() + 1) + "/" + myDate.getDate() + "/" + myDate.getFullYear();
}

var myDate = new Date();
alert(formatDate(myDate));

Open in new window

HainKurt

but you should do this on the server side and return properly formatted data...
not format this on client side...

HainKurt

to format as MM/DD/YYYY, we can use this (pad with 0 when needed)

https://jsfiddle.net/sq4xats5/

if (!String.prototype.padStart) {
  String.prototype.padStart = function padStart(targetLength, padString) {
    targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
    padString = String(padString || ' ');
    if (this.length > targetLength) {
      return String(this);
    } else {
      targetLength = targetLength - this.length;
      if (targetLength > padString.length) {
        padString += padString.repeat(targetLength / padString.length);
      }
      return padString.slice(0, targetLength) + String(this);
    }
  };
}

function formatDate(myDate) {
  return (myDate.getMonth() + 1).toString().padStart(2, '0') + "/" + myDate.getDate().toString().padStart(2, '0') + "/" + myDate.getFullYear();
}

var myDate = new Date();
alert(formatDate(myDate));

Open in new window

suresh pondicherry

ASKER

Hi Huseyin KAHRAMAN,
Thanks for the response. I need date column in date format excluding 'T' , etc.. and i don't want date string since i could not do sorting operations on the grid. sort date on date string will not work.

Kind regards,
Suresh

HainKurt

then use this function

https://jsfiddle.net/c2Lm5tgf/

function formatDate(myDate) {
  var YYYY = myDate.getFullYear();
  var MM = myDate.getMonth() + 1;
  var DD = myDate.getDate();
  var HH = myDate.getHours();
  var MI = myDate.getMinutes();
  var SS = myDate.getSeconds();
  var AMPM = HH >= 12 ? 'PM' : 'AM';
  HH = HH % 12;
  HH = HH ? HH : 12; // the hour '0' should be '12'

  return YYYY + "-" + MM.toString().padStart(2, '0') + "-" + DD.toString().padStart(2, '0') + " " + HH.toString().padStart(2, '0') + ":" + MI.toString().padStart(2, '0') + ":" + SS.toString().padStart(2, '0') + " " + AMPM;
}

Open in new window

HainKurt

because of formatting as "YYYY/MM/DD HH:MI:SS AM/PM" and padding with "0", you can treat it as string and you dont need to do any special thing to sort...

suresh pondicherry

ASKER

I converted to string date (Last Update) from actual date (DocumentSubmissionDate) in the controller itself.
Please see the attachment. Sorting is not happening on (Last Update) since it is a string. Sorting is occurring with (DocumentSubmissionDate) but it is showing 'T'

If i click the title (DocumentSubmissionDate), grid display the data in date ascending or descending
If i click Last Update, grid is not showing correct date order because field is a string

Coast Line

You can do on front end but it's always better to return these formatted objects to return from server side

Why do js do work again if that same work can be done from server side with single call

suresh pondicherry

ASKER

Hi Gurpreet Singh Randhawa,
All i need is that to display date column (no string datatype) without 'T'

Coast Line

You can always do on server side can't you

Did you tried that

suresh pondicherry

ASKER

server side is not showing 'T' but after it rendered in view, it shows 'T'

suresh pondicherry

ASKER

Guys...Solved it myself. Thanks for your time

Solution:
=======
{ name: 'DocumentSubmissionDate', align: 'left', search: false, hidden: false, width: '200%', sorttype: "date", formatter: "date", formatoptions: { srcformat: "Y-m-d H:i:s", newformat: "m-d-Y H:i:s" } ,datefmt:'d-M-Y'},

HainKurt

I just dont get it

{ name: 'DocSubmissionDate', align: 'left', search: false, hidden: false, width: '200%' },
{ name: 'DocumentSubmissionDate', align: 'left', search: false, hidden: false, width: '200%' },

why they are different?

from server, send them as "YYYY-MM-DD HH:MI:SS AM/PM" and you dont need to deal with any date on client side...

Coast Line

At least you should accept @Huseyin KAHRAMAN comments as he helped you along with this..

suresh pondicherry

ASKER

Hi Huseyin KAHRAMAN,
Please find the explanation,

{ name: 'DocSubmissionDate', align: 'left', search: false, hidden: false, width: '200%' }, =======> Date string field (To show expected format in respective date field)
{ name: 'DocumentSubmissionDate', align: 'left', search: false, hidden: false, width: '200%' }, ========> Column name is Last updated (Date field)

Hi All,
Please allow me to close the question, i gave answer also.

Kind regards,
Suresh

ASKER CERTIFIED SOLUTION

suresh pondicherry

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

suresh pondicherry

ASKER

The self solution fixed my undergoing issue with Jqgrid