DateTime picker preserve date on selecting hours

kalman.albert@promax.ro

Hello there,

Is there a way to preserve date part (YYYY-MM-DD) while the format used is js 'HH:mm' or js 'DD HH:mm' ?
my current field settings are:

{
    label: "Hour:",
    name: "Data",
    type: "datetime",
    format: 'HH:mm',
    wireFormat:'YYYY-MM-DDTHH:mm:ss',
    //def:  function () { return new Date(); },
    fieldInfo: '24 hour clock format'
}, 

If the date string in DataTable is 2019-04-20T14:00:00 and my Data field is set up to
format: 'HH:mm'
after I select another hour (let say 7PM), it is submitted 2022-04-27T19:00:00 (the date part is changed).

My expectancy is to preserve the date part on selecting another hour (2019-04-20T19:00:00)...

Is there a way to achieve this?

Thank You

Link to test case:
[http://live.datatables.net/lotuwemu/4/edit]

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

rf1234

I assume that in reality your data table is ajax sourced using Editor because that is what wireFormat is being used for (among other things).

I have never found it handy to have date and time in one Editor field. And as I see, you don't want that either. In the first case you only want to edit hour and minute, in the second case day, hour and minute.

What you can do is just send the components edited to the server and put them together server side so your date remains unchanged.

I have one database field (dateTime).
I read the same field from the server as
- a date and
- time (as an alias)

When a changed time is returned from the server it is being put together with the unchanged date and the dataTime value is updated in the database and the data table.

This code is doing it server side (the formatters are proprietary; you'll have your own anyway).

Field::inst( 'rfp.bidtime_end' )
        ->validator( function ( $val, $data, $opts ) {
            return validatorBidtimeEnd($data['rfp'], $val);
        } )
        ->getFormatter( function ( $val, $data, $opts ) {
            return getFormatterDate($val);                     
        } )
        ->setFormatter( function ( $val, $data, $opts ) {
            return setFormatterCombineDateTime($val, $data['bidEndTime']);
        } ),
Field::inst( 'rfp.bidtime_end AS bidEndTime' )->set( false )
        ->getFormatter( function ( $val, $data, $opts ) {
            return getFormatterTime($val);                     
        } ),

The alias "time" field cannot be set. So validation and data base update are done with the original dataTime field only.

kalman.albert@promax.ro

Thank you for your response rf1234

Yes, I am using ajax (and Coldfusion for server side).

For my case, I just need to be capable of changing the hour of date because the date itself will be by default (from the filter input).

As if I am forced to use two editor fields, than for this case the Datetime editor is pointless.

My Solution is:
- add Time column at the server side with the value of current selected hour (as you pointed out)
- add Time column at client side
- make Data column invisible and Data field of type "display"
- make Time field

{
    label: "Time:",
    name: "Time"
}, 
{
    label: "Data:",
    name: "Data",
    "type": "display"
}, 

• make Time field dependent of Data field

editor.dependent('Time', function(val, data, callback) {    
    var v = ($.isNumeric(val) ? parseInt(val) : null);

    if ( v == null ||  v < 0 || v > 23 ){

        console.error("Time error"); //need more attention
        return false;

    }

    var dayStr = editor.field('Data').val();

    if (dayStr.length){
        
        var myDate = moment(dayStr).hours(v).format('YYYY-MM-DDTHH:mm:ss');
        editor.field('Data').val(myDate);

    }

    callback({});

});  

So on submit (server side) I will verify only Data field.

My client side editing need to be intuitive and fast.

I like Datatables datetime picker because is intuitive and easy to use (from user point of view) and easy to change years or months.

With Eonas Dan-s datetimepicker I worked until now, but the feedback from users was not so good when changing Years is needed (to many mouse click's).

Another intuitive and fast and very easy to use control is flatpickr (is working well in this particular case too), but the Datatable.editor plugin found in this forum uses only the selecting date part of it. I changed it to support all the flatpickr's options but there is another issue: when tried to change the time, the Datatable inline editor closes. So it need's some more attention.

rf1234

Yep, not easy! Thanks for sharing your solution! Same here: I always need a work around instantly