JQuery Datetime picker - la Nécessité de choisir le mois et l'année seulement

Je suis passé par ce post jQuery UI DatePicker pour montrer les mois de l'année seulement qui est très utile pour moi dans le but de pirater le datetime picker de l'INTERFACE utilisateur pour l'adapter à ma situation.

Mais comme j'ai plusieurs datetime picker sur le même formulaire, ce qui se passe. Le css display:none but est de "cacher" les jours de ne pas être montré. Mais si j'ai plusieurs datetime picker sur la même forme, mais un seul, je voudrais faire une de il monthpicker, comment puis-je y parvenir? Avec le css, il rend tous les jours sur l'ensemble datetime calendrier de l'INTERFACE utilisateur disparaître depuis le css va changer l'attribut de la .ui-datepicker-calendrier. Toutes les suggestions sont les bienvenues.

InformationsquelleAutor Darren | 2010-11-02

Actuellement, datepicker crée seulement 1 élément par page que tous les "datepicker' entrées à partager, c'est pourquoi la réponse à la question ne fonctionne pas. Le beforeShow événement ne permettant pas l'édition du datepicker élément .addClass() ou .css() (comme la structure de l'élément est actualisé à partir du datepicker script quand il montre.)

Pour contourner ce problème, j'ai trouvé que les événements de focus de l'élément d'entrée s'affiche à exécuter du code après le datepicker est indiqué. C'est une solution simple à un problème frustrant.

Voici mon code:

<!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/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.month-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) {
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', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
$('.date-picker').datepicker();
$('.month-picker').focus(function () {
$('.ui-datepicker-calendar').addClass('hideDates');
});
});
</script>
<style>
.hideDates {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date:</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="endMonth">End Month:</label>
<input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>

Quelle est la ligne de l'appel de la datepicker avec paramètre vide pour? que faut-il faire?
Il y a deux datepickers sur cette page. Le datepicker appel avec vide paramètre est uniquement pour créer le deuxième datepicker avec la fonctionnalité par défaut.
Merci. J'ai trouvé un site qui ajoute un bouton personnalisé sur le bouton du panneau. Mais le bouton disparaissent à chaque fois que le mois est modifié et que le bouton est changé. Toute suggestion? Voici le lien du site : csharptechies.blogspot.com/2010/12/...
Vous obtiendrez probablement un meilleur et plus rapide à répondre si vous créez une nouvelle question.
Fonctionne bien mais j'ai un problème de positionnement css lorsque le datepicker essaie de paraître au-dessus de l'entrée. J'ai soulevé une nouvelle question ici: stackoverflow.com/questions/5816749/...
cette solution a un bug dans IE. <br/> jsfiddle lien essayez de cliquer deux fois très rapidement dans le précédent bouton de "fin de Mois" sélecteur de date. le calendrier n'est plus plus le cacher. Le motif est événements de focus ne marche pas de feu dans IE lorsque vous cliquez sur très vite deux fois dans le précédent (ou suivant) bouton.

InformationsquelleAutor Ben Koehler

3

J'ai utilisé une version légèrement différente du code de Ben posté.
Au lieu de s'appuyer sur les événements de focus, j'ai ajouté
```
inst.dpDiv.addClass('monthonly');
```
dans le beforeShow méthode et
```
inst.dpDiv.removeClass('monthonly');
```
dans le onClose. Ce qui ajoute et supprime une classe sur la commune div utilisée par tous les datepicker widgets. Le calendrier de la date div peut ensuite être ciblé dans le css à l'aide
```
.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
display: none;
}
```
- J'avais lu cela. Cette approche empêche le positionnement du calendrier se tromper lors de la comparution au-dessus de l'entrée. (voir: stackoverflow.com/questions/5816749/...)
- C'est super, merci!
InformationsquelleAutor Mike

Solution précédente ne fonctionne pas avec des formats différents. Aussi setDate ne fait rien dans beforeShow. Bonne façon de le faire sera:

beforeShow: function(input, inst) {
var dateString = $(this).val();
var options = new Object();
if (dateString.length > 0) {
options.defaultDate = $.datepicker.parseDate("dd-" + $(this).datepicker("option", "dateFormat"), "01-" + dateString);
}
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 les différents formats de date et la date de retour du champ defaultDate option.

Nécessaire CSS:

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

J'ai ajouté un délai d'attente lors de la suppression de l'interface utilisateur-monthpicker classe, sinon le calendrier "clignote" avant le datepicker est caché. setTimeout(function () { inst.dpDiv.removeClass("ui-monthpicker"); }, 200);

InformationsquelleAutor Zeljko

2

J'ai encore une autre solution basée sur le dessus avec quelques améliorations. Dans mon code HTML, je me cache dans la journée sélecteur en ajoutant ce que je n'ai qu'une sur la page:
```
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
```
J'ai ensuite initialiser mon datepicker comme d'autres l'ont fait et ajouter un peu de code pour le onChangeMonthYear événement:
```
$n(this).datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
onChangeMonthYear: function(year, month, inst) {
$(this).datepicker('setDate', new Date(year, month - 1, 1));
}
});
```
Remarque: le

mois - 1

Si vous n'ajoutez pas de cela, vous obtiendrez un débordement de la pile parce que cette fonction reçoit un index basé sur 1 mois, mais setDate utilise un normal en fonction de 0 mois.

InformationsquelleAutor Oly
1

J'ai fait quelque chose de semblable, mais a fait une autre "version" de la datepicker script et l'a appelé monthpicker, a ses propres sélecteurs CSS et le fichier CSS. Cela signifie que vous peuvent utiliser l'une ou les deux sur la même page.
- Bonjour Merci pour votre aimable réponse, peut expliquer d'ailleurs à ce sujet, bien que j'en double un autre .fichier js appel monthpicker.js à partir de jquery.ui.datetimepicker.js, donc ce devrait être la prochaine étape expliquer par vous "a ses propres sélecteurs CSS et le fichier CSS"?
- Vous devez choisir le code et de voir comment le script est d'attribuer des sélecteurs/id sur des objets qu'il crée et modifier l'utilisation de 'monthpicker" plutôt que de "datepicker" par exemple. Vous devez ensuite copier le fichier CSS et effectuer de correspondance des modifications.
- Ainsi, il suffit de me demander si je peux utiliser l'héritage css à il suffit de sélectionner la classe .ui-datepicker-calendrier qui appartient à mon seul datepicker dans <input type="text" id="monthPicker"/> ?
InformationsquelleAutor Paddy

Ben la solution fonctionne parfaitement, juste un petit changement, 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);
}

InformationsquelleAutor rubish

Ce code est parfaitement bien fonctionné 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)
});
});
});
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

InformationsquelleAutor Leniel Maccaferri

Vous devez vous connecter pour publier un commentaire.