CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BillNathan
BillNathan

Reputation: 609

Amsul DatePicker - How do you disable dates on the calendar?

I have just installed an amsul datepicker, and I'm unable to figure out how do you disable dates? For example, if I want the calendar to show today's date and future dates until 1 year. E.g: 2nd May 2019 -> 2nd May 2020. I want to disable all previous dates.

Also, I'm trying to build a From -> to date picker, so for example if a user selects 3rd May 2019 on the from input he/she should only be allowed to select dates from 3rd May 2019 till 3rd May 2020 in the "to" input.

Thanks.

Amsul: https://amsul.ca/pickadate.js/

// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";

$('.datepickerCheckin').pickadate({
onSet: function() {
if (!initialDateSet) {
  $('.timepickerCheckin').click();
} else {
  var tempString = dPicker.get();
  var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
  $('.datepickerCheckin').val(tempString + " " + tempString2);
  backup = $('.datepickerCheckin').val();
}

},
onOpen: function() {
dPicker = this;
if (initialDateSet) {
  var index = $('.datepickerCheckin').val().indexOf("at");
  if ($('.datepickerCheckin')[0].selectionStart > index) {
    dPicker.close(true);
    $('.timepickerCheckin').click();
  }

}
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});

// TimePicker
$('.timepickerCheckin').pickatime({
onSet: function() {
var tempString;
if (!initialDateSet) {
  tempString = $('.datepickerCheckin').val() + " at " + 
$('.timepickerCheckin').val();
  $('.datepickerCheckin').val(tempString);
  backup = tempString;
  initialDateSet = true;
} else {
  tempString = backup.substr(0, backup.indexOf("at"));
  $('.datepickerCheckin').val(tempString + "at " + 
$('.timepickerCheckin').val());
  backup = $('.datepickerCheckin').val();
}
},
clear: '',
format: 'HH:i'
})

// DatePicker Checkout
$('.datepickerCheckout').pickadate({
onSet: function() {
$('.timepickerCheckout').click();
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});

// TimePicker Checkout
$('.timepickerCheckout').pickatime({
onSet: function() {
var tempString = $('.datepickerCheckout').val() + " at " + 
$('.timepickerCheckout').val();
$('.datepickerCheckout').val(tempString);
},
clear: '',
format: 'HH:i'
   })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<label>from</label>
<input type="text" class="datepickerCheckin">
<label>to</label>
<input type="text" class="datepickerCheckout">

Upvotes: 0

Views: 183

Answers (1)

GifCo
GifCo

Reputation: 1363

As per the documentation you provided you can set a date range with min max options. ie.

$('.datepicker').pickadate({
    weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    min: new Date(2015,3,20),
    max: new Date(2015,7,14)
 })

Upvotes: 1

Related Questions