Skip to content

Instantly share code, notes, and snippets.

@najlepsiwebdesigner
Last active October 9, 2018 14:18
Show Gist options
  • Select an option

  • Save najlepsiwebdesigner/4970984 to your computer and use it in GitHub Desktop.

Select an option

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');
@Oke-Anyanwu
Copy link
Copy Markdown

@omulebadjoker, your comment is not clear: what has to be replaced. And did you mean "on line 7 ..." instead of "from line 7 ..."?

@karooolis
Copy link
Copy Markdown

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

@rockypoint
Copy link
Copy Markdown

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
Copy Markdown
Author

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

@j127
Copy link
Copy Markdown

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
Copy Markdown

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