jQuery Grid Plugin - jqGrid - Topic: formatter: Date Problem

tucano on formatter: Date Problem

Tue, 07 Dec 2010 13:10:33 +0200

Olá,

uma possível solução, que implementei fora do jqGrid para suprir essa situação errônea, é uma função que faz essa ordenação d/m/y no braço antes de jogar no jqGrid.

function formataDatajqGrid(dataEntrada){
var data = dataEntrada.split("-");
return data[2]+"/"+data[1]+"/"+data[0];
}

configuração da coluna no colModel:

...
colModel[
{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:80, align:'center', resizable: false, sorttype:'date', formatter:'date',fotmatoptions:{srcformat:"d/m/Y",newformt:"d/m/Y"}}
],
...

atribuição de valor ao campo que deve conter a data:

<c:forEach var="teste" items="${listTESTE}" varStatus="row">
   $("#listagem").jqGrid('addRowData',${row.index+1},{
   TESTANDO_DATA: formataDatajqGrid('${teste.data}')
   });
  </c:forEach>

por esta se tratar de uma forma adaptada de trabalho com o jqGrig, acredito de seja necessário em uma próxima release do jqGrid já ser incorporado uma solução a esta questão.

Mas de toda forma, agradeço a equipe do jqGrid que vem fazendo uma excelente ferramenta, assim como a assitencia que recebi do Tony.

Atenciosamente,
Tucano

------------------------------------------------------------------------------------------

Mensagem traduzida do Português-Brasil para o Inglês pelo google translate

Message translated from Portuguese-Brazil to the English translation by google

------------------------------------------------------------------------------------------

Hello,
a possible solution, which implemented outside jqGrid to fill this erroneous situation, is a function that does this sort d / m / y in the arm before playing in jqGrid.

function formataDatajqGrid(dataEntrada){
var data = dataEntrada.split("-");
return data[2]+"/"+data[1]+"/"+data[0];
}

configuration of the column at colModel:

...
colModel[
{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:80, align:'center', resizable: false, sorttype:'date', formatter:'date',fotmatoptions:{srcformat:"d/m/Y",newformt:"d/m/Y"}}
],
...

value assignment to the field that must contain the date:

<c:forEach var="teste" items="${listTESTE}" varStatus="row">
   $("#listagem").jqGrid('addRowData',${row.index+1},{
   TESTANDO_DATA: formataDatajqGrid('${teste.data}')
   });
  </c:forEach>

for this being a form adapted to work with jqGrig, being necessary to believe in a future release of jqGrid already be incorporated into a solution to this issue.

But anyway, thank jqGrid team that's been doing an excellent tool as well as the assistance that I received from Tony.

Regards,
Tucano

Nenad on formatter: Date Problem

Mon, 06 Dec 2010 17:17:47 +0200

If I may piggy back on the same problem. The source is below. When you first load the HTML in a browser (any browser) it shows the original dates, after trying to sort it gets weird.

Initial dates:

2011-01-01
2011-01-02
2011-10-01

Become:

04-07-2006
03-04-2007
04-07-2007

Format options:

formatoptions:{srcformat:'Y-m-d',newformat:'d-m-Y'}

Desired outcome:

