jQuery UI DatePicker pour afficher le mois année seulement

374

J'utilise le sélecteur de date jQuery pour afficher le calendrier sur toute mon application. Je veux savoir si je peux l'utiliser pour afficher le mois et l'année (mai 2010) et non le calendrier?

javascript jquery date jquery-ui jquery-ui-datepicker Aanu
la source

16

Vous voulez donc un sélecteur de mois?

dotty

Utilisez-vous le jQueryUI DatePicker?

wpjmurray

Oui. jQueryUI DatePicker

Aanu

6

ce n'est pas une réponse à votre question, mais nous l'avons maintenant, semble beaucoup mieux: eternicode.github.io/bootstrap-datepicker/…

Ruben

le bootstrap-datepicker semble être un repo interrompu, avec les problèmes qui s'accumulent sans aucun travail notable pour les corriger ...

kumarharsh

424

Voici un hack (mis à jour avec le fichier .html entier):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            }
            });
        });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
    }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

EDIT jsFiddle pour l'exemple ci - dessus: http://jsfiddle.net/DBpJe/7755/

EDIT 2 Ajoute la valeur du mois de l'année à la zone de saisie uniquement en cliquant sur le bouton Terminé. Permet également de supprimer les valeurs de la zone de saisie, ce qui n'est pas possible dans le champ ci-dessus http://jsfiddle.net/DBpJe/5103/

EDIT 3 a mis à jour une meilleure solution basée sur la solution de rexwolf.
http://jsfiddle.net/DBpJe/5106

Ben Koehler
la source

14

L'appel de «setDate» rouvrira le sélecteur dans certains navigateurs. Pour éviter cela, désactivé et activé le sélecteur: $ (this) .datepicker ('disable'); $ (this) .datepicker ('setDate', new Date (année1, mois1, 1)); $ (this) .datepicker ('enable');

Sven Sönnichsen

1

@Sven voici une alternative:$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));

ThiamTeck

1

J'essaie d'utiliser cette solution, mais l'utilisation de getDate sur un datepicker ne revient qu'aujourd'hui. Quoi de neuf?

supertopi

1

Je vois que la plupart des exemples utilisent des styles en ligne sur la page elle-même. Ce serait un problème si vous avez en quelque sorte besoin de plusieurs calendriers (chacun avec des paramètres différents, par exemple) sur la même page. Je préfère ajouter des styles dans le fichier .css en tant que tel:

#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}  #ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}

Et puis utiliser Javascript pour manipuler le comportement:$("#ui-datepicker-div").addClass('noCalendar');

poweratom

1

Sur l'exemple ci-dessus Si je veux effacer la zone de texte, je ne peux pas. Quelqu'un peut-il m'aider.

Bik

83

Ce code fonctionne parfaitement pour moi:

<script type="text/javascript">
$(document).ready(function()
{   
    $(".monthPicker").datepicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        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).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});
</script>

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

La sortie est:

Leniel Maccaferri
la source

Comment définir la valeur de ce calendrier.

Rafik malek

62

@Ben Koehler , c'est préfet! J'ai apporté une modification mineure afin que l'utilisation d'une seule instance du sélecteur de date fonctionne plus d'une fois comme prévu. Sans cette modification, la date n'est pas analysée correctement et la date précédemment sélectionnée n'est pas mise en surbrillance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
    $(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));
            },
            beforeShow : function(input, inst) {
                var datestr;
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });
    });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

BrianS
la source

Cette réponse est généralement correcte. Cependant, j'ai dû changer MM en M pour obtenir le bon mois à sélectionner lorsqu'une date est déjà sélectionnée.

Chazaq

18

Les réponses ci-dessus sont plutôt bonnes. Ma seule plainte est que vous ne pouvez pas effacer la valeur une fois qu'elle a été définie. Je préfère également l'approche extend-jquery-like-a-plugin.

Cela fonctionne parfaitement pour moi:

