如何顯示日期選擇器

Question

我有一個字段需要使用日期選擇器輸入日期。我曾嘗試和搜索的錯誤（未顯示）

這裏是我的日期選擇器腳本

<script> 
$(function(){ 
$('.date-picker').datepicker({ 
dateFormat: "yy-mm", 
changeMonth: true, 
changeYear: true, 
showButtonPanel: true, 
onClose: function(dateText, inst) { 
    function isDonePressed(){ 
    return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
    } 
    if (isDonePressed()){ 
    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)).trigger('change'); 
    $('.date-picker').focusout()//Added to remove focus from datepicker input box on selecting date 
    } 
}, 
beforeShow : function(input, inst) { 
    inst.dpDiv.addClass('month_year_datepicker') 
    if ((datestr = $(this).val()).length > 0) { 
    year = datestr.substring(datestr.length-4, datestr.length); 
    month = datestr.substring(0, 2); 
    $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); 
    $(this).datepicker('setDate', new Date(year, month-1, 1)); 
    $(".ui-datepicker-calendar").hide(); 
    } 
    } 
    }) 
    }); 
    </script> 

這是我在HTML領域：

<table> 
<tr> 
<td style="width:150px;text-align:center; background-color:#f9f9f9";>From Date</td> 
<td style="background-color:#f9f9f9";><input style="width:150px;text-align:center" class="date-picker" name="oec_month1" ></td> 
<td style="width:150px;text-align:center; background-color:#f9f9f9";>To Date</td> 
<td style="background-color:#f9f9f9";><input style="width:150px;text-align:center" class="date-picker" name="oec_month2" ></td> 
</tr> 
</table> 

字段不顯示日期選擇器。請幫忙！

Answer 1

datepicker不是jQuery的一部分 - 它在jQueryUI中。您需要確保您已包含兩個庫，並且順序正確。一旦你這樣做，你的代碼工作正常：

$(function() { 
 
    $('.date-picker').datepicker({ 
 
    dateFormat: "yy-mm", 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    onClose: function(dateText, inst) { 
 
     function isDonePressed() { 
 
     return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
 
     } 
 
     if (isDonePressed()) { 
 
     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)).trigger('change'); 
 
     $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date 
 
     } 
 
    }, 
 
    beforeShow: function(input, inst) { 
 
     inst.dpDiv.addClass('month_year_datepicker') 
 
     if ((datestr = $(this).val()).length > 0) { 
 
     year = datestr.substring(datestr.length - 4, datestr.length); 
 
     month = datestr.substring(0, 2); 
 
     $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1)); 
 
     $(this).datepicker('setDate', new Date(year, month - 1, 1)); 
 
     $(".ui-datepicker-calendar").hide(); 
 
     } 
 
    } 
 
    }) 
 
});

td.label { 
 
    width: 150px; 
 
    text-align: center; 
 
    background-color: #f9f9f9; 
 
} 
 

 
td.field { 
 
    background-color: #f9f9f9; 
 
} 
 

 
.date-picker { 
 
    width: 150px; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td class="label">From Date</td> 
 
    <td class="field"><input class="date-picker" name="oec_month1"></td> 
 
    <td class="label">To Date</td> 
 
    <td class="field"><input class="date-picker" name="oec_month2"></td> 
 
    </tr> 
 
</table>

另外請注意，我用的，而不是包裝與醜陋style屬性的HTML樣式表。

Answer 2

請確保您有參考jquery-ui庫

$(function() { 
 
    $('.date-picker').datepicker({ 
 
    dateFormat: "yy-mm", 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showButtonPanel: true, 
 
    onClose: function(dateText, inst) { 
 
     function isDonePressed() { 
 
     return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
 
     } 
 
     if (isDonePressed()) { 
 
     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)).trigger('change'); 
 
     $('.date-picker').focusout() //Added to remove focus from datepicker input box on selecting date 
 
     } 
 
    }, 
 
    beforeShow: function(input, inst) { 
 
     inst.dpDiv.addClass('month_year_datepicker') 
 
     if ((datestr = $(this).val()).length > 0) { 
 
     year = datestr.substring(datestr.length - 4, datestr.length); 
 
     month = datestr.substring(0, 2); 
 
     $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1)); 
 
     $(this).datepicker('setDate', new Date(year, month - 1, 1)); 
 
     $(".ui-datepicker-calendar").hide(); 
 
     } 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> 
 
<table> 
 
    <tr> 
 
    <td style="width:150px;text-align:center; background-color:#f9f9f9" ;>From Date</td> 
 
    <td style="background-color:#f9f9f9" ;><input style="width:150px;text-align:center" class="date-picker" name="oec_month1"></td> 
 
    <td style="width:150px;text-align:center; background-color:#f9f9f9" ;>To Date</td> 
 
    <td style="background-color:#f9f9f9" ;><input style="width:150px;text-align:center" class="date-picker" name="oec_month2"></td> 
 
    </tr> 
 
</table>