den Kalender versteckt auf Datapicker

Question

$('.year').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: 'MM yy', 
 
    onOpen: function(dateText, inst) { 
 
    $("table.ui-datepicker-calendar").addClass('hide') 
 
    }, 
 
    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)); 
 
    } 
 
}); 
 

 
$('.datepicker').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: 'MM yy dd', 
 
    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)); 
 
    } 
 
});

.hide { 
 
    display: none; 
 
} 
 

 
.ui-datepicker-calendar { 
 
    <!-- display: none; --> 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" /> 
 

 
<input class="year" type="text" id="" /> 
 
<input class="datepicker" type="text" id="" />

Was ich will, ist, wenn ich auf Jahr klicken, wird es nicht Kalender angezeigt.

ich es wie

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

setzen könnte, aber wenn ich das dies tun, werden alle Datumsauswahl beeinflussen. Was ich brauche, ist der Datumsauswahl angeben, wo ich den Kalender

Answer 1

jQuery UI Datumsauswahl-Widget zu verstecken brauchen nicht über onOpen Option, sollten Sie Option beforeShow verwenden.

Auch sollten Sie Ihre Klasse $ (this) .datepicker ('Widget') hinzufügen oder setTimeout() verwenden innerhalb beforeShow weil dieses Ereignis beginnt, bevor table.ui-Datepicker-Kalender ist erstellt.

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

 
$('.datepicker').datepicker({ 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    dateFormat: 'MM yy dd', 
 
    onClose: function(input, inst) { 
 
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)); 
 
    } 
 
});

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" /> 
 

 
<input class="year" type="text" id="" /> 
 
<input class="datepicker" type="text" id="" />