$.fn.monthYearPicker = function(options) {
    options = $.extend({
        dateFormat: "MM yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: ""
    }, options);
    function hideDaysFromCalendar() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        // Also fix the click event on the Done button.
        $('.ui-datepicker-close').unbind("click").click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    }
    $(this).datepicker(options).focus(hideDaysFromCalendar);
}

Puis invoquez comme ceci:

$('input.monthYearPicker').monthYearPicker();

user1857829
la source

2

à la fin, je downvoting cela parce que cela ne fonctionne pas, car les événements onSelect et / ou onChangeMonthYear et / ou onClose ne se déclenchent pas ou ne reçoivent pas les valeurs correctes ou, en cas de substitution, font que le widget cesse de fonctionner

knocte

10

<style>
.ui-datepicker table{
    display: none;
}

<script type="text/javascript">
$(function() {
    $( "#manad" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        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));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
});

Cela résoudra le problème =) Mais je voulais le timeFormat yyyy-mm

Seulement essayé en FF4

Erik Polder
la source

"yy" dans JQuery est une année à quatre chiffres. Si c'est ce que vous voulez, vous venez de le faire.

Paweł Dyda

9

J'ai eu ce même besoin aujourd'hui et l'ai trouvé sur github, fonctionne avec jQueryUI et a un sélecteur de mois à la place des jours dans le calendrier

https://github.com/thebrowser/jquery.ui.monthpicker

Anthony Shaw
la source

5

Non maintenu, mais il y a une fourchette: github.com/zorab47/jquery.ui.monthpicker

denis.peplin

8

Voici ce que j'ai trouvé. Il masque le calendrier sans avoir besoin d'un bloc de style supplémentaire et ajoute un bouton d'effacement pour résoudre le problème de ne pas pouvoir effacer la valeur une fois que vous avez cliqué sur l'entrée. Fonctionne également très bien avec plusieurs sélecteurs de mois sur la même page.

HTML:

<input type='text' class='monthpicker'>

JavaScript:

$(".monthpicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);

Paul Richards
la source

5

J'avais besoin d'un sélecteur Mois / Année pour deux champs (De et À) et quand l'un a été choisi, le Max / Min a été réglé sur l'autre ... à la date de cueillette des billets d'avion. J'avais des problèmes pour régler le max et le min ... les dates de l'autre champ seraient effacées. Merci à plusieurs des messages ci-dessus ... Je l'ai finalement compris. Vous devez définir les options et les dates dans un ordre très spécifique.

Voir ce violon pour la solution complète: Sélecteur de mois / année @ JSFiddle

Code:

var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
    searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
    dateFormat: "M yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    minDate: searchMinDate,
    maxDate: searchMaxDate,
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        if ((datestr = $("#txtFrom").val()).length > 0) {
            var year = datestr.substring(datestr.length - 4, datestr.length);
            var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
        $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            var to = $("#txtTo").val();
            $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
            if (to.length > 0) {
                var toyear = to.substring(to.length - 4, to.length);
                var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
                $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
            }
        }
    });
    $("#txtTo").datepicker({
        dateFormat: "M yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: "",
        minDate: searchMinDate,
        maxDate: searchMaxDate,
        showButtonPanel: true,
        beforeShow: function (input, inst) {
            if ((datestr = $("#txtTo").val()).length > 0) {
                var year = datestr.substring(datestr.length - 4, datestr.length);
                var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            var from = $("#txtFrom").val();
            $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
            if (from.length > 0) {
                var fryear = from.substring(from.length - 4, from.length);
                var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
                $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
                $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
            }

        }
    });

Ajoutez également ceci à un bloc de style comme mentionné ci-dessus:

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

Amy Struck
la source

5

J'ai combiné plusieurs des bonnes réponses ci-dessus et j'arrive à ceci:

    $('#payCardExpireDate').datepicker(
            {
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                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)).trigger('change');
                },
                beforeShow : function(input, inst) {
                    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));
                    }
                }
            }).focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

Cela s'est avéré fonctionner mais confronté à de nombreux bugs, j'ai donc été obligé de patcher à plusieurs endroits de datepicker:

if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
    $(".ui-datepicker-calendar").hide();
}

patch1: dans _showDatepicker: pour lisser la peau;

patch2: dans _checkOffset: pour corriger le positionnement du sélecteur de mois (sinon, lorsque le champ est en bas du navigateur, la vérification du décalage est désactivée);

patch3: dans onClose of _hideDatepicker: sinon, lors de la fermeture, les champs de date clignotent pendant une très courte période, ce qui est très ennuyeux.

Je sais que ma solution était loin d'être bonne, mais pour l'instant cela fonctionne. J'espère que cela aide.

Rexwolf
la source

Veuillez ajouter cette ligne à beforeShow: {inst.dpDiv.addClass ('month_year_datepicker')}. les dates clignotantes s'arrêteront :). Je pense aussi que .focus ne sera pas nécessaire alors

Parag

5

Ajoutez une solution plus simple

 $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

http://jsfiddle.net/tmnasim/JLydp/
Caractéristiques :

afficher uniquement le mois / l'année
Ajoute la valeur du mois-année à la zone de saisie uniquement en cliquant sur le bouton Terminé
Aucun comportement de "réouverture" lorsque vous cliquez sur "Terminé"
------------------------------------
une autre solution qui fonctionne bien pour datepicker et monthpicker dans la même page: (évitez également le bug du clic multiple sur le bouton précédent dans IE, qui peut se produire si nous utilisons la fonction focus)
Lien JS fiddle

Chris Phan
la source

4

Est-ce juste moi ou cela ne fonctionne-t-il pas comme il le devrait dans IE (8)? La date change lorsque vous cliquez sur Terminé, mais le sélecteur de date s'ouvre à nouveau, jusqu'à ce que vous cliquiez réellement quelque part dans la page pour perdre le focus sur le champ de saisie ...

Je cherche à résoudre ce problème.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(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));
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

Tom Van Schoor
la source

1

$ (this) .datepicker ('disable'); $ (this) .datepicker ('setDate', new Date (année, mois, 1)); $ (this) .datepicker ('enable'); Résout le problème.

Tom Van Schoor

1

Ce n'est pas une réponse

sisharp

4

Si vous cherchez un sélecteur de mois, essayez ce jquery.mtz.monthpicker

Cela a bien fonctionné pour moi.

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);

user2630080
la source

Le lien est mort. Ce site est inaccessible | L'adresse DNS du serveur de lucianocosta.info est introuvable.

Pang

1

Voici un lien mis à jour: lucianocosta.com.br/jquery.mtz.monthpicker

Sebastian S.

Le lien mis à jour est également rompu.

nasch

4

Comme beaucoup d'autres, j'ai rencontré de nombreux problèmes en essayant de le faire, et seule une combinaison des solutions publiées, et finalement un gros hack pour le rendre parfait, m'a permis de trouver une solution.

Problèmes avec d'autres solutions dans ce fil que j'ai essayé:

La sélection d'une nouvelle date dans un sélecteur de date modifierait également la date (interne) des autres sélecteurs de date, donc lorsque vous ouvririez à nouveau les autres (ou essayer d'obtenir leur date), ils auraient une date différente de celle affichée dans leur entrée affectée -champ.
Le sélecteur de date ne "se souvient" pas de la date de réouverture.
Le code pour jongler avec les dates utilisait la sous-chaîne, il n'était donc pas compatible avec tous les formats.
"My monthpicker" ne modifiait le champ de saisie qu'à sa fermeture, plutôt qu'à chaque fois que les valeurs étaient modifiées.
Le champ de saisie n'est pas mis à jour correctement, si vous tapez une chaîne d'entrée mal formatée pour une date, puis cliquez sur «Fermer» sur le sélecteur de date.
Je ne peux pas avoir de sélecteurs de date normaux, qui affichent les jours, sur la même page que les sélecteurs de mois, qui ne montrent pas les jours.

