So zeigen Sie die Datumsauswahl an

Question

Ich habe ein Feld, das Datum mithilfe der Datumsauswahl eingeben muss. Ich habe versucht, und für den Fehler gesucht (nicht Anzeige)

Hier ist mein Skript für Datumsauswahl

<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> 

Hier ist mein Feld in HTML ist:

<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> 

Das Feld wird nicht angezeigt die Datumsauswahl. Bitte helfen Sie!

Answer 1

datepicker ist nicht Teil von jQuery - es ist in jQueryUI. Sie müssen sicherstellen, dass Sie beide Bibliotheken in der richtigen Reihenfolge enthalten haben. Sobald Sie das getan haben, funktioniert der Code in Ordnung:

$(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>

Beachten Sie auch, dass ich ein Stylesheet statt Packen des HTML mit hässlichen style Attribute verwendet.

Answer 2

Stellen Sie sicher, Referenz jquery-ui Bibliothek

$(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>