在特定日期输入中隐藏JQuery datepicker中的日期

时间:2014-03-12 11:20:58

标签: javascript jquery html css datepicker

我有两个输入字段,我使用datepicker:

  1. 首先,我想要隐藏日期选择器和“今天”#39;按钮。
  2. 在第二个我想要一个普通的datepicker
  3. 为了达到预期的效果,我使用黑客,如:

     $('.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));
    
            }
        });
    

    使用CSS:

    .ui-datepicker-calendar {
        display: none;
    }
    

    HTML:

    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
    <label for="startDate">Outra Data :</label>
    <input name="outraData" id="outraData" />
    

    我试过了:

    #startDate .ui-datepicker-calendar {
        display: none;
    }
    

    .date-picker .ui-datepicker-calendar {
        display: none;
    }
    

    此处a JSFiddle

2 个答案:

答案 0 :(得分:1)

您可以简单地应用css [通过使用开发工具检查(F12)]

.ui-datepicker-current{
    display: none ;
}

JSFiddle

答案 1 :(得分:0)

删除日期选择器中的以下选项以隐藏按钮:

showButtonPanel: true

由于您需要2个不同的日期选择器,请使用以下内容:

HTML

<label for="startDate">Date :</label>
<input name="startDate" id="startDate" />
<label for="startDate">Outra Data :</label>
<input name="outraData" id="outraData" />

JS

$('#startDate').datepicker({
        changeMonth: true,
        changeYear: 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));
        }
    });


    $('#outraData').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));
        }
    });

请注意,我已根据ID调用了datepickers。

<强> DEMO