Update minDate and maxDate for datetimepicker based on field's value

picktrace

I am using a datatable with the editor to inline edit a datetime column.

I'm using the bootstrap datetimepicker plugin 2.

Each row in the table has 2 columns a work-start and work-end, which can be edited via the eonasdan datetimepicker.

The table displays all the records that have a work-start date on the selected date, however the end date can span to another date. (Think tracking a persons time, they can start working at 8pm and work until 4am the next day)

At the top of the page there is a datepicker that when the date is changed the table reloads with the records for that date. That said, I need to be able to change the minDate and maxDate properties of the datetimepicker to prevent a user from selecting a different work-start date, as well as to limit the work-end to being either the same date or up to 1 day later.

    fields: [{
        label: 'Work Start',
        name: 'timecards.work_start',
        type:  'datetime',
        format: 'MM/DD/YYYY hh:mm a',
        opts: {
            format: 'MM/DD/YYYY hh:mm a',
            sideBySide: true,
            allowInputToggle: true,
            minDate: $('#selectedDateTimePicker').data('DateTimePicker').date().toDate(),
            maxDate: $('#selectedDateTimePicker').data('DateTimePicker').date().endOf('day').toDate(),
        }
    },{
        label: 'Work End',
        name: 'timecards.work_end',
        type:  'datetime',
        format: 'MM/DD/YYYY hh:mm a',
        opts: {
            format: 'MM/DD/YYYY hh:mm a',
            sideBySide: true,
            allowInputToggle: true,
            minDate: $('#selectedDateTimePicker').data('DateTimePicker').date().toDate(),
            maxDate: $('#selectedDateTimePicker').data('DateTimePicker').date().add(1, 'days').endOf('day').toDate(),
        }
    },{

this works however if I change the date via the datepicker at the top of the page, the inlined datetime pickers don't change their min and max dates. Is there a way to update them?

I've tried:

$('input', editor.field('timecards.work_start').node()).datetimepicker().minDate(newDate);

which I found via another forum post however this just creates a new datetimepicker and when I select the work-start field there are 2 pickers over each other.

Thank you!

allan

Hi,

You can use the field().inst() method that the plug-in exposes to access the Bootstrap Datetime picker instance:

editor.field( 'timecards.work_end' ).inst()

and then use its API to modify it as required.

Allan

picktrace

Awesome works perfectly, thank you! I knew there must have been an easy way to do it!