Jquery ui datepickerは3日しか間隔がないように日付範囲を設定する.
2798 ワード
バックグラウンドのデータは比較的に大きくて、普通は千万級と百万級の関連で、クエリーはとても遅いので、後でもっとフィルタ条件を加えたいと思って、その中の時間は必ず選択しなければなりません.
製品はカレンダーコントロールに3日以内のクエリーしかできないようにし、カレンダーコントロールはこのような要求をし、前のカレンダーコントロールが2013年9月1日を選んだ場合
後のカレンダーコントロールは2013年9月1日、2013年9月2日、2013年9月3日しか選択できません.他のものはすべて選択できません.彼にヒントを与えたいのですが、リーダーはどうしてもそうしなければなりません.
本当にリーダーの一言で、コード工は何年も苦労していますね...まあ、jquery uiのカレンダーコントロールはこの機能を提供しています.強いです.
まずは公式サイトへ(http://jqueryui.com/download/#!version=1.9.2)jquery uiパッケージをダウンロードして1.92バージョンを使っています
ダウンロードしたら
導入
製品はカレンダーコントロールに3日以内のクエリーしかできないようにし、カレンダーコントロールはこのような要求をし、前のカレンダーコントロールが2013年9月1日を選んだ場合
後のカレンダーコントロールは2013年9月1日、2013年9月2日、2013年9月3日しか選択できません.他のものはすべて選択できません.彼にヒントを与えたいのですが、リーダーはどうしてもそうしなければなりません.
本当にリーダーの一言で、コード工は何年も苦労していますね...まあ、jquery uiのカレンダーコントロールはこの機能を提供しています.強いです.
まずは公式サイトへ(http://jqueryui.com/download/#!version=1.9.2)jquery uiパッケージをダウンロードして1.92バージョンを使っています
ダウンロードしたら
導入
<script type="text/javascript">
$(function(){
var dates = $("#startDate,#endDate");
var option;
var targetDate;
var optionEnd;
var targetDateEnd;
dates.datepicker({
showButtonPanel:false,
onSelect: function(selectedDate){
if(this.id == "startDate"){
// (startDate) (endDate)
option = "minDate"; //
var selectedTime = getTimeByDateStr(selectedDate);
var minTime = selectedTime;
//
targetDate = new Date(minTime);
//
optionEnd = "maxDate";
// 2 2*24*60*60*1000
targetDateEnd = new Date(minTime+2*24*60*60*1000);
}else{
// (endDate) (startDate)
option = "maxDate"; //
var selectedTime = getTimeByDateStr(selectedDate);
var maxTime = selectedTime;
targetDate = new Date(maxTime);
//
optionEnd = "minDate";
targetDateEnd = new Date(maxTime-2*24*60*60*1000);
}
dates.not(this).datepicker("option", option, targetDate);
dates.not(this).datepicker("option", optionEnd, targetDateEnd);
}
});
</script>
<input type="text" value="" name="<SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">endDate</SPAN><SPAN style="FONT-FAMILY: Arial, Helvetica, sans-serif">" readonly="true" id="endDate" title=" 3 "/></SPAN>