Mobiscroll Time change Validation Start and EndTime

Question

I need to do Validation for both Start Time And End Time, if start time is greater then end Time Throw and error.

How Can i achieve this. Which Events do i need to use to get the validation done onselect, onclose?? Please Help me out

Thanks

Answer 1

You can do this using onSelect event making changes to the mobiscroll.

Here is an example i tried.. you might find useful

    onSelect: function (dateText, inst) {
        var newMinDate, newMaxDate;
        endDate = new Date(dateText);
        var newEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 5);
        $endCal.mobiscroll('setDate', newEndDate);
        newMinDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1),
        $endCal.mobiscroll('option', {
            minDate: newMinDate
        });
    }

https://jsfiddle.net/sarvesh310/742Lqagk/2/

Answer 2

You can dynamically set the minDate and maxDate options in the onSelect event, e.g.:

$('#end_time').scroller('option', 'minDate', $('#start_time').scroller('getDate'));

A working example (does not allow to select a start date > end date):

http://jsfiddle.net/dioslaska/2MVv6/1/

This works with date and datetimepickers as well.