J'ai enfin trouvé un moyen de résoudre tous ces problèmes . Les quatre premiers peuvent être corrigés simplement en faisant attention à la façon dont vous référencez vos sélecteurs de date et de mois dans leur code interne, et bien sûr en faisant une mise à jour manuelle de vos sélecteurs. Vous pouvez le voir dans les exemples d'instanciation près du bas. Le cinquième problème peut être résolu en ajoutant du code personnalisé aux fonctions datepicker.

REMARQUE: vous n'avez PAS besoin d'utiliser les scripts de sélection de mois suivants pour résoudre les trois premiers problèmes dans votre sélection de date normal. Utilisez simplement le script d'instanciation de datepicker en bas de ce post.

Maintenant, pour utiliser les sélecteurs de mois et réparer le dernier problème, nous devons séparer les sélecteurs de date et les sélecteurs de mois. Nous pourrions obtenir l'un des rares addons jQuery-UI monthpicker, mais certains manquent de flexibilité / capacité de localisation, certains manquent de support d'animation ... alors, que faire? Lancez votre "propre" à partir du code datepicker! Cela vous donne un sélecteur de mois pleinement fonctionnel, avec toutes les fonctionnalités du sélecteur de date, juste sans l'affichage des jours.

J'ai fourni un script js monthpicker et le script CSS qui l' accompagne , en utilisant la méthode décrite ci-dessous, avec le code jQuery-UI v1.11.1. Copiez simplement ces extraits de code dans deux nouveaux fichiers, monthpicker.js et monthpicker.css, respectivement.

Si vous souhaitez en savoir plus sur le processus assez simple par lequel j'ai converti le sélecteur de date en sélecteur de mois, faites défiler la page jusqu'à la dernière section.

Maintenant, ajoutez les sélecteurs de date et de mois à la page!

Ces extraits de code javascript suivants fonctionnent avec plusieurs sélecteurs de date et / ou de mois sur la page, sans les problèmes susmentionnés! Corrigé généralement en utilisant '$ (this).' beaucoup :)

Le premier script est pour un sélecteur de date normal, et le second est pour les "nouveaux" sélecteurs de mois.

Le .after commenté , qui vous permet de créer un élément pour effacer le champ de saisie, est volé dans la réponse de Paul Richards.

J'utilise le format "MM aa" dans mon sélecteur de mois et le format "aa-mm-jj" dans mon sélecteur de date, mais cela est complètement compatible avec tous les formats , vous êtes donc libre d'utiliser celui que vous voulez. Modifiez simplement l'option 'dateFormat'. Les options standard «showButtonPanel», «showAnim» et «yearRange» sont bien sûr facultatives et personnalisables selon vos souhaits.

Ajout d'un sélecteur de date

Instanciation de datepicker. Celui-ci remonte à 90 ans et à nos jours. Il vous aide à garder le champ de saisie correct, surtout si vous définissez les options defaultDate, minDate et maxDate, mais il peut le gérer si vous ne le faites pas. Cela fonctionnera avec n'importe quel format de date que vous choisissez.

        $('#MyDateTextBox').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showMonthAfterYear: true,
            showWeek: true,
            showAnim: "drop",
            constrainInput: true,
            yearRange: "-90:",
            minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),

            onClose: function (dateText, inst) {
                // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
                // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
                // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
                // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the default date, because the date seems valid.
                    // We do not need to manually update the input-field, as datepicker has already done this automatically.
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    console.log("onClose: " + err);
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
                    // accepted/validated) date from the datepicker, by getting its default date. This only works, because
                    // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
                    // and 'onClose'.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            },

            beforeShow: function (input, inst) {
                // beforeShow is particularly irritating when initializing the input-field with a date-string.
                // The date-string will be parsed, and used to set the currently selected date in the datepicker.
                // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
                // automatically updated, only the internal selected date, until you choose a new date (or, because
                // of our onClose function, whenever you click close or click outside the datepicker).
                // We want the input-field to always show the date that is currently chosen in our datepicker,
                // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
                // the primary ones: invalid date-format; date is too early; date is too late.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the input-field, and the default date, because the date seems valid.
                    // We also manually update the input-field, as datepicker does not automatically do this when opened.
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
                    // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
                    // its default date. This only works, because we manually change the default date of the datepicker whenever
                    // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            }
        })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

