jQuery UI Datepicker控制轉換爲高亮日期

Question

我使用jQuery UI Datepicker，並且我想添加一些函數。

只要按住shift鍵並選擇一些日期並選擇結束日期，所以按住shift鍵移動到hightlight日期，所以把日期字符串設置爲<input>，那就是！

var input = $('input.date'); 
var date_val = input.val(); 
var dates = date_val ? date_val.split(',') : []; 


var postDateShiftHeld = false; 
var DateFrom; 
var DateTo; 
$(document).bind('keyup keydown', function (e) { 
    postDateShiftHeld = e.shiftKey 
}).bind('keyup', function (e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code === 16) { 
     if (DateFrom && DateTo) { 
      console.log(DateFrom + " -> " + DateTo); 
     } else { 
      DateFrom = false; 
      DateTo = false; 
     } 

    } 
}); 





function add_date(date) { 
    if ($.inArray(date, dates) < 0) { 
     dates.push(date); 
    } 
} 

function remove_date(i) { 
    dates.splice(i, 1); 
} 

function check_date(date) { 
    var date = date.split("/"); 
    var date = date[1] + "/" + date[0] + "/" + date[2]; 
    var i = $.inArray(date, dates); 
    if (i >= 0) remove_date(i); 
    else add_date(date); 
} 

$("#datepicker").datepicker({ 
    onSelect: function (date) { 
     if (postDateShiftHeld) { 
      if (!DateFrom) { 
       DateFrom = date; 
      } else { 
       DateTo = date; 
      } 
      return false; 

     } 
     check_date(date); 
    }, 
    beforeShowDay: function (date) { 
     for (i = 0; i < dates.length; i++) { 
      var post_date = dates[i].split("/"); 
      if (date.getDate() == post_date[0] && date.getMonth() == post_date[1] - 1 && date.getFullYear() == post_date[2]) { 
       return [true, "ui-state-active"]; 
      } 
     } 
     input.val(dates + ""); 
     return [true, '']; 
    } 
}); 

我走到現在這一步，並取得日期from和to，但我不知道如何from hightlight日期to在jQuery UI的日期選擇器

任何人都可以幫我嗎？我現在已經不知道:(

演示：http://jsfiddle.net/SXJ99/2

Answer 1

我完成：

var input = $('input.date'); 
var dates; 
var ShiftHeld = false; 
var DateFrom; 
var DateTo; 


$(document).bind('keyup keydown', function (e) { 
    ShiftHeld = e.shiftKey 
}).bind('keyup', function (e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code === 16 && DateFrom && DateTo) { 
     addMultipleDates(DateFrom, DateTo); 
    } 
    if (code === 16) { 
     DateFrom = false; 
     DateTo = false; 
    } 
}); 





function add_date(date) { 
    if ($.inArray(date, dates) < 0) { 
     dates.push(date); 
    } 
} 

function remove_date(i) { 
    dates.splice(i, 1); 
} 

function check_date(date) { 
    var date = date.split("/"); 
    var date = date[1] + "/" + date[0] + "/" + date[2]; 
    var i = $.inArray(date, dates); 
    if (i >= 0) remove_date(i); 
    else add_date(date); 
} 

datepicker(); 

function datepicker() { 
    var dates_value = input.val(); 
    dates = dates_value ? dates_value.split(',') : []; 
    $("#datepicker").datepicker({ 
     onSelect: function (date) { 
      if(ShiftHeld) { 
       if (!DateFrom) { 
        DateFrom = date; 
       } else { 
        DateTo = date; 
       } 
       return false; 

      } 
      check_date(date); 
     }, 
     beforeShowDay: function (date) { 
      for (i = 0; i < dates.length; i++) { 
       var post_date = dates[i].split("/"); 
       if (date.getDate() == post_date[0] && date.getMonth() == post_date[1] - 1 && date.getFullYear() == post_date[2]) { 
        return [true, "ui-state-active"]; 
       } 
      } 
      input.val(dates + ""); 
      return [true, '']; 
     } 
    }); 
} 


