仅在从datepicker的下拉列表中选择年份时激活月份下拉列表

时间:2015-03-17 13:03:15

标签: jquery jquery-ui-datepicker

请告诉我如何实现这种情况。

我正在使用jquery datepicker。现在我的要求是用户应该只能选择年份而不是月份而不是白天。这是出生日期捕获。请帮助我。

$(".datePicker", $context).each( function() {
                var baseOptions = {
                    inline: true,
                    dateFormat : "dd-mm-yy",
                    changeYear: true,
                    changeMonth: true,
                    showOn: "button",
                    buttonImage: "img/calendar.gif",
                    buttonImageOnly: true,
                    showMonthAfterYear: true,
                    buttonText: "Select date"
                };

                var attr = $(this).attr("min");
                if (attr != undefined) {
                    baseOptions.minDate = attr;
                    baseOptions.yearRange = "+0:+5";
                }

                attr = $(this).attr("max");
                if (attr != undefined) {
                    baseOptions.maxDate = attr;
                    baseOptions.yearRange = "-120:+0";
                }

                attr = $(this).attr("setBirthdate");
                if(attr!=undefined){

                    var date = new Date(attr);
                    date.setFullYear(date.getFullYear()-12)
                    baseOptions.defaultDate = date;
                }
                    options = {
                        onSelect: function(dateText, inst){

                            $(this).val(dateText).trigger('change');
                            $(inst).hide();
                        }
                    };
                    $(this).datepicker($.extend(baseOptions, options));
                    $(this).on('click', function (e) { e.preventDefault(); }).datepicker($.extend(baseOptions, options));
                //}
            }

1 个答案:

答案 0 :(得分:1)

正如我在评论中所述,我不认为确实需要这样做。但是,如果你真的需要这个以这种方式工作,我会使用类似combobox的东西并添加一些css / jQuery来获得这种效果

$(function(){
    $('#date').combodate();  
    
    $('.year').change(function(){
        $(this).parent('.combodate').find('.month').show();
    });
    
    $('.month').change(function(){
        $(this).parent('.combodate').find('.day').show();
    });
    
});
.day{
    display:none;
}
.month{
    display:none;
}
<link href="http://vitalets.github.io/combodate/prettify/prettify-bootstrap.css" rel="stylesheet"/>
<link href="http://vitalets.github.io/combodate/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://vitalets.github.io/combodate/combodate.js"></script>
<script src="http://vitalets.github.io/combodate/momentjs/moment.min.2.5.0.js"></script>


<input type="text" id="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="">