Ajout d'un sélecteur de mois

Incluez le fichier monthpicker.js et le fichier monthpicker.css dans la page que vous souhaitez utiliser les monthpickers.

Instanciation du sélecteur de mois La valeur extraite de ce sélecteur de mois est toujours le PREMIER jour du mois sélectionné. Commence au mois en cours et s'étend d'il y a 100 ans à 10 ans.

    $('#MyMonthTextBox').monthpicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showMonthAfterYear: true,
        showAnim: "drop",
        constrainInput: true,
        yearRange: "-100Y:+10Y",
        minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
        maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
        defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),

        // Monthpicker functions
        onClose: function (dateText, inst) {
            var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
            $(this).monthpicker('option', 'defaultDate', date);
            $(this).monthpicker('setDate', date);
        },

        beforeShow: function (input, inst) {
            if ($(this).monthpicker("getDate") !== null) {
                // Making sure that the date set is the first of the month.
                if($(this).monthpicker("getDate").getDate() !== 1){
                    var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
                    $(this).monthpicker('option', 'defaultDate', date);
                    $(this).monthpicker('setDate', date);
                }
            } else {
                // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
                $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
            }
        },
        // Special monthpicker function!
        onChangeMonthYear: function (year, month, inst) {
            $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
        }
    })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

C'est ça! C'est tout ce dont vous avez besoin pour choisir un mois.

Je n'arrive pas à faire fonctionner jsfiddle avec cela, mais cela fonctionne pour moi dans mon projet ASP.NET MVC. Faites simplement ce que vous faites normalement pour ajouter un sélecteur de dates à votre page et incorporez les scripts ci-dessus, éventuellement en changeant le sélecteur (ce qui signifie $ ("# MyMonthTextBox")) en quelque chose qui fonctionne pour vous.

J'espère que ça aidera quelqu'un.

Liens vers des boîtes à pâte pour certaines configurations supplémentaires de date et de mois:

Monthpicker travaillant le dernier jour du mois . La date que vous obtenez avec ce sélecteur de mois sera toujours le dernier jour du mois.
Deux sélecteurs de mois collaborateurs ; 'start' travaille le premier du mois et 'end' travaille le dernier du mois. Ils sont tous les deux limités l'un par l'autre, donc choisir un mois à la «fin» qui est avant le mois sélectionné au «début» changera «début» pour être le même mois que «fin». Et vice versa. FACULTATIF: Lorsque vous sélectionnez un mois au début, la «minDate» à la «fin» est définie sur ce mois. Pour supprimer cette fonctionnalité, mettez une ligne en commentaire dans onClose (lisez les commentaires).
Deux datpickers collaborateurs ; Ils sont tous deux limités l'un par l'autre, donc choisir une date à la «fin» qui est antérieure à la date sélectionnée au «début» changera «début» pour être le même mois que «fin». Et vice versa. FACULTATIF: Lorsque vous sélectionnez une date au «début», la «minDate» à la «fin» est définie sur cette date. Pour supprimer cette fonctionnalité, mettez une ligne en commentaire dans onClose (lisez les commentaires).

Comment j'ai changé le DatePicker en un MonthPicker

J'ai pris tout le code javascript de jquery-ui-1.11.1.js concernant leur datepicker, l'ai collé dans un nouveau fichier js et remplacé les chaînes suivantes:

"datepicker" ==> "monthpicker"
"Datepicker" ==> "Monthpicker"
"sélecteur de date" ==> "sélecteur de mois"
"Sélecteur de date" ==> "Sélecteur de mois"

Ensuite, j'ai supprimé la partie de la boucle for qui crée l'intégralité du div ui-datepicker-calendar (le div que les autres solutions cachent en utilisant CSS). Cela peut être trouvé dans la fonction _generateHTML: (inst).