function addMultipleDates(a, b) { 
    var multi_dates = list_dates(a, b); 
    $.each(multi_dates, function (i, date) { 

     if ($.inArray(date, dates) < 0) { 
      var old_dates = input.val(); 
      if (old_dates.length) { 
       input.val(old_dates + ',' + date); 
      } else { 
       input.val(date); 
      } 
     }; 
    }); 
    $("#datepicker").datepicker("destroy"); 
    datepicker(); 

} 


function list_dates(a, b) { 
    var list = []; 
    var a_date = new Date(a); 
    var b_date = new Date(b); 

    if (a_date > b_date) { 
     while (a_date >= b_date) { 
      var date_format = ('0' + b_date.getDate()).slice(-2) + '/' + ('0' + (b_date.getMonth() + 1)).slice(-2) + '/' + b_date.getFullYear(); 
      list.push(date_format); 
      b_date = new Date(b_date.setDate(b_date.getDate() + 1)); 
     } 
    } else if (a_date < b_date) { 
     while (b_date >= a_date) { 
      var date_format = ('0' + a_date.getDate()).slice(-2) + '/' + ('0' + (a_date.getMonth() + 1)).slice(-2) + '/' + a_date.getFullYear(); 
      list.push(date_format); 
      a_date = new Date(a_date.setDate(a_date.getDate() + 1)); 
     } 
    } else { 
     list.push(a); 
    } 

    return list; 
} 

演示：http://jsfiddle.net/Qmt36/

Answer 2

我創建了一個DEMO給你，檢查這裏http://jsfiddle.net/yeyene/FS6ms/

你可以選擇from和to日期2次點擊，無需Shift鍵。

作者和教程網頁... http://benknowscode.wordpress.com/2012/11/20/selecting-ranges-with-the-jquery-ui-datepicker/

JQUERY

$.datepicker._defaults.onAfterUpdate = null; 

var datepicker__updateDatepicker = $.datepicker._updateDatepicker; 
$.datepicker._updateDatepicker = function(inst) { 
    datepicker__updateDatepicker.call(this, inst); 

    var onAfterUpdate = this._get(inst, 'onAfterUpdate'); 
    if (onAfterUpdate) 
     onAfterUpdate.apply((inst.input ? inst.input[0] : null), 
     [(inst.input ? inst.input.val() : ''), inst]); 
} 


$(function() { 

    var cur = -1, prv = -1; 
    $('#jrange div') 
     .datepicker({ 
      //numberOfMonths: 3, 
      changeMonth: true, 
      changeYear: true, 
      showButtonPanel: true, 

      beforeShowDay: function (date) { 
        return [true, ((date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')]; 
       }, 

      onSelect: function (dateText, inst) { 
        var d1, d2; 

        prv = cur; 
        cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime(); 
        if (prv == -1 || prv == cur) { 
        prv = cur; 
        $('#jrange input').val(dateText); 
        } else { 
        d1 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.min(prv,cur)), {}); 
        d2 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.max(prv,cur)), {}); 
        $('#jrange input').val(d1+' - '+d2); 
        } 
       }, 

      onChangeMonthYear: function (year, month, inst) { 
        //prv = cur = -1; 
       }, 

      onAfterUpdate: function (inst) { 
        $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>') 
        .appendTo($('#jrange div .ui-datepicker-buttonpane')) 
        .on('click', function() { $('#jrange div').hide(); }); 
       } 
     }) 
     .position({ 
      my: 'left top', 
      at: 'left bottom', 
      of: $('#jrange input') 
     }) 
     .hide(); 

    $('#jrange input').on('focus', function (e) { 
     var v = this.value, 
      d; 

     try { 
      if (v.indexOf(' - ') > -1) { 
       d = v.split(' - '); 

       prv = $.datepicker.parseDate('mm/dd/yy', d[0]).getTime(); 
       cur = $.datepicker.parseDate('mm/dd/yy', d[1]).getTime(); 

      } else if (v.length > 0) { 
       prv = cur = $.datepicker.parseDate('mm/dd/yy', v).getTime(); 
      } 
     } catch (e) { 
      cur = prv = -1; 
     } 

     if (cur > -1) 
      $('#jrange div').datepicker('setDate', new Date(cur)); 

     $('#jrange div').datepicker('refresh').show(); 
     }); 

});