Question

我们的应用程序中有多个日期选择器。但是我们只想在一页中显示今日按钮。

我们如何才能将“今日”按钮仅显示给特定控件？

我尝试了以下选项： 1）在datepicker

的beforeshow中添加了类

 beforeShow: function (input, inst) {
            $('#ui-datepicker-div .ui-datepicker-current').addClass('repositoryDate');
        }

2）我还尝试将类直接添加到datepicker

 $("#val_effective_date").datepicker({
        showOn: 'both',
        dateFormat: 'dd-MM-yy',
        buttonImage: glSiteName + '/Content/Images/Icons/Calendar.png',
        buttonImageOnly: true,
        showButtonPanel: true,
        buttonText: 'Currrent Date',
        changeMonth: true,
        changeYear: true,
        altFormat: 'yymm',
        minDate: new Date($("#createdDate").val()),
        maxDate: new Date(9999, 12, 31),
        //onClose: function (dateText, inst) {
        //    $(this).datepicker('setDate', new Date());
        //},
        onChangeMonthYear: function (y, m, i) {
            var d = i.selectedDay;
            $(this).datepicker('setDate', new Date(y, m - 1, OnMonthYearChangeDateCheck(d, m - 1, y)));
        },
        beforeShow: function (input,inst) {
            $('#ui-datepicker-div .ui-datepicker-current').addClass('dataValidationDate');
        }
    }).next('.ui-datepicker-current').addClass('repositoryDate')

然后在css中添加了以下样式

.repositoryDate{
visibility:visible
}

Answer 1

这正是您想要的：检查此Fiddle。

<强> HTML

<p>Without today button</p>
<input class="datepicker hide_today" type="text">

<p>Without done button</p>
<input class="datepicker hide_done" type="text">

<p>With both buttons</p>   
<input class="datepicker" type="text">

<强> JS

$(".datepicker").datepicker({
    showButtonPanel: true,
    beforeShow: function(ele, obj) {
        obj.dpDiv.removeClass("hide_today hide_done");
        if($(ele).hasClass("hide_today")) obj.dpDiv.addClass("hide_today");
        if($(ele).hasClass("hide_done")) obj.dpDiv.addClass("hide_done"); 
    }
});

<强> CSS

.hide_today .ui-datepicker-buttonpane button:first-child
{
    display: none;
}
.hide_done .ui-datepicker-buttonpane button:last-child
{
    display: none;
}

Answer 2

你可以这样做：（根据您的代码）在beforeShow :(你想要的所有日期选择器没有今天）

 beforeShow: function (input,inst) {
   todayBtnHandler();
 }



function todayBtnHandler(){
    setTimeout(function() {
               $(".ui-datepicker-current").hide();}, 50);    
              }
}

Working fiddle

仅显示特定控件的JQuery Datepicker Today按钮

2 个答案: