Javascript 月份范围选择器

Question

谁能给我推荐一个带有最小和最大日期功能的好的 javascript 月份范围选择器。

我已经用谷歌搜索了它，但没有找到一个好的。我见过 JQuery UI 日期选择器修改。但是当我传递最大和最小日期时，它无法正常工作，并且显示错误的年份和月份。

下面是我试过的代码。

<script type="text/javascript">
$(document).ready(function() {  
    $( "#fromMonth, #toMonth" ).datepicker({    
            changeMonth: true,
            changeYear: true,
            showButtonPanel: false,
            dateFormat: 'M yy',
                            minDate:new Date(2010, 1 - 1, 1),
                maxDate:new Date(2012, 4 - 1, 1),   
            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));
                $(this).datepicker('refresh');
            },
            beforeShow : function(input, inst) {
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));    
                }
                var other = this.id == "fromMonth" ? "#toMonth" : "#fromMonth";
                var option = this.id == "fromMonth" ? "maxDate" : "minDate";        
                if ((selectedDate = $(other).val()).length > 0) {
                    year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
                    month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker( "option", option, new Date(year, month, 1));
                }
            }
        });
        $("#btnShow").click(function(){ 
        if ($("#fromMonth").val().length == 0 || $("#toMonth").val().length == 0){
            alert('All fields are required');
        }
        else{
            alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
            }
        })

});

</script>
<style type="text/css">
.ui-datepicker-calendar {display: none;}
</style>

谁能告诉我上面的代码有什么问题或提出一个好的解决方案？

Answer 1

我建议DateRangePicker，一个轻量级的月份范围选择器，非常容易定制

用例

$('input').rangePicker({ minDate:[2,2009], maxDate:[10,2013] })
    // subscribe to the "done" event after a date was selected
    .on('datePicker.done', function(e, result){
        console.log(result);
    });

可用设置：

{
    RTL : false,
    closeOnSelect : true,
    presets : [{
            buttonText  : '1 month',
            displayText : 'one month',
            value       : '1m'
        },{
            buttonText  : '3 months',
            displayText : 'three months',
            value       : '3m'
        },{
            buttonText  : '6 months',
            displayText : 'six months',
            value       : '6m'
        },{
            buttonText  : '12 months',
            displayText : 'twelve months',
            value       : '12m'
    }],
    months  : ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'],
    minDate : [5,2006],
    maxDate : [8,2013],
    setDate : null
}