Skip to content

Instantly share code, notes, and snippets.

@najlepsiwebdesigner
Last active October 9, 2018 14:18
Show Gist options
  • Save najlepsiwebdesigner/4970984 to your computer and use it in GitHub Desktop.
Save najlepsiwebdesigner/4970984 to your computer and use it in GitHub Desktop.
Implementation of disabled elements for foundation datepicker project https://github.com/najlepsiwebdesigner/foundation-datepicker/
// implementation of disabled form fields
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').fdatepicker({
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.update(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').fdatepicker({
onRender: function (date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
@karooolis
Copy link

He means that <= and >= should be changed to their actual symbols, now it has been sanitized.

@rockypoint
Copy link

Line 5 mentions an ID. How would the code change if a document had multiple datepickers with a class, but no IDs? (This setup works fine until there comes the time to disable past dates.) Thank you.

@najlepsiwebdesigner
Copy link
Author

gist should be fixed now, for examples please check example file in datepicker repository:
http://github.com/najlepsiwebdesigner/foundation-datepicker

@j127
Copy link

j127 commented Mar 3, 2018

Does this example from the docs work with the latest version of Foundation? I'm getting an error, because date is null.

datepicker

@onionstand
Copy link

onionstand commented Oct 9, 2018

Change this:
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.update(newDate);
}
checkin.hide();

To this:
if(ev.date){
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.update(newDate);
checkin.hide();
}
}

https://gist.github.com/onionstand/b006d424c220c412c7c6fae809d2f67a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment