Question

我已经设置了一个jQuery-UI DatePicker日历，只接受月份和年份输入，但我还需要在同一页面上另一个常规（未修改）日期日历。

如何将datepicker月/年日历实例设置为与页面上的其他日历唯一？

这是我的小提琴：http://jsfiddle.net/n2fole00/b4vm1pap/

必填代码......

HTML

<h3>Two different calendars demo:</h3>
<div id="datepicker-without-days" class="bg-box">
    <label for="startDate">Date (months/year only) :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</div>

<div class="bg-box">
    <label for="startDate2">Date (normal calendar) :</label>
    <input name="startDate2" id="startDate2" class="date-picker" />
</div>

CSS

.ui-datepicker-calendar {
    /* Hide the days */
    display: none;
    }

button.ui-datepicker-current { 
    /* Hide the Today button */
    display: none; 
}

.bg-box { padding:15px; margin:15px; background-color: lightgreen; }

JS

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});

由于

Answer 1

专门针对他们：

$(function() {
    $('#startDate').datepicker( {
        // ...relevant options...
    });
    $('#startDate2').datepicker( {
        // ...relevant options...
    });
});

显示具有不同功能的两个日期选择器日历

1 个答案: