EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: neos on April 05, 2016, 08:47:59 PM



Title: Date Format in datagrid
Post by: neos on April 05, 2016, 08:47:59 PM
Dear All,

How to change format date in datagrid. Default yyyy-mm-dd. I change to dd-mm-yyy

Regards,

Neos


Title: Re: Date Format in datagrid
Post by: jarry on April 06, 2016, 09:28:11 AM
You have to define the 'formatter' and 'parser' functions to custom the date format.


Title: Re: Date Format in datagrid
Post by: eagleeye on April 06, 2016, 12:35:50 PM
Code:
<th field="fecha_recep_doc"  width="120"  align="center"  editor="{type:'datetimebox',options:{editable:true,readonly:false,currentText:'Hoy',closeText:'Cerrar',okText:'Aceptar',showSeconds:false}}" >Recepcion Docum.</th>

Use this extend for example:

Code:
//Extension del datetimebox para ser agregado al DataGrid
$.extend($.fn.datagrid.defaults.editors, {
    datetimebox: {
        init: function (container, options) {
            var input = $('<input>').appendTo(container);
            input.datetimebox(options);
            return input;
        },
        destroy: function (target) {
            $(target).datetimebox('destroy');
        },
        getValue: function (target) {
            return $(target).datetimebox('getValue');
        },
        setValue: function (target, value) {
            $(target).datetimebox('setValue', String(value));
        },
        resize: function (target, width) {
            $(target).datetimebox('resize', width);
        }
    }
})

Code:
$.extend($.fn.datetimebox.defaults, {
    formatter: function (date) {
        //Fecha       
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        //Hora
        var h = date.getHours();
        var M = date.getMinutes();
        var s = date.getSeconds();
        var ampm = h >= 12 ? 'PM' : 'AM';
        /*
         h = h > 12 ? h - 12 : h;
         h = h % 12;
         h = h ? h : 12;
         */
        function formatNumber(value) {
            return (value < 10 ? '0' : '') + value;
        }
        var separator = $(this).datetimebox('spinner').timespinner('options').separator;
        //Construye la cadena para el formateo de la fecha, se elimina el formateo de fecha default
        var r = $.fn.datebox.defaults.formatter(date) + ' ' + formatNumber(h) + separator + formatNumber(M);
        if ($(this).datetimebox('options').showSeconds) {
            r += separator + formatNumber(s);
        }
        //r += ' ' + ampm;       
        return r;
    },
    parser: function (s) {
        if ($.trim(s) == '') {
            return new Date();
        }
        var dt = s.split(' ');
        var d = $.fn.datebox.defaults.parser(dt[0]);
        if (dt.length < 2) {
            return d;
        }
        var separator = $(this).datetimebox('spinner').timespinner('options').separator;
        var tt = dt[1].split(separator);
        var hour = parseInt(tt[0], 10) || 0;
        var minute = parseInt(tt[1], 10) || 0;
        var second = parseInt(tt[2], 10) || 0;
        var ampm = dt[2];
        if (ampm == 'pm') {
            hour += 12;
        }
        return new Date(d.getFullYear(), d.getMonth(), d.getDate(), hour, minute, second);
    }
});