CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
user3799570
user3799570

Reputation: 99

Display JQuery Datepicker Today button only to a specific control

We are having multiple datepickers in our application. But we wanted to display Today button only in one page.

How can we show Today button only to a specific control?

I tried the below options: 1) Added class in the beforeshow of the datepicker

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

2) I also tried to add class directly to the 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')

Then in the css added the below style

.repositoryDate{
visibility:visible
}

Upvotes: 0

Views: 1458

Answers (2)

Ziv Weissman
Ziv Weissman

Reputation: 4536

Well you can do something like this: (Based on your code) On the beforeShow:(of all the datepickers you want without the Today)

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



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

Working fiddle

Upvotes: 1

Soundar
Soundar

Reputation: 2589

This is what you want exactly: check this 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;
}

Upvotes: 1

Related Questions