Trouvez la ligne qui dit:

"</div><table class='ui-datepicker-calendar'><thead>" +

Marquez tout depuis la fin de la balise div et jusqu'à (et non compris) la ligne où il est dit:

drawMonth++;

Maintenant, ce sera malheureux car nous devons fermer certaines choses. Après cette balise div de fermeture d'avant, ajoutez ceci:

";

Le code devrait maintenant être bien assemblé. Voici un extrait de code montrant ce avec quoi vous auriez dû vous retrouver:

...other code...

calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
                (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
                (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
                this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
                    row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
                "</div>";
            drawMonth++;
            if (drawMonth > 11) {
                drawMonth = 0;
                drawYear++;
            }

...other code...

Ensuite, j'ai copié / collé le code de jquery-ui.css relatif aux sélecteurs de date dans un nouveau fichier CSS et remplacé les chaînes suivantes:

"datepicker" ==> "monthpicker"

Ultroman le Tacoman
la source

3

après avoir creusé jQueryUI.com pour datepicker, voici ma conclusion et réponse à votre question.

Tout d'abord, je dirais non à votre question. Vous ne pouvez pas utiliser le sélecteur de date jQueryUI pour sélectionner uniquement le mois et l'année. Il n'est pas pris en charge. Il n'a pas de fonction de rappel pour cela.

Mais vous pouvez le pirater pour afficher uniquement le mois et l'année en utilisant css pour masquer les jours, etc. Et je pense que cela n'aura pas de sens car vous devez cliquer sur les dates pour choisir une date.

Je peux dire que vous n'avez qu'à utiliser un autre sélecteur de date. Comme ce que Roger a suggéré.

Reigel
la source

3

J'ai eu le problème du sélecteur de date mélangé au sélecteur de mois. Je l'ai résolu comme ça.

    $('.monthpicker').focus(function()
    {
    $(".ui-datepicker-calendar").show();
    }).datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM/yy',
        create: function (input, inst) { 

         },
        onClose: function(dateText, inst) { 
            var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());           
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        }
    });

PYT
la source

3

Si quelqu'un le veut aussi pour plusieurs calendriers, ce n'est pas très difficile d'ajouter cette fonctionnalité à jquery ui. avec recherche simplifiée pour:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

ajoutez ceci devant x

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

rechercher

<table class="ui-datepicker-calendar

et remplacez-le par

<table class="ui-datepicker-calendar'+accl+'

rechercher également

this._defaults={

remplacez-le par

this._defaults={justMonth:false,

pour css, vous devez utiliser:

.ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

après cela, tout est fait, allez dans les fonctions init de votre choix de date et fournissez le réglage var

$('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        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));
        }
});

justMonth: true est la clé ici :)

prdatur
la source

2

À propos de: http://www.mattkruse.com/javascript/calendarpopup/

Sélectionnez l'exemple de sélection du mois

Roger
la source

Comme j'utilise déjà jquery datepicker, je préfère l'utiliser ou construire le mois et l'année manuellement.

Aanu

2

A apporté quelques améliorations à la réponse presque parfaite de BrianS ci-dessus:

