how to use monthNames in jqgrid when validating da

Question

In my jqgrid when i am clicking on add new record i have date field prepopulated with current date. Format of the date is yyyy-MMM-d (e.g. 2010-Jan-23). Date is required field and when i click submit button it fails validation and displays error that this date is invalid, and it wants Y-m-d format.

How can i check my value with jqgrid? In other words how to make jqgrid accept the following date format when validating 2010-Jan-23?

Thanks.

Here is my JSON data:

{"rows":[

{"id":1,"cell":["2010-Mar-3","Pepto","2","False","not active"]},
{"id":2,"cell":["2009-May-6","Tylenol","5","False","not active"]},
{"id":3,"cell":["2008-May-6","Aspirin","9","True","active"]}

]}},

Here is my date column definition:

{ name: 'Date', 
index: 'date', 
width: '80px', 
align: 'center', 
sortable: false,
editable: true, 
datefmt: 'Y-M-d', 
editoptions: { dataInit: function(elem) { $(elem).datepicker({ dateFormat: 'yy-M-d' });},value: getDate } ,
editrules: { required: true, date:true} },

The getdate function inserts current date into field. here is the function:

 function getDate(){
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var now = new Date();
        return now.getFullYear() + "-" + monthNames[now.getMonth()] + "-" + now.getDate();
    }

Maybe this is because of this function? Can i insert current date from datepicker?

Amount of data sent from the server is not too big (about 10-30 rows) and this application will be used by maximum of 50 people, so there is no concerns regarding amounts of data.

Anytime when i have value as 2010-Jun-23 in the field, i get error message:Enter valid date value - Y-M-d

Answer 1

Verify that you defined datefmt: 'Y-M-d' in the column definition of colModel. In the list of editrules options (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules) is defined that if you use date: true as a editrules option, the validation will be done corresponds with the datefmt option.

Some more recommendations if you use date in jqGrid:

If you not yet use, think about of the usage of jQuery.datepicker (see http://jqueryui.com/demos/datepicker/#date-formats) inside of dataInit function of editoptions (like

editoptions: {
    dataInit : function (elem) {
        $(elem).datepicker();
    }
    // ...
}

in the simplest case). If you use searching for date fields, you can use dataInit with jQuery.datepicker also in searchoptions in the same way (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching#colmodel_options). The usage of jQuery.datepicker in jqGrid is very easy, but it makes your program more comfortable.

Usage of standard date formatter (formatter: 'date') can be useful to convert source data format send to jqGrid to the new format which will be displayed. For example,

formatter: 'date', formatoptions: {srcformat:'y-m-d', newformat: 'Y-M-d' }

It is less interesting, but it can reduce a little the size of data send from server to client.

UPDATED: I must admit, I don't tested my suggestion with exactly your data format. Just now I tested all one more time and then read carefully jqGrid documentation about datefmt (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options). For datefmt are only numerical format for months is supported! So the value at the time of date verification must be in a numerical format. What can we do? For example following

we define as parameters of navGrid function "add" parameters (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator parameter prmAdd) like following:

{ beforeCheckValues: function(posdata, formid, mode) {
      var data = posdata.Date;
      var dateParts = data.split("-");
      var mounth = dateParts[1];
      var mounths = $.jgrid.formatter.date.monthNames;
      var iMounth = -1;
      for (var i=0; i<12; i++) {
          if (mounth === mounths[i]) {
              iMounth = i;
              break;
          }
      }
      if (iMounth !== -1) {
          posdata.Date = dateParts[0]+'-'+(iMounth+1)+'-'+dateParts[2];
      }
  },
  beforeSubmit: function(postdata, formid) { 
      var data = postdata.Date;
      var dateParts = data.split("-");
      var mounths = $.jgrid.formatter.date.monthNames;
      postdata.Date = dateParts[0]+'-'+
                      $.jgrid.formatter.date.monthNames[dateParts[1]-1]+
                      '-'+dateParts[2];
      return [true,""];
  }
}

So we convert the Date field to the numerical format inside of beforeCheckValues function and then convert all back to the original format (like 2010-Jan-23) after usage of checkDate. It will work.

The main question is now: have we some advantage from such kind of the date checking? We can just don't use editrules: { date:true } and implement our own date checking inside of beforeSubmit function. If we find out the wrong date we should return [false,"My error message"] and our custom error message "My error message" will be displayed by jqGrid.

So the easiest solution of your problem we receive if we could change the date format to any numerical form (Y-mm-d, mm/d/Y or another one). Usage of datepicker will makes for users the format problem not very important. Think about this and choose the way which your prefer.

Answer 2

I was facing similar issue. I have resolved it using custom function for validation. I am suing date format as '23-Jan-05'. You may modify it to suit your required date format.

function datecheck(value, colname) {
            var dateParts = value.split("-");
            var datePart = dateParts[0];
            var mounth = dateParts[1];
            var yearPart = dateParts[2];

            var mounths = $.jgrid.formatter.date.monthNames;
            var monthPart = -1;
            for (var i = 0; i < 12; i++) {
                if (mounth === mounths[i]) {
                    monthPart = i + 1;
                    break;
                }
            }
            var dateText = monthPart + '-' + datePart + '-' + yearPart;
            var date = Date.parse(dateText);
            if (isNaN(date)) 
                return [false,"Invalid date. Format expected: dd-mmm-yy. (23-Jul-05)"];
            else 
            return [true,""];                  

        }

JQGrid column details:

colModel: [name: 'JoiningDate', align: "center", editable: true, 
           editrules: { custom: true, custom_func: datecheck },
           formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'd-M-y' }, edittype: 'text', editable: true,
           editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker({ dateFormat: 'd-M-y' }); }, 200); } }
            },

Hope this helps.

Regards,

Abhilash