amsul / pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
http://amsul.ca/pickadate.js
MIT License
7.7k stars 1.01k forks source link

Two timepickers - set min in second from value in first #938

Open flam3srock opened 7 years ago

flam3srock commented 7 years ago

I have two timepickers, start and finish. How would I go about setting the minimum time of finish to whatever was selected in the first + 15min? I'm guessing this has something to do with onset but Im not sure where to begin It would be nice to have the reverse true - if you set a finish_time the max of start time cannot be more than the value of finish - 15min. Thanks in advance!

` $('#start_time').pickatime({ //format: 'h:i A', // Displayed and application format formatSubmit: 'HH:i:00', hiddenName: true, interval: 15, // Interval between values (in minutes) min: '3:00 AM', // Starting value max: '6:00 PM', // Ending value });

$('#finish_time').pickatime({
    //format: 'h:i A',          // Displayed and application format
    formatSubmit: 'HH:i:00',
    hiddenName: true,
    interval: 15,               // Interval between values (in minutes)
    min: '3:00 AM',         // Starting value
    max: '6:00 PM'              // Ending value

});`
flam3srock commented 7 years ago

Found most of the answer here, the only thing missing is how to add 15 minutes to the finish min or subtract 15 from the start max? https://github.com/amsul/pickadate.js/issues/828

`var from_$input = $('#input_from').pickatime(), frompicker = from$input.pickatime('picker')

var to_$input = $('#input_to').pickatime({ formatLabel: function( timeObject ) { var minObject = this.get( 'min' ), hours = timeObject.hour - minObject.hour, mins = ( timeObject.mins - minObject.mins ) / 60, pluralize = function( number, word ) { return number + ' ' + ( number === 1 ? word : word + 's' ) } return 'H:i <!i>a</!i> <sm!all>(' + pluralize( hours + mins, '!hour' ) + ')</sm!all>' } }), topicker = to$input.pickatime('picker')

// Check if there’s a “from” or “to” time to start with. if ( from_picker.get('value') ) { to_picker.set('min', from_picker.get('select')) } if ( to_picker.get('value') ) { from_picker.set('max', to_picker.get('select') ) }

// When something is selected, update the “from” and “to” limits. from_picker.on('set', function(event) { if ( event.select ) { to_picker.set('min', from_picker.get('select')) } }) to_picker.on('set', function(event) { if ( event.select ) { from_picker.set('max', to_picker.get('select')) } })`

ateequrrahman97 commented 2 years ago

var startDate = new Date(); startDate.setDate(startDate.getDate() + 10); let datepicker = $('.datepicker').pickadate({ format: 'mm-dd-yyyy', min: startDate, // max: new Date(), selectMonths: true, selectYears: true, highlight: '01-01-2000', editable: true, selectYears: 70, }); let endDatepicker = $('.enddatepicker').pickadate({ format: 'mm-dd-yyyy', min: startDate, // max: new Date(), selectMonths: true, selectYears: true, highlight: '01-01-2000', editable: true, selectYears: 70, }); $('.datepicker').on('change', function() { let date = new Date($(this).val()); let nextDay = new Date(date); nextDay.setDate(date.getDate() + 1); endDatepicker.pickadate('picker').clear().set('min', nextDay); });