CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatepicker
user882670
user882670

Reputation:

Hide day in JQuery datepicker in a specific date input

I have two input fields for which I'm using datepicker:

  1. On the first I want to hide the day selector and the 'Today' button.
  2. On the second I want a normal datepicker

To achieve the desired effect on the 1st, I'm using a hack, like:

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

        }
    });

With 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" />

I tried:

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

And:

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

Here's a JSFiddle

Upvotes: 0

Views: 3351

Answers (2)

Aniruddha
Aniruddha

Reputation: 308

Remove the following option in your datepicker to hide the buttons:

showButtonPanel: true

Since you want 2 different datepickers, use the following:

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));
        }
    });

Notice that i have called the datepickers on the basis of IDs.

DEMO

Upvotes: 0

Praveen
Praveen

Reputation: 56511

You can simply apply the css [By inspecting using dev tools(F12)]

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

JSFiddle

Upvotes: 1

Related Questions