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"