J'ai regexé la valeur définie à l'écran car je pense que cela la rend en fait un peu plus lisible dans ce cas (bien que notez que j'utilise un format légèrement différent)
Mon client ne voulait aucun calendrier, j'ai donc ajouté un ajout de classe à afficher / masquer pour le faire sans affecter les autres sélecteurs de date. La suppression de la classe est sur une minuterie pour éviter que la table ne clignote lorsque le sélecteur de date disparaît, ce qui semble être très visible dans IE.

EDIT: Un problème qui reste à résoudre avec cela est qu'il n'y a aucun moyen de vider le sélecteur de date - effacer le champ et cliquer et il se remplit à nouveau avec la date sélectionnée.

EDIT2: Je n'ai pas réussi à résoudre cela correctement (c'est-à-dire sans ajouter un bouton Effacer séparé à côté de l'entrée), donc j'ai fini par utiliser ceci: https://github.com/thebrowser/jquery.ui.monthpicker - si quelqu'un peut obtenir l'interface utilisateur standard pour le faire, ce serait incroyable.

    $('.typeof__monthpicker').datepicker({
        dateFormat: 'mm/yy',
        showButtonPanel:true,
        beforeShow: 
            function(input, dpicker)
            {                           
                if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
                {
                    var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);

                    $(this).datepicker('option', 'defaultDate', d);
                    $(this).datepicker('setDate', d);
                }

                $('#ui-datepicker-div').addClass('month_only');
            },
        onClose: 
            function(dt, dpicker)
            {
                setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);

                var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

                $(this).datepicker('setDate', new Date(y, m, 1));
            }
    });

Vous avez également besoin de cette règle de style:

#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}

Whelkaholism
la source

2

J'ai aimé la réponse @ user1857829 et son "approche d'extension-jquery-like-a-plugin". Je viens de faire une petite modification pour que lorsque vous changez de mois ou d'année, le sélecteur écrit la date dans le champ. J'ai trouvé que j'aimerais ce comportement après l'avoir utilisé un peu.

jQuery.fn.monthYearPicker = function(options) {
  options = $.extend({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    onChangeMonthYear: writeSelectedDate
  }, options);
  function writeSelectedDate(year, month, inst ){
   var thisFormat = jQuery(this).datepicker("option", "dateFormat");
   var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
   inst.input.val(d);
  }
  function hideDaysFromCalendar() {
    var thisCalendar = $(this);
    jQuery('.ui-datepicker-calendar').detach();
    // Also fix the click event on the Done button.
    jQuery('.ui-datepicker-close').unbind("click").click(function() {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      thisCalendar.datepicker('setDate', new Date(year, month, 1));
      thisCalendar.datepicker("hide");
    });
  }
  jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}

stravanato
la source

2

J'ai eu certaines difficultés avec la réponse acceptée et aucune autre n'a pu être utilisée avec un minimum d'effort comme base. J'ai donc décidé de modifier la dernière version de la réponse acceptée jusqu'à ce qu'elle réponde au moins aux normes minimales de codage / réutilisabilité JS.

Voici une solution beaucoup plus propre que la 3ème (dernière) édition de la réponse acceptée de Ben Koehler . De plus, il:

fonctionne non seulement avec le mm/yyformat, mais avec tout autre, y compris les OP MM yy.
ne pas masquer le calendrier des autres sélecteurs de date sur la page.
ne pollue pas implicitement l'objet global JS avec le datestr, month, yearetc des variables.

Vérifiez-le:

$('.date-picker').datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function (dateText, inst) {
        var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
        if (!isDonePressed)
            return;

        var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
            year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();

        $(this).datepicker('setDate', new Date(year, month, 1)).change();
        $('.date-picker').focusout();
    },
    beforeShow: function (input, inst) {
        var $this = $(this),
            // For the simplicity we suppose the dateFormat will be always without the day part, so we
            // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
            dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
            date;

        try {
            date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
        } catch (ex) {
            return;
        }

        $this.datepicker('option', 'defaultDate', date);
        $this.datepicker('setDate', date);

        inst.dpDiv.addClass('datepicker-month-year');
    }
});

Et tout ce dont vous avez besoin est le CSS suivant quelque part:

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

C'est ça. J'espère que ce qui précède fera gagner du temps à d'autres lecteurs.

Alexander Abakumov
la source

1

Juste et pour info. La ligne 'inst.dpDiv.addClass (' datepicker-month-year ');' ajoutera le mois-année entier à la division du calendrier de datepicker, ce qui signifie que s'il existe d'autres champs de date avec datepicker, ils cesseront de fonctionner à cause de cela. Comme il n'y a qu'une seule div pour le calendrier, il serait intéressant d'ajouter un '$ ('. Datepicker-month-year '). RemoveClass (' datepicker-month-year ');' en utilisant beforeShow sur tous les autres sélecteurs de date qui nécessitent le calendrier traditionnel. OU, supprimez la classe lorsque vous perdez le focus. Mais je n'ai rien trouvé de tel dans l'api

