Как календарь скрыть для конкретного Datepicker Jquery UI

Question

$('.datepicker_year').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: '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, 1)); 
 
    }, 
 
    beforeShow: function(input) { 
 
    setTimeout(function() { 
 
     $(input).datepicker("widget").find(".ui-datepicker-current").addClass('hide'); 
 
     $(".ui-datepicker-month").addClass('hide'); 
 
     $("table.ui-datepicker-calendar").addClass('hide'); 
 
     $(".ui-datepicker-current").addClass('hide'); 
 
    }, 1); 
 
    }, 
 
    onSelect: function(dateText) { 
 
    $("table.ui-datepicker-calendar").addClass('hide'); 
 
    } 
 
});

.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.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_year" type="text" id="" data-attr="" />

Я хочу, чтобы мой выбор даты, чтобы быть независимым друг от друга. У меня есть много выбора даты некоторых требуется только год или месяц или весь срок

я могу скрыть календарь, имея

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

Но я боюсь, что это будет скрывать все календарь.

Так что я решил просто добавить класс, но он не работает.

Как скрыть календарь для определенного датпикера?

Я использую

onSelect: function(dateText) { 
    $("table.ui-datepicker-calendar").addClass('hide'); 
} 

Моя проблема когда я выбираю год календарь будет show.How скрыть календарь после выбора года

Answer 1

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

$('.datepicker-year').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: 'yy', 
 
    beforeShow: function(input) { 
 
    $(input).datepicker("widget").addClass('hide-month hide-current hide-calendar'); 
 
    }, 
 
    onClose: function(dateText, inst) { 
 
    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
 
    $(this).datepicker('setDate', new Date(year, 1)); 
 
    $(this).datepicker('widget').removeClass('hide-month hide-current hide-calendar'); 
 
    } 
 
}); 
 
$('.datepicker').datepicker();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.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-year" type="text" /> 
 
<input class="datepicker" type="text" />

Answer 2

просто использовать это, где вы хотите, чтобы скрыть Datepicker календар

$(".date-picker").on('focus blur click',function() { 
     $(".ui-datepicker-calendar").hide(); 

    });