web-dev-qa-db-fra.com

Comment convertir le sélecteur de date jQuery pour sélectionner uniquement le mois et l'année?

Comment convertir le sélecteur de date jQuery pour sélectionner uniquement le mois et l'année?. Je l'ai essayé en utilisant le format de date, cela fonctionne mais affiche également les dates. J'essaie un moyen de sélectionner uniquement le mois et l'année

J'ai écrit du code,

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
   $(function() {
       $( "#datepicker" ).datepicker({dateFormat: 'MM yy'});
   });
</script>
<input type="text" id="datepicker">
javascriptjquerydatepicker
11
user3099298

Votre réponse est ici.

http://jsfiddle.net/bopperben/DBpJe/

$(function() {
$('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM 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, month, 1));
    }
});
});

Crédits à la nitine de son post ... jQuery UI DatePicker pour afficher l'année du mois uniquement

24
Mitesh Vora

C'est ce que j'ai fait pour créer une liste déroulante au lieu d'utiliser datepicker. Juste jQuery est nécessaire.

HTML:

 <select class="form-control" id="yearMonthInput"></select>

code javascript:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    for (i = new Date().getFullYear() ; i > 2008; i--) {
        $.each(months, function (index, value) {
            $('#yearMonthInput').append($('<option />').val(index + "_" + i).html(value + " " + i));
        });                
    }

Et regarde de cette façon:

enter image description here

13
Daniel Silva
$(document).ready(function() {
    $('#txtDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'MM yy',
    onClose: function() {
    var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
    var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
    $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
    },
    beforeShow: function() {
    if ((selDate = $(this).val()).length > 0)
    {
        iYear = selDate.substring(selDate.length - 4, selDate.length);   
        iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
        $(this).datepicker('option', 'monthNames'));
        $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
        $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
   }
 }
});

});​
3
deepak