7

I am working on some project based on Twitter Bootstrap which using a datepicker from https://github.com/eternicode/bootstrap-datepicker (that is a fork from some other version), but it's missing a very important feature that I need - how to enable only specific date range (eg. from past 15 days till today), so any other date can't be even selected (not clickable).

I found a similar solution here on SO, which disables Saturdays and Sundays: Limit bootstrap-datepicker to weekdays only? http://jsfiddle.net/katowulf/zNbUT/5/ , but I dont know how to adjust it to my needs.

Thanks in advance.

Improve this question
0

2 Answers 2

Reset to default
14

The similar question you linked to ended up using quite a hack, but what you want is a lot simpler -- you're looking for the startDate and endDate options:

$('#dp1').datepicker({ format: 'mm-dd-yyyy', startDate: '-15d', endDate: '+0d' // there's no convenient "right now" notation yet });

These options can take Date objects, timedelta strings (as I did here), or date strings following the given format.

Demo: http://jsfiddle.net/zNbUT/131/

Also, make sure you're using the code from github -- eyecon.ro's copy is the original code, with old bugs and without the newer features.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Already found this solution on stackoverflow.com/questions/11933173/…. Is there any option to make restricted days "greyed-out", so users can see what dates can select before they try?
the disabled days should already be greyed out, if you use the styles included in the repo.
3 
var startDate = new Date(); startDate.setDate(startDate.getDate()-15); var endDate = new Date(); $('#dp1') .datepicker().on('changeDate', function(ev){ if (ev.date.valueOf() > endDate.valueOf()){ alert('The date selected is too far in the future.'); } else if (ev.date.valueOf() < startDate.valueOf()){ alert('The date selected is too far in the past'); } else { alert('fine') }

});

http://jsfiddle.net/XSmx6/14/

Improve this answer

4 Comments

You have to set a handler and cancel the selection if it's out of range.
@George, you didn't understand me. I already done that with alerts, but i need something different. Restricted dates shouldn't be even clickable, like here jsfiddle.net/katowulf/zNbUT/5 (you can't click on weekend days). Anyway, thanks for effort.
@jabbalesku ah fair enough. I know switching may be a hassle but jQuery UI datepicker has this as built-in functionality - perhaps it would be easier to just use that and adjust the colour scheme.
@George - i know that jQuery UI have this functionality, i'm using it already on some other project, but this needs to be Bootstrap based, because it's more flexible on different platforms than clean HTML (responsive layout). Application is intented to use on different platforms (Win,Mac,Lin,iPhone,iPad,Android). Some other people tried to adjust the theme, but that solution have potential problems in future when upgrading.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.