1

我正在使用 jQuery UI Datepicker ，我想添加一些功能。

只需按住 shift 并选择某个日期并选择结束日期，然后按住 shift 以突出显示日期，因此将字符串中的日期放入<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在tojQuery UI Datepicker 中突出显示日期

任何人都可以帮助我吗？我现在不知道:(

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

4

2 回答 2

2

我为你创建了一个 DEMO，在这里查看http://jsfiddle.net/yeyene/FS6ms/

您可以通过 2 次点击来选择日期from，to无需 Shift 键。

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

查询

$.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();
      });

});
于 2013-06-27T07:51:20.843 回答
0

我完成了 ：

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/

于 2013-06-27T10:21:34.883 回答