Jsgrid: how to format a date field?

Created on 15 Sep 2016  路  3Comments  路  Source: tabalinas/jsgrid

from a C# datetime value to jsgrid field value, format of date is like : 2016-09-15T11:34:33.6567475+02:00
how can i set date field format ?

invalid

Most helpful comment

MyDateField.prototype = new jsGrid.Field({
                sorter: function (date1, date2) {
                    return new Date(date1) - new Date(date2);
                },

                itemTemplate: function (value) {
                    // return new Date(value).toISOString();
                    return formatDate(new Date(value));
                },

                insertTemplate: function (value) {
                    return this._insertPicker = $("<input>").datepicker({defaultDate: new Date(),dateFormat: "yy-mm-dd"});

                },

                editTemplate: function (value) {
                    return this._editPicker = $("<input>").datepicker({ dateFormat: "yy-mm-dd" }).datepicker("setDate", new Date(value));

                },

                insertValue: function () {
                    var insertValue = this._insertPicker.datepicker("getDate");
                    if (insertValue !== null && insertValue !== 'undefined') {
                        return formatDate(this._insertPicker.datepicker("getDate"));//.toISOString();
                    }
                    return null;

                },

                editValue: function () {
                    var editValue = this._editPicker.datepicker("getDate");
                    if (editValue !== null && editValue !== 'undefined') {
                        return formatDate(this._editPicker.datepicker("getDate"));//.toISOString();
                    }
                    return null;
                }
            });

    function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

All 3 comments

Important point: js-grid doesn't have date field. It's just an example in docs.
Since this date field is your custom field, you are free to do formatting yourself. Search for the answer how to set C# datetime to jQuery datepicker, e.g. this one http://stackoverflow.com/questions/24184073/working-with-datetime-date-picker

@tabalinas thanks a lot.

MyDateField.prototype = new jsGrid.Field({
                sorter: function (date1, date2) {
                    return new Date(date1) - new Date(date2);
                },

                itemTemplate: function (value) {
                    // return new Date(value).toISOString();
                    return formatDate(new Date(value));
                },

                insertTemplate: function (value) {
                    return this._insertPicker = $("<input>").datepicker({defaultDate: new Date(),dateFormat: "yy-mm-dd"});

                },

                editTemplate: function (value) {
                    return this._editPicker = $("<input>").datepicker({ dateFormat: "yy-mm-dd" }).datepicker("setDate", new Date(value));

                },

                insertValue: function () {
                    var insertValue = this._insertPicker.datepicker("getDate");
                    if (insertValue !== null && insertValue !== 'undefined') {
                        return formatDate(this._insertPicker.datepicker("getDate"));//.toISOString();
                    }
                    return null;

                },

                editValue: function () {
                    var editValue = this._editPicker.datepicker("getDate");
                    if (editValue !== null && editValue !== 'undefined') {
                        return formatDate(this._editPicker.datepicker("getDate"));//.toISOString();
                    }
                    return null;
                }
            });

    function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Julian-B90 picture Julian-B90  路  4Comments

eliasuardi picture eliasuardi  路  3Comments

GlennSeymon picture GlennSeymon  路  5Comments

venkatesh333 picture venkatesh333  路  4Comments

julmot picture julmot  路  3Comments