показать скрыть JQuery календарь DatePicker

Question

Для отображения календаря Jquery с месяцем только я использовал CSS, как

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

Но это CSS применяется для завершения страницы и другие datepicker управлений стали monthpicker. Как ограничить его только одним элементом управления.

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

Answer 1

С небольшой помощью запроса и может достичь нужного результата. Пожалуйста, следуйте за скрипкой.

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

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

Answer 2

Поскольку нет скрипки там. используйте некоторый уникальный идентификатор или класс этого календаря или контейнера, чтобы css применил только к этому.

например

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

Answer 3

Вы должны добавить класс (который скрывает .ui-DatePicker-календарь) до $ (вход) .datepicker ("виджет") в пределах beforeShow вариант Datepicker, а затем удалите этот класс в пределах onClose datepicker опция.

$('.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" />