01-01-2011
02-01-2011
01-10-2011

Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
$("#list").jqGrid({
    datatype: 'local',
    colNames:['Dates'],
    colModel :[
      {name:'dat', index:'dat', width:75, formatter:'date',formatoptions:{srcformat:'Y-m-d',newformat:'d-m-Y'}}
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'dat',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'Test',
   shrinkToFit: false,
   width: 600,
   height:300
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
var mydata = [
       {id:'1', dat:"2011-01-01"},
       {id:'2', dat:"2011-01-02"},
       {id:'3', dat:"2011-10-01"}
       ];
for(var i=0;i<=mydata.length;i++)
   jQuery("#list").jqGrid('addRowData',i+1,mydata[i]);
});
</script>

</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>

Problems:

1. The conversion of dates seems broken or am I doing something wrong?

2. Why is conversion applied only after click on the header that initiates sort?

Regards,
Nenad

tucano on formatter: Date Problem

Wed, 17 Nov 2010 13:14:27 +0200

Olá,

Quanto a virgula, realmente me passei nesse detalhe quando repassei o código pra cá (havia uma outra coluna posterior a essa que eu havia removido).

Quanto aos dados de entrada,
eu recebo os dados de um banco MySQL, através do hibernate que me entrega uma lista no formato YYYY-mm-dd.
Ao inverter as ordens de dia, mês e ano, nascem as "mutações" como:

Recebo a data:
2010-10-13

Utilizando o formatter para me ordenar em dd/mm/YYYY e obtenho o resultado:
02/04/2019

Já percebi que se a intensão for apenas alterar o separador(trocar "-" pelo "/") isto funciona normalmente. A saída errônea acontece apenas quando se busca alterar a ordem de dia, mês e ano.

Valeu o retono Tony,
até mais!

Atenciosamente,
Tucano

------------------------------------------------------------------------------------------

Mensagem traduzida do Português-Brasil para o Inglês pelo google translate

Message translated from Portuguese-Brazil to the English translation by google

------------------------------------------------------------------------------------------

Hello,

As for the comma, really me in that detail when I replayed the code over here (there was another column after that I had removed).

As for input data,
i get the data from a MySQL database through hibernate that gives me a list in the format YYYY-mm-dd.
By reversing the orders of the day, month and year are born "mutations" as:

I get the date:
2010-10-13

Using the formatter in order to get dd / mm / YYYY and get the result:

02/04/2019

I just figured that if the intention is to just change the tab (change the "-" "/") it works normally. The erroneous output occurs only when one seeks to change the order of days, months and years.

Thanks for the feedback Tony,
even more!

Regards,
Tucano

tony on formatter: Date Problem

Mon, 08 Nov 2010 12:16:32 +0200

Hello,

I seems I do not express ok. Please send me the data inserted into the grid. It seems that there is the problem.

Alos you have a error in the grid definition - there is not needed comma after the field definition in colModel

Kind Regards

tucano on formatter: Date Problem

Mon, 01 Nov 2010 14:15:44 +0200

Olá Tony,

Estou usando a versão 3.8.1, lançada dia 24/10/2010.

Sigo as referentes configurações default

jQuery.extend(jQuery.jgrid.defaults, {
datatype: "local",
height: 'auto',
rowNum:10,
rowList : [10,20,30],
pager: '#plistagem',
sortorder: "asc",
viewrecords: true,
ignoreCase: true,
autowidth: true,
loadonce:false
});

e as seguintes definições dentro do script

$(document).ready(function(){
  $("#listagem").jqGrid({
   url:'TESTE.listar.logic',
   colNames:['DATA'],
   colModel:[
   {name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:10, align:'center', resizable: false, formatter:'date',fotmatoptions:{srcformat:"Y-m-d",newformt:"d/m/Y"}},
   ],
   sortname: 'TESTANDO_DATA',
   sortorder: 'desc'
  });

  $("#listagem").jqGrid('navGrid',#plistagem,{
   edit:false,
   add:false,
   del:false,
   search:false,
   refresh:false
  },
  // EDIT OPTIONS
  {},
  // ADD OPTIONS
  {},
  // DEL OPTIONS
  {},
  // SEARCH OPTIONS
  {});

  <c:forEach var="teste" items="${listTESTE}" varStatus="row">
   $("#listagem").jqGrid('addRowData',${row.index+1},{
   TESTANDO_DATA:"${teste.data}"
   });
  </c:forEach>

$("#listagem").jqGrid().trigger("reloadGrid");

});

a lista eu recebo da parte de controle através de listTESTE.

fico a disposição para qualquer eventual teste que possa ser efetuado.

Forte abraço!

E agradeço a atenção sempre prestada!

Atenciosamente,
Tucano

------------------------------------------------------------------------------------------

Mensagem traduzida do Português-Brasil para o Inglês pelo google translate

Message translated from Portuguese-Brazil to the English translation by google

------------------------------------------------------------------------------------------

Hello Tony,

I'm using version 3.8.1, released on 24/10/2010.

