Options on DateTime

aetsfgcu

I am trying to link two datetime fields together so that the Start Date can not be more than the End Date and vice versa.

I can't seem to find the list of options available for the DateTime field built into Editor.

My other option is to use Bootstrap DateTimePicker (2): I have added the JS and CSS but Editor does not seem to want to use this version.

Perhaps I am confused how both work as I am fairly new to Editor.

Any help would be appreciated.

rf1234

I think this is usually done at the back end using validators. Here is the link for PHP:
https://editor.datatables.net/manual/php/validation

For example I use my own validator here:

Field::inst( 'fixed.end_date' )
->validator( function ( $val, $data, $opts ) {                        
    return validatorEndDate($data['fixed'], $val);
} )

function validatorEndDate (&$data, &$val) {
    $endDate = setFormatterDate($val);
    $startDate = setFormatterDate($data['start_date']); 
    if ($endDate <= $startDate) {
        if ($_SESSION['lang'] === 'de') {   
            return 'Das End-Datum muss größer als das Start-Datum sein!';
        } else {
            return 'The end date needs to be greater than the start date!';
        }
    }
   return true;
}

function setFormatterDate($val = null) {  // by value to do modifications
    //Dates in the m/d/y or d-m-y formats are disambiguated by looking at the separator between the various components: 
    //if the separator is a slash (/), then the American m/d/y is assumed; 
    //whereas if the separator is a dash (-) or a dot (.), then the European d-m-y format is assumed. 
    //If, however, the year is given in a two digit format and the separator is a dash (-, the date string is parsed as y-m-d.
    if ( is_null($val) ) {
        return $val;
    }
    if ( $val <= '') {
        return null;
    }
    $val = str_replace(
        ['Januar ', 'Februar ', 'März ', 'April ', 'Mai ', 'Juni ', 'Juli ',
            'August ', 'September ', 'Oktober ', 'November ', 'Dezember '],
        ['January ', 'February ', 'March ', 'April ', 'May ', 'June ', 'July ',
            'August ', 'September ', 'October ', 'November ', 'December '],
        $val);
    $val = str_replace('/', '-', $val);
    $val = str_replace('.', '-', $val);
    
    $dateTime = new DateTime($val);    
    return $dateTime->format('Y-m-d H:i:s');
}

allan

The methods for the datetime field are in its documentation (anchor link). In this case you would want to use editor.field(...).minDate(...).

You should use field().input() to get the input element so you can assign a change event listener to the state date field.

Allan

aetsfgcu

Thank you for pointing me in the right direction Allan. This is working in the Editor. I will also be using back end validation as well thanks to rf1234's suggestion.

editor.field('date1').input().on('change', function () {
            editor.field('date2').minDate(new Date(editor.field('date1').input().val()));
        });

editor.field('date2').input().on('change', function () {
            editor.field('date1').maxDate(new Date(editor.field('date2').input().val()));
        });

I am also trying to use the datetime outside the Editor. I create a new instance of the DateTime:

new $.fn.dataTable.Editor.DateTime( '#myInput' , options );

However when I try to use an on change with the input, it never fires.

How do I access the DateTime outside of the dataTable in order to fire the on change event?

Thanks for your time.

allan

I am also trying to use the datetime outside the Editor. I create a new instance of the DateTime:

That's not something that is currently documented or indeed directly supported. It was / is my intention to make that available in future, but at the moment it might be hit and miss as it isn't something I have tested.

You should be able to just use $('#myInput').on('change', ... ); like you would with any other input element.

Allan

aetsfgcu

Hey Allan,

I am using the $('#myInput').on('change', ... ); but this is what is not firing.

The only time that it fires is when I manually change the box, not on selection of a date.

I need to be able to check the on change events in order to establish start and end dates that supplement each other (min and max dates) as well as tell the DataTable that I am passing in new filter requirements for those start and end dates (server side processing).

Thank you.

allan

Ah! I've just looked at the Editor source and this is what it does for the field type:

        conf._picker = new Editor.DateTime( conf._input, $.extend( {
            format: conf.format, // can be undefined
            i18n: this.i18n.datetime,
            onChange: function () {
                _triggerChange( conf._input );
            }
        }, conf.opts ) );

So you need to use the onChange callback. It doesn't trigger change automatically (I remember now) to be like how input elements work.

Allan

aetsfgcu

Thank you Allan,

That worked perfectly.

new $.fn.dataTable.Editor.DateTime($('#myInput'), {
            format: "MM/DD/YYYY",
            onChange: function () {
                alert('test');
            }
        });