Jquery日期选择器:将开始日期附加到结束日期并仅显示将来的日期

时间:2010-04-25 23:48:15

标签: jquery datepicker

我正在使用Jquery Date选择器来获取我正在构建的应用程序的开始日期和结束日期。

我有两个日期选择器,一个用于开始日期,一个用于结束日期。

当有人点击开始日期选择器中的日期时,我需要将该日期自动附加到结束日期选择器。

我还需要结束日期选择器,仅从附加日期开始选择未来日期。

jquery datepicker网站上有两个演示可以做我想要的,但我不确定如何将它们组合成两个我想做的事情。

Example One:

  

此示例显示了如何绑定   两个日期拣选器一起使得   在一个中选择的日期会影响到   可在中选择的日期   其他

$(function()
{
    $('.date-pick').datePicker()
    $('#start-date').bind(
        'dpClosed',
        function(e, selectedDates)
        {
            var d = selectedDates[0];
            if (d) {
                d = new Date(d);
                $('#end-date').dpSetStartDate(d.addDays(1).asString());
            }
        }
    );
    $('#end-date').bind(
        'dpClosed',
        function(e, selectedDates)
        {
            var d = selectedDates[0];
            if (d) {
                d = new Date(d);
                $('#start-date').dpSetEndDate(d.addDays(-1).asString());
            }
        }
    );
});

Example Two:

  

显示内联日期选择器的示例   它们连在一起并触发   彼此的行为......

$(function()
{
    $('#date-view1')
        .datePicker({inline:true})
        .bind(
            'dateSelected',
            function(e, selectedDate, $td)
            {
                $('#date1').val(selectedDate.asString());
                $('#date-view2, #date-view3').dpSetSelected(selectedDate.addDays(3).asString());
            }
        );
    $('#date-view2')
        .datePicker({inline:true})
        .bind(
            'dateSelected',
            function(e, selectedDate, $td)
            {
                $('#date2').val(selectedDate.asString());
            }
        );
    $('#date-view3').datePicker();
    $('#form-check')
        .bind(
            'click',
            function()
            {
                alert('date1=' + $('#date1').val() + '\n' + 'date2=' + $('#date2').val());
            }
        );
});

我尝试了上面列出的代码的许多组合,但是我无法获得所需的结果。

感谢您的帮助,

1 个答案:

答案 0 :(得分:1)

这里尝试这个,选择开始日期将在开始日期输入中附加任何值并将结束日期设置为开始日期:

$('#start-date').bind('dpClosed', function(e, selectedDates) {
    var d = selectedDates[0];
    if (d) {
   d = new Date(d);
   $('#end-date').dpSetStartDate(d.addDays(1).asString()).dpSetSelected(d.asString()).val($(this).val());
  }
 });