I follow the default settings regarding

and the following settings within the script

  <c:forEach var="teste" items="${listTESTE}" varStatus="row">
   $("#listagem").jqGrid('addRowData',${row.index+1},{
   TESTANDO_DATA:"${teste.data}"
   });
  </c:forEach>

$("#listagem").jqGrid().trigger("reloadGrid");

});

I get the list of party control through listTESTE.

I am available for any possible test that can be made.

Stay tuned!
And thank you ever paid attention!

Regards,
Tucano

tony on formatter: Date Problem

Sun, 31 Oct 2010 15:28:42 +0200

Hello,

Just tested this and there seems to be not a problem. Also could you please post the entrie grid configuration with a simple data provided?

Which version of jqGrid is used?

Regards

Tony

tucano on formatter: Date Problem

Wed, 27 Oct 2010 21:02:23 +0300

Olá,

o formatter me apresentou problemas para formatação da data, descrevo abaixo situações de testes que eu realizei.

minha intenção é formatar um campo do tipo data em d/m/Y com uma entrada Y-m-d, mas obtenho resultados absurdos

{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:100, formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d/m/Y"}}

exemplo 1:
entrada: 2010-10-13
saída formatada obtida: 02/04/2019

exemplo 2:
entrada: 2010-09-10
saída formatada obtida: 02/03/2016

com finalidade de teste modifiquei a formatação desejada na saída com intenção de apenas visualizar o mês e o ano (m/y), mas obtive resultados mais estranhos ainda

{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:100, formatter:'date', formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"m/Y"}}

exemplo 1:
entrada: 2010-10-13
saída formatada obtida: 06/2177

exemplo 2:
entrada: 2010-09-10
saída formatada obtida: 06/2176

contudo, concluindo os testes percebi que deve ter algum bug neste processo, pois se eu não tentar intervir na ordem de dia, mês e ano da referente data, o processo de formatação funciona devidamente correto (claro, para meu problema inicial não resolve).

{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:100, formatter:'date',formatoptions:{srcformat:"Y-m-d",newformat:"Y/m/d"}}

exemplo 1:
entrada: 2010-10-13
saída formatada obtida: 2010/10/13

exemplo 2:
entrada: 2010-09-10
saída formatada obtida: 2010/09/10

Caso alguém tiver a solução para essa questão, desde já agradeço.

Fico também a disposição para qualquer eventual teste referente a esta questão.

Até mais!

atenciosamente,

Tucano

------------------------------------------------------------------------------------------

Mensagem traduzida do Português-Brasil para o Inglês pelo google translate

Message translated from Portuguese-Brazil to the English translation by google

------------------------------------------------------------------------------------------

Hello,
I had problems the formatter for formatting the date, describe below test situations than I realized.

My intention is to format a field of type date d / m / Y with an entry Ymd, but get absurd results

{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:100, formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"d/m/Y"}}

Example 1:
Login: 2010-10-13
formatted output achieved: 02/04/2019

Example 2:
Login: 2010-09-10
formatted output achieved: 02/03/2016

with the purpose of testing the modified desired output format with the intention of just display month and year (m / y), but getting even weirder results

{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:100, formatter:'date', formatoptions:{srcformat:"Y-m-d",newformat:"m/Y"}}

Example 1:
Login: 2010-10-13
formatted output obtained: 06/2177

Example 2:
Login: 09/10/2010
formatted output obtained: 06/2176

however, ending the testing should have realized that a bug in this process, because if I did not try to intervene in the order of days, months and years regarding the date, the process of properly formatting works correctly (of course, for my initial problem does not solve).

{name:'TESTANDO_DATA',index:'TESTANDO_DATA', width:100, formatter:'date',formatoptions:{srcformat:"Y-m-d",newformat:"Y/m/d"}}

Example 1:
Login: 2010-10-13
formatted output achieved: 2010/10/13

Example 2:
Login: 09/10/2010
formatted output achieved: 2010/09/10

If anyone has a solution to this question, I thank you.

I am also available for any possible test for this question.

Goodbye!

Sincerely,

Tucano