Set minimum date & time to "now"

[gregegan]

I am trying to figure out the approach for setting the minimum date/time to "now". If today's date is selected, I cannot choose any time before this moment.

I see I can handle startDate in the datepicker initialization. But I am trying to figure out how to limit the startTime if the date selected = today.

It looks like I need to use the setMinTime function to determine the date? Although It seems after I choose the the initial date, I am getting back the dateObj as null.

        const timepickerOptions = {
            showDuration: true,
            timeFormat: 'g:ia'
        };

        const datepickerOptions = {
            maxViewMode: 0,
            orientation: 'top auto',
            todayHighlight: true,
            format: 'm/d/yyyy',
            autoclose: true,
            startDate: moment(new Date()).format('MM/DD/YYYY')
        };

        window.$(this.refs.basicExample).find('.date').datepicker(datepickerOptions);
        window.$(this.refs.basicExample).find('.time').timepicker(timepickerOptions);
        window.$(this.refs.basicExample).datepair({
            setMinTime($el, dateObj) {
                console.log($el, dateObj);
                // $el.timepicker('option', 'minTime', dateObj);
            }
        });

I was also thinking of an approach like this... which seems to work. Although there is a bug if you set the date to tomorrow, and the time before the current time. And then change the date back to "today".

window.$(this.refs.dateStart).on('changeDate', (e) => {
            const now = moment();
            const startDate = moment(`${e.date}`);

            if (startDate.isSameOrBefore(now)) {
                window.$(this.refs.timeStart).timepicker('option', 'minTime', new Date());
                window.$(this.refs.timeEnd).timepicker('option', 'minTime', 0);
            } else {
                window.$(this.refs.timeStart).timepicker('option', 'minTime', 0);
                window.$(this.refs.timeEnd).timepicker('option', 'minTime', 0);
            }
        });

[jonthornton]

One possible solution would be to avoid minTime entirely and just provide an error if the user selects a time that's too early.

$('#startTime, #startDate').on('change', function() {
  var startDate = $('#startDate').datepicker('getDate');
  var start = $('#startTime').timepicker('getTime', startDate);
  var now = new Date();
  if (start < now) {
     // show an error to the user
  }
});

[gregegan]

Thanks @jonthornton. I think either of these should address my concerns. I guess the advantage of your solution is that "now" is constantly changing. Rather then sitting on a page for a half hour and it listing a time in the past.

I am implementing this plugin into a React view... things are going well so far! First time implementing a jquery plugin into a react component.

[jonthornton]

jquery AND react?!

I'm kidding :) Good luck with your project!

[gregegan]

haha. you have the best solution available for date ranges, with accessible/i18n date time pickers! Trust me I would prefer not to be doing it this way, but have to do it. 😱