jQuery Girl
  1. jQuery Girl
  3. Sélecteur JQuery Datetime – Nécessité de choisir le mois et l’année uniquement
Intereting Posts
JQuery bloqué au contrôle en amont de la CORS et à la réponse fantôme d’IIS Existe-t-il une méthode pour dormir en JavaScript dans une boucle? les données («glissables») ne sont pas définies dans jQuery-ui-1.10.3 Jquery Hide / Show ne fonctionne pas dans Firefox uniquement? Sélectionner la largeur de la liste déroulante indépendamment de l’entrée Utilisation de la pagination par GMail API de nextPageToken Comment puis-je «filtrer» JSON pour des paires nom clé / valeur uniques? Intégration / parsing de données JSON avec jQuery getJSON Rails – exécuter un appel ajax via le menu déroulant sélectionné css / jquery: limite de défilement avec scoll nested et barre de défilement masquée Remplacer l’élément HR par Open Div Boîte de dialog jQuery UI: Fermer lorsque vous cliquez en dehors Inverser des mots dans une chaîne jQuery click se déclenche deux fois mais n’est enregistré qu’une fois Option de recherche étendue avec javascript

Sélecteur JQuery Datetime – Nécessité de choisir le mois et l’année uniquement

J’ai consulté ce post jQuery UI DatePicker pour ne montrer que les mois de l’année, ce qui m’est très utile pour pirater l’interface utilisateur du sélecteur de date / heure en fonction de ma situation.

Mais comme j’ai plusieurs sélecteurs de date / heure sur le même formulaire, cela se produit. L’ display:none css display:none n’a pour but de “masquer” les jours à ne pas afficher. Mais si j’ai plusieurs sélecteurs de date / heure sur le même formulaire mais un seul que je souhaite en faire un de mois, comment puis-je y parvenir? Avec css, cela fait disparaître tous les jours de l’interface utilisateur calendrier tout datetime puisque le CSS changera l’atsortingbut de .ui-datepicker-calendar. Toutes les suggestions sont les bienvenues.

Actuellement, datepicker crée un seul élément par page partagé par toutes les entrées “datepicker”, d’où la raison pour laquelle la réponse à la question liée ne fonctionne pas. L’événement beforeShow ne permet pas de modifier l’élément datepicker avec .addClass () ou .css () (car la structure de l’élément est actualisée à partir du script datepicker lorsqu’elle s’affiche.)

Pour contourner ce problème, j’ai constaté que l’événement de focus de l’élément d’entrée semblait exécuter du code après l’affichage du sélecteur de date. C’est une solution simple à un problème frustrant.

Voici mon code:

J’ai utilisé une version légèrement différente du code que Ben a posté. Au lieu de compter sur l’événement principal, j’ai ajouté 

 inst.dpDiv.addClass('monthonly');

dans la méthode beforeShow et 

 inst.dpDiv.removeClass('monthonly');

dans le onClose. Ceci ajoute et supprime une classe sur la div commune utilisée par tous les widgets datepicker. Le calendrier de date div peut ensuite être ciblé en css en utilisant 

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

La solution précédente ne fonctionnera pas avec différents formats. De plus, setDate ne fera rien dans beforeShow. La bonne façon de le faire sera: 

 beforeShow: function(input, inst) { var dateSsortingng = $(this).val(); var options = new Object(); if (dateSsortingng.length > 0) { options.defaultDate = $.datepicker.parseDate("dd-" + $(this).datepicker("option", "dateFormat"), "01-" + dateSsortingng); } inst.dpDiv.addClass("ui-monthpicker"); return options; }, onClose: function(dateText, inst) { var month = inst.dpDiv.find(".ui-datepicker-month").val(); var year = inst.dpDiv.find(".ui-datepicker-year").val(); $(this).datepicker("setDate", new Date(year, month, 1)); inst.dpDiv.removeClass("ui-monthpicker"); }

J’ai utilisé parseDate de datepicker pour gérer différents formats de date et renvoyer la date du champ comme option defaultDate.

CSS requirejs: 

 #ui-datepicker-div.ui-monthpicker { padding: 0.2em; } #ui-datepicker-div.ui-monthpicker .ui-datepicker-calendar { display: none; }

J’ai encore une autre solution basée sur ce qui précède avec quelques améliorations. Dans mon code HTML, je cache le sélecteur de jour en ajoutant ceci, car je n’en ai qu’un sur la page:

J’initialise ensuite mon sélecteur de date comme d’autres l’ont fait et ajoute un peu de code à l’événement onChangeMonthYear: 

 $n(this).datepicker({ defaultDate: 0, changeMonth: true, changeYear: true, onChangeMonthYear: function(year, month, inst) { $(this).datepicker('setDate', new Date(year, month - 1, 1)); } });

Noter la

mois – 1

Si vous n’ajoutez pas cela, vous obtiendrez un débordement de stack car cette fonction reçoit un mois d’index basé sur 1 mais setDate utilise un mois normal basé sur 0.

J’ai fait quelque chose de similaire à cela, mais j’ai créé une “version” distincte du script datepicker et l’ai appelé monthpicker, avec ses propres sélecteurs CSS et fichier CSS. Cela signifiait que vous pouviez utiliser l’un ou l’autre ou les deux sur la même page.

La solution de Ben fonctionne parfaitement, je viens de faire un changement mineur, j’ai utilisé onChangeMonthYear au lieu de onClose: 

 onChangeMonthYear: function(year, month, inst) { var date = new Date(year, month - 1, 1); $(this).val($.datepicker.formatDate(format, date)); $(this).datepicker('setDate', date); }

Ce code fonctionne parfaitement pour moi: 

 $(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) }); }); });