jQuery Datepick插件(Keith Wood)如何仅显示2个月?

时间:2013-12-04 11:03:45

标签: jquery jquery-ui datepicker

有没有办法在datepicker中只显示2个月? 我已经设置的是datepicker作为内联版本显示2个月并隐藏月导航。 选择日期时,表单提交,默认日期设置为所选日期。 这很好。

问题是,当点击第二个月的日期时,所选日期被设置为默认日期。但是现在,第二个月和第三个月是活跃的而不是第一个月和第二个月。

实施例: 最初,仅显示2014年5月和2014年6月。当用户点击2014年6月4日时,表单提交,现在显示“6月和7月”而不是“5月和6月”。

我已经尝试设置 monthOffset和dateRanges(minDate,maxDate)。没有解决我的问题。

编辑:制作了两个屏幕截图来向您展示问题

enter image description here

enter image description here

这是JS:

//program: overview datepicker
    var dpInputField = $('input#program-overview-datepicker-value');
    var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00

    $('div#program-overview-datepicker').datepick({
        dateFormat: $.datepick.TIMESTAMP,
        monthsToShow: 2,
        changeMonth: false,
        altField: '#program-overview-datepicker-value',
        minDate: '1399593600', // 9th May 2014 00:00:00
        maxDate: '1402790400', // 15th June 2014 00:00:00
        onDate: showDayAndMonth,
        defaultDate: defaultDate,
    }, $.extend($.datepick.regional[window.language]));

    function showDayAndMonth(date) {
        var dayName =  $.datepick.formatDate('D', date);
        var dateName = date.getDate();
        var monthName = $.datepick.formatDate('M', date);

        return {content: '<div class="day">'+dayName+'</div><div class="date">'+dateName+'</div><div class="month">'+monthName+'</div>', dateClass: 'showDAM'}; 
    }
    $('a.showDAM').click(function(e){
        $('#programoverview form').submit();
    });

3 个答案:

答案 0 :(得分:3)

使用原生jquery ui

怎么样?

演示1 http://jsfiddle.net/9Uabd/1/embedded/result/


演示2 http://jsfiddle.net/9Uabd/2/embedded/result/

 $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: 3,
      showButtonPanel: true,
        minDate: '05/09/2014', // 9th May 2014 00:00:00
        maxDate: '06/15/2014'
    });
  });

答案 1 :(得分:1)

文档:http://jqueryui.com/datepicker/#min-max

将开始日期和结束日期设置为

  • 实际日期(新日期(2009年,1 - 1,26)),
  • 作为今天(-20)的数字偏移量,
  • 作为一系列句点和单位('+ 1M + 10D')。

如果您知道自己的日期范围,请尝试使用绝对日期

$("#datepicker").datepicker({ 
    changeYear: false, 
    minDate: new Date(2014, 1 - 1, 1), 
    maxDate: new Date(2014, 2 - 1, 28) 
});

这是一个小提琴:http://jsfiddle.net/HL5ap/

答案 2 :(得分:0)

通过将默认日期设置为左月的日期,但将活动的CSS-Class添加到实际选定的日期并在隐藏的输入字段中保留正确的值来自行修复它。