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.

Community
  • 1
  • 1
jabbalesku
  • 73
  • 1
  • 1
  • 3

2 Answers2

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.

eternicode
  • 6,805
  • 4
  • 33
  • 39
  • Already found this solution on http://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepicker. Is there any option to make restricted days "greyed-out", so users can see what dates can select before they try? – jabbalesku Oct 02 '12 at 21:45
  • the disabled days should already be greyed out, if you use the styles included in the repo. – eternicode Oct 02 '12 at 21:48
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/

Harry
  • 1,659
  • 5
  • 19
  • 34
  • You have to set a handler and cancel the selection if it's out of range. – Jared Farrish Sep 29 '12 at 12:44
  • @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 http://jsfiddle.net/katowulf/zNbUT/5/ (you can't click on weekend days). Anyway, thanks for effort. – jabbalesku Sep 29 '12 at 13:09
  • @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. – Harry Sep 29 '12 at 13:43
  • @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. – jabbalesku Sep 29 '12 at 13:54