Timepicker in Jsgrid Just Hour and Minutes

[lobointerestelar]

Hello, I want to create a custom field just for hours and minutes (not date, not date and time) in jsgrid. I'm using the timepicker plugin. I copied the template example from jsgrid documentation and I changed "datepicker" for "timepicker" and It is working a half, more or less, so so. I already put all the necessary sources and links in the html head. Here is my code: ` var MyDateField = function(config) { jsGrid.Field.call(this, config); };

MyDateField.prototype = new jsGrid.Field({

css: "date-field",            // redefine general property 'css'
align: "center",              // redefine general property 'align'

myCustomProperty: "foo",      // custom property

sorter: function(date1, date2) {
    return new Date(date1) - new Date(date2);
},

itemTemplate: function(value) {
    return new Date(value).toDateString();
},

insertTemplate: function(value) {
    return this._insertPicker = $("<input>").timepicker({ defaultDate: new Date() });
},

editTemplate: function(value) {
    return this._editPicker = $("<input>").timepicker().timepicker("setDate", new Date(value));
},

insertValue: function() {
    return this._insertPicker.timepicker("getDate").toISOString();
},

editValue: function() {
    return this._editPicker.timepicker("getDate").toISOString();
}

});

jsGrid.fields.date = MyDateField;

var clients = [
    { "Dag": 1, "Mertid Från": "20:41", "Orsak/Anledning": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
    { "Dag": 2, "Mertid Från": "16:48", "Orsak/Anledning": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
    { "Dag": 3, "Mertid Från": "08:30", "Orsak/Anledning": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
    { "Dag": 4, "Mertid Från": "12:00", "Orsak/Anledning": 1, "Address": "911-5143 Luctus Ave", "Married": true },
    { "Dag": 5, "Mertid Från": "21:50", "Orsak/Anledning": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }

];

var orsak = [
    { Name: "", Id: 0 },
    { Name: "VAB", Id: 1 },
    { Name: "SJUK", Id: 2 },
    { Name: "SEMESTER", Id: 3 },
    { Name: "LEDIG", Id: 4 }
];

$("#jsGrid").jsGrid({
    width: "100%",
    height: "400px",

    inserting: false,
    editing: true,
    sorting: true,
    paging: false,

    data: clients,

    fields: [

        { name: "Dag", type: "number", width: 50, editing: false },
        { name: "Mertid Från", type: "date", width: 150 },
        { name: "Mertid Till", type: "date", width: 150 },            
        { name: "Address", type: "text", width: 200 },
        { name: "Orsak/Anledning", type: "select", items: orsak, valueField: "Id", textField: "Name" },
        { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
        { type: "control", deleteButton: false }
    ]

}); ` Here some images of the app:

As you can see it works partially, When I select Now it shows a aN : aN value. But when I select the time using the scrollbars it show the time. And always it shows the value Invalid date.

What I'm doing wrong? Thank you very much.

[anhhai680]

@lobointerestelar Did you check your custom datetime plugin without jsGrid ? It works normally, right ? I think it show aN : aN value because your custom plugin didn't get value or invalid type of field. Because I saw you defined type of Date for that field but you didn't enter a datetime value on textbox.

[lobointerestelar]

Thank you @anhhai680 for your answer. Yes I checked the timepicker plugin outside jsgrid and it works normally:

I already changed setDate for setTime, and getDate for getTime, so aN : aN is not appearing anymore, this is good, but I don't know why it still appears invalid date and it is not possible to update any field, always comeback to invalid date. :(

[anhhai680]

Hi @lobointerestelar I think you should try change type of field to Text instead Date. I'm not sure it will help you resolve this issue but I think you should try it one time 👍

` { name: "Mertid Från", type: "text", width: 150 }, { name: "Mertid Till", type: "text", width: 150 },

`

[lobointerestelar]

Thanks for the suggestion but if I do that , then there is not sense to define my custom field.

[anhhai680]

Hi @lobointerestelar . I don't think so, you can be easily show the custom plugin via your custom field with litter code changes. Here is little code change as below:

` jsGrid.fields.customdate = MyDateField; //Define other type of name instead use Date

`

After that, you should define new type of column in fields same as:

` { name: "Mertid Från", type: "customdate", width: 150 }, { name: "Mertid Till", type: "customdate", width: 150 },

`

Hope this help for you!

[lobointerestelar]

Hi again @anhhai680 !!, First at all, let me tell you that you have an amazing plugin!!! and thank you very much for your advices!

About my jsgrid, I almost done, there are resting just a couple of issues.

First at all my code: `$(window).load(function(){
var MyTimeField = function(config) { jsGrid.Field.call(this, config); }; MyTimeField.prototype = new jsGrid.Field({ css: "time-field", align: "center",

/ // I do not understand well yet what this part is for sorter: function(date1, date2) { return new Date(date1) - new Date(date2); },/

// puts in the jsgrid the values already existing in the data array itemTemplate: function(value) { return value; }, editTemplate: function(value) { return this._editPicker = $("").timepicker().timepicker("setTime", value); }, editValue: function() { return this._editPicker.timepicker(); } });`

As you see in my case I'm not using insert, just edit. here is the data uploaded in jsgrid

Now I pick for change the time:

changing the time:

Once I update, the change is done but.... you see there is like square surrounding the edited value.

And when I want to edit the same value again, a problem comes, and is not possible to do the edition

I think it has to be something in these lines: editValue: function() { return this._editPicker.timepicker(); } I tried this: return this._editPicker.timepicker("getTime").toISOString(); but it is not working. Do you have any clue?

Thanks a lot again for all your attention and help. Lobo.