show hide jquery datepicker calendar

Question

For displaying jquery calendar with Month only I have used css as

   <style>
      .ui-datepicker-calendar 
      {
         display:none
      }
   </style>

But this CSS is applied to complete page and to other datepicker controls have become monthpicker . How do I restrict it to only one control.

    <input data-val="true" id="StartMonth" name="StartMonth" type="text" value="" /> 
    $('#StartMonth').focusin(function () 
    {
        $('.ui-datepicker-calendar').css("display", "none");
        $('#StartMonth').datepicker('setDate', new Date(year, month, 1)).trigger('change');
    });

solution found here but created a problem for me http://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only?rq=1 — user334223, Dec 02 '15 at 04:22

score 4 · Accepted Answer · answered Dec 02 '15 at 04:31

4

With a little help of query u can achieve your desired result. Please follow the fiddle.

http://jsfiddle.net/DBpJe/7376/

   $('#startDate').focusin(function(){
  $('.ui-datepicker-calendar').css("display","none");
});

answered Dec 02 '15 at 04:31

Help

1,156
7
11

help, When I applied the above solution, '.ui-datepicker-calendar' gets hiiden only when I change month or year in calendar, on page load display of calendar is not hidden. – user334223 Dec 02 '15 at 05:59
Make sure that the id which you are using in jquery is of your input field. – Help Dec 02 '15 at 06:01
$('#StartMonth').focusin(function () { $('.ui-datepicker-calendar').css("display", "none"); $('#StartMonth').datepicker('setDate', new Date(year, month, 1)).trigger('change'); }); – user334223 Dec 02 '15 at 06:05
Write the following code after the datepicker function call. $('#startDate').focusin(function(){ $('.ui-datepicker-calendar').css("display","none"); }); – Help Dec 02 '15 at 06:08

Anton Novik · Answer 2 · 2016-09-10T08:51:00.633

You should add class (which hide .ui-datepicker-calendar) to $(input).datepicker("widget") within beforeShow datepicker option and then remove this class within onClose datepicker option.

$('.datepicker-without-calendar').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  beforeShow: function(input) {
    $(input).datepicker("widget").addClass('hide-calendar');
  },
  onClose: function(dateText, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    $(this).datepicker('widget').removeClass('hide-calendar');
  }
});

$('.datepicker').datepicker();

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<input class="datepicker-without-calendar" type="text" />
<input class="datepicker" type="text" />

This should be a comment, not an answer. If it is a duplicate question then [vote to close](http://stackoverflow.com/help/privileges/close-questions) as such and/or leave a comment once you [earn](http://meta.stackoverflow.com/q/146472) enough [reputation](http://stackoverflow.com/help/whats-reputation). If the question is not a duplicate then tailor the answer to this specific question. — Petter Friberg, Sep 09 '16 at 21:53
Mind-blowing answer. I have faced the same problem for two days. But your answer solved my problem — A.A Noman, Sep 26 '21 at 06:37

score 0 · Answer 3 · answered Dec 02 '15 at 04:35

0

Since there is no fiddle there . use some unique id or class of that calendar or container so that css only applied to that.

e.g

$(#mycalendarDiv .ui-datepicker-calendar).css("display","none");

answered Dec 02 '15 at 04:35

Tariq Husain

559
5
23

show hide jquery datepicker calendar

3 Answers3