2012-09-29 8 views
7

私はhttps://github.com/eternicode/bootstrap-datepickerのdatepickerを使用しているTwitter Bootstrapに基づいたプロジェクトに取り組んでいますが、それは必要な機能が不足しています - 特定の日付範囲(たとえば過去15日から今日まで)のみを有効にする方法。他の日付も選択できません(クリック可能ではありません)。Twitter Bootstrap datepicker:特定のdaterangeのみを有効にする方法

私は土曜日と日曜日を無効にSO上、ここで同様のソリューション、見つかった: Limit bootstrap-datepicker to weekdays only? http://jsfiddle.net/katowulf/zNbUT/5/を、私は私のニーズに合わせて調整する方法を知りません。

ありがとうございます。

答えて

14

あなたはかなりハックを使用して終了、しかし、あなたが望むことはずっと簡単であるにリンクされている同様の質問 - あなたはstartDateendDateオプションを探しています:

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

これらのオプションは、Date個のオブジェクト、timedelta文字列(ここで行ったように)、または指定されたformatに続く日付文字列を取ることができます。

デモ:http://jsfiddle.net/zNbUT/131/

また、あなたはgithubのからのコードを使用していることを確認してください - eyecon.roのコピーは古いバグとし、新しい機能を使用せず、元のコードです。

+0

このソリューションは既にhttp://stackoverflow.com/questions/11933173/how-to-restrict-the-selectable-date-ranges-in-bootstrap-datepickerにあります。制限日を「グレー表示」にするオプションはありますか?そのため、ユーザーは試用する前に選択できる日付を確認できますか? – jabbalesku

+0

レポに含まれているスタイルを使用すると、無効日はすでにグレー表示になっています。 – eternicode

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/

+0

作業しないでください。ここで試してみました:http://jsfiddle.net/XSmx6/1/ – jabbalesku

+0

ハンドラを設定し、範囲外の場合は選択をキャンセルする必要があります。 –

+0

@jabbalesku私は更新してjsfiddleを追加しました – Harry

関連する問題