jquery - datepicker reads month as date in dd/mm/yy format -
i using jquery datepicker in jqgrid datepicker reads month date in dd/mm/yy format. mean is, when user selects date, date shown correclt in dd/mm/yy format date passed structs action date setter method in date object based on mm/dd/yy format.
see below code:
<%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1" %> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" media="screen" href="${pagecontext.request.contextpath}/css/jquery-ui.min.css"/> <link rel="stylesheet" type="text/css" media="screen" href="${pagecontext.request.contextpath}/css/ui.jqgrid.css"/> <!-- overide css styling ensure calendar image inline text box --> <style type="text/css">.ui-jqgrid .ui-search-table .ui-search-input > input, .ui-jqgrid .ui-search-table .ui-search-input > select, .ui-jqgrid .ui-search-table .ui-search-input > img {vertical-align: middle; display: inline-block;} </style> <script src="${pagecontext.request.contextpath}/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="${pagecontext.request.contextpath}/js/jquery-ui.min.js" type="text/javascript"></script> <script src="${pagecontext.request.contextpath}/js/grid.locale-en.js" type="text/javascript"></script> <script src="${pagecontext.request.contextpath}/js/jquery.jqgrid.min.js" type="text/javascript"></script> <title>trucks overview</title> <script type="text/javascript"> jquery().ready(function () { var grid = jquery("#truck_grid"); var ordergriddialog = $('#truck_grid_dialog'); var griddata; getuniquenames = function(columnname) { var texts = grid.jqgrid('getcol', columnname, false); var uniquetexts = [], textslength = texts.length, text, i, textsmap = {}; (i=0;i<textslength;i++) { text = texts[i]; if (text != undefined && textsmap[text] === undefined) { // test whether texts unique place in map. textsmap[text] = true; uniquetexts.push(text); } } return uniquetexts; }; buildsearchselect = function(uniquenames) { var values=":all"; $.each (uniquenames, function() { values += ";" + + ":" + this; }); return values; }; setsearchselect = function(columnname) { grid.jqgrid('setcolprop', columnname, { stype: 'select', searchoptions: { value:buildsearchselect(getuniquenames(columnname)), sopt:['eq'] } } ); }; var initdatewithbutton = function (elem) { if (/^\d+%$/.test(elem.style.width)) { // remove % searching toolbar elem.style.width = ''; } // able use 'showon' option of datepicker in advance searching dialog // or in editing have use settimeout settimeout(function () { $(elem).datepicker({ dateformat: 'dd/mm/yy', showon: 'button', changeyear: true, changemonth: true, buttonimageonly: true, buttonimage: "images/calendar.gif", buttontext: "select date", showbuttonpanel: true, onselect: function (datetext, inst) { inst.input.focus(); if (typeof (inst.id) === "string" && inst.id.substr(0, 3) === "gs_") { $(inst.id).val(datetext); grid[0].triggertoolbar(); } else { // refresh filter $(inst).trigger("change"); } } }); }, 100); }; grid.jqgrid({ url: '${pagecontext.request.contextpath}/gettrucksjsonaction', datatype: "json", mtype: 'get', colnames: ['truck id', 'status', 'carrier code', 'date created', 'date closed', 't1 status', 'truck arrived'], colmodel: [ {name: 'truckid', key:true, index: 'truckid', align: 'center', width: 100}, {name: 'status', index: 'status', align: 'center', width: 100}, {name: 'carriername', index: 'carriername', align: 'center', width: 100}, {name: 'createddate', index: 'createddate', align: 'center', width: 100}, {name: 'closeddate', index: 'closeddate', align: 'center', width: 100}, {name: 't1status', sortable: false, align: 'center', width: 100, fixed: true, formatter: function (celvalue) { return celvalue ? "<img src='http://www.clker.com/cliparts/q/j/i/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>" : "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:10px;height:10px'/>"; }} , {name: 'truckarrived', sortable: false, align: 'center', width: 100, fixed: true, formatter: function (celvalue) { return celvalue ? "<img src='http://www.clker.com/cliparts/q/j/i/0/8/d/green-circle-icon-md.png' alt='green light' style='width:15px;height:15px'/>" : "<img src='http://www.iconsdb.com/icons/preview/red/circle-xxl.png' alt='red light' style='width:10px;height:10px'/>"; }} ], rownum: 10, height: 300, autoheight: true, autowidth: true, rowlist: [10, 20, 30], pager: jquery('#truck_grid_pager'), sortname: 'truckid', sortorder: "desc", jsonreader: { root: "records", page: "page", total: "total", records: "rows", repeatitems: false }, viewrecords: true, altrows: false, gridview: true, hidegrid: false, multiselect:true, recordtext: '', emptyrecords: 'no trucks', forcefit: true, caption: "trucks overview", loadcomplete: function() { // reload grid after changing paginattion var allrecords = grid.getgridparam('lastpage') * grid.getgridparam('records'); grid.jqgrid('setgridparam', { recordtext: allrecords + ' trucks(s) found. displaying {0} {1}'}); $(this).trigger("reloadgrid"); async: false, setsearchselect('status'); setsearchselect('carriername'); grid.jqgrid('setcolprop', 'truckid', { searchoptions : { sopt : [ 'bw' ], datainit : function(elem) { $(elem).autocomplete({ source : getuniquenames('truckid'), delay : 0, minlength : 0 }); } } }); grid.jqgrid('setcolprop', 'createddate', { sorttype: 'date', editable: true, editoptions: { datainit: initdatewithbutton, size: 8 }, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], datainit: initdatewithbutton } }); griddata = $(this).jqgrid("getgridparam", "data"); grid.jqgrid('filtertoolbar', {autosearch: true}); }, }).navgrid('#truck_grid_pager', {edit: false, add: false, del: false, search: false, refresh: true}) .navbuttonadd('#truck_grid_pager', {caption:"truck arrived", buttonicon:"ui-icon-flag", position:"first", title:"truck arrived", onclickbutton: function(){ var i; var data = grid.jqgrid("getgridparam", "data"); var selrowids = grid.jqgrid('getgridparam', 'selarrrow'); (i = 0; < data.length; i++) { if (selrowids.indexof(data[i].truckid) > -1) { data[i].truckarrived = true; } } grid.trigger("reloadgrid"); } }) .navbuttonadd('#truck_grid_pager', {caption:"ship confirm", buttonicon:"ui-icon-circle-check", position:"first", title:"ship confirm", onclickbutton: function(){ alert("ship has been confirmed");} }); ordergriddialog.dialog({ autoopen: false, width: 1000, height: 400, draggable: false, show: { effect: "blind", duration: 500 }, hide: { effect: "blind", duration: 250 }, close: function(event, ui){ ordergriddialog.text('loading grid...'); } }); }); </script> </head> <body> <table id="truck_grid"></table> <div id="truck_grid_pager"></div> <div id="truck_grid_dialog" title="orders overview">loading...</div> </body> </html> problem happens in last section of code, namely: .navbuttonadd('#truck_grid_pager', {caption:"truck arrived", buttonicon:"ui-icon-flag", position:"first", title:"truck arrived", onclickbutton: function(){ var i; var data = grid.jqgrid("getgridparam", "data"); var selrowids = grid.jqgrid('getgridparam', 'selarrrow'); (i = 0; < data.length; i++) { if (selrowids.indexof(data[i].truckid) > -1) { data[i].truckarrived = true; } } grid.trigger("reloadgrid"); } }) how can ensure dd/mm/yy date format returned struts action date setter?
Comments
Post a Comment