Johnny Bigoode

1

C'est la réponse complète que tout le monde devrait utiliser. Le plus gros problème résolu pour moi était que la fenêtre de saisie de la date est toujours par défaut le mois et l'année en cours, indépendamment de ce qui s'y trouve déjà. Cette réponse l'a corrigé.

Alex F

1

Je sais que c'est une réponse un peu tardive, mais j'ai eu le même problème quelques jours auparavant et je suis venu avec une solution agréable et fluide. J'ai d'abord trouvé ce grand sélecteur de date ici

Ensuite, je viens de mettre à jour la classe CSS (jquery.calendarPicker.css) fournie avec l'exemple comme ceci:

.calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

Le plugin déclenche un événement DateChanged lorsque vous changez quoi que ce soit, donc peu importe que vous ne cliquiez pas sur un jour (et il convient bien comme sélecteur d'année et de mois)

J'espère que cela aide!

pjnovas
la source

1

J'avais aussi besoin d'un sélecteur de mois. J'en ai fait une simple avec l'année sur l'en-tête et 3 lignes de 4 mois ci-dessous. Découvrez-le: sélecteur mensuel simple avec jQuery .

Tiago Coelho
la source

1

J'ai essayé les différentes solutions fournies ici et elles ont bien fonctionné si vous vouliez simplement quelques menus déroulants.

Le meilleur "sélecteur" (en apparence, etc.) ( https://github.com/thebrowser/jquery.ui.monthpicker ) suggéré ici est essentiellement une copie d'une ancienne version de jquery-ui datepicker avec le _generateHTML réécrit. Cependant, j'ai trouvé qu'il ne fonctionnait plus bien avec jquery-ui actuel (1.10.2) et avait d'autres problèmes (ne se ferme pas sur esc, ne se ferme pas sur une autre ouverture de widget, a des styles codés en dur).

Plutôt que d'essayer de corriger ce sélecteur de mois et de ne pas réessayer le même processus avec le dernier sélecteur de date, je suis allé accrocher les parties pertinentes du sélecteur de date existant.

Cela implique de remplacer:

_generateHTML (pour construire le balisage du sélecteur de mois)
parseDate (car il n'aime pas quand il n'y a pas de composant day),
_selectDay (car datepicker utilise .html () pour obtenir la valeur du jour)

Comme cette question est un peu ancienne et déjà bien répondue, voici seulement la substitution _selectDay pour montrer comment cela a été fait:

jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
    if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
    // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
    return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};

Comme indiqué, c'est une vieille question, mais je l'ai trouvée utile, je voulais donc ajouter des commentaires avec une solution alternative.

libertén-m
la source

0

pour un mois, en utilisant JQuery v 1.7.2, j'ai le javascript suivant qui fait exactement cela

$l("[id$=txtDtPicker]").monthpicker({ showOn: "both", buttonImage: "../../images/Calendar.png", buttonImageOnly: true, pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'] });

Ricardo Appleton
la source

0

Merci pour la solution de Ben Koehler.

Cependant, j'ai eu un problème avec plusieurs instances de datepickers, avec certains d'entre eux nécessaires avec la sélection du jour. La solution de Ben Koehler (dans l'édition 3) fonctionne, mais masque la sélection du jour dans tous les cas. Voici une mise à jour qui résout ce problème:

$('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    beforeShow : function(input, inst) {
        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-div").addClass("month_year_datepicker");
        }
    }
});

dj3c1t
la source

-2

Utilisez le onSelectrappel et supprimez la partie de l'année manuellement et définissez le texte dans le champ manuellement

Teja Kantamneni
la source

3

Je pense que vous ne lisez pas la question. Aanu veut "afficher le mois et l'année (mai 2010) et non le calendrier".

Reigel