J'ai traversé cet article JQuery UI DaysPicker à montrer un mois seulement qui est très utile pour moi afin de pirater l'interface utilisateur du sélecteur DateTime pour convenir à ma situation.
Mais comme j'ai plusieurs paterneurs DateTime sur la même forme, cela se produit. L'affichage CSS : Aucun est de "masquer" les jours à ne pas montrer. Mais si j'ai plusieurs paillettes DateTime sur le même formulaire, mais seulement que j'aimerais faire un de ce mois-mois, comment puis-je y parvenir? Avec la THW CSS, il fait tous les jours sur la disparition de l'interface utilisateur du calendrier DateTime, car le CSS modifiera l'attribut du calendrier .ui-date-datePicker. Toute suggestion est la bienvenue.
7 Réponses :
J'ai fait quelque chose de similaire à celui-ci, mais j'ai fait une "version" séparée du script DatePicker et l'a appelée Monthpicker, avoir ses propres sélecteurs CSS et fichier CSS. Cela signifiait que vous pourriez utiliser ou les deux sur la même page.
Bonjour merci pour votre gentille réponse, vous pouvez expliquer davantage à ce sujet, d'accord, je suis en double sur un autre fichier de fichier .js monthpicker.js de jquery.ui.datetatepicker.js, alors quelle devrait être la prochaine étape expliquer par vous "avoir ses propres sélecteurs CSS et Fichier CSS "?
@Darren - Vous devez choisir le code et voir comment le script attribue des sélecteurs / ID à des éléments qu'il les crée et les modifient pour utiliser 'Monthpicker' plutôt que 'DatePicker' par exemple. Vous devez ensuite copier le fichier CSS et effectuer des modifications correspondantes là-bas.
Eh bien, il suffit de vous demander si je peux utiliser le héritage CSS pour simplement sélectionner la classe .UI-DatationPicker-calendar qui appartient à mon seul salePicker dans
Actuellement, DatePicker ne crée que 1 élément par page que toutes les contributions «DaysPicker» partagent, pourquoi la réponse à la question liée ne fonctionne pas. L'événement Peforeshow n'autorise pas l'édition de l'élément DatePicker avec .AddClass () ou .CSS () (car la structure de l'élément est actualisée à partir du script DatePicker lors de son affichage.)
Pour contourner cela, j'ai trouvé que l'événement de mise au point Pour que l'élément d'entrée semble exécuter le code après l'affichage de DatePicker. C'est une solution de contournement simple à un problème frustrant. P>
Voici mon code: P>
<!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 qui appelle la date datole avec le paramètre vide? Qu'est ce que ça fait?
@Nassign - Il y a deux satellistes sur cette page. L'appel DatePicker avec le paramètre vide est uniquement pour créer le second salepicker avec la fonctionnalité par défaut.
Merci. J'ai trouvé un site qui ajoute un bouton personnalisé sur le panneau de boutons. Mais le bouton disparaît chaque fois que le mois est modifié et que le bouton Maintenant est modifié. Toute suggestion? Voici le lien Site: Csharptechnies.blogspot.com/ 2010/12 / ...
@Nassign - Vous obtiendrez probablement une réponse plus rapide et meilleure si vous créez une nouvelle question.
Fonctionne bien, mais je reçois un problème de positionnement CSS lorsque la datePicker essaie d'apparaître au-dessus de l'entrée. J'ai soulevé une nouvelle question ici: Stackoverflow.com/Questtions/5816749/...
Cette solution a un bug dans IE.
lien Jsfiddle Essayez de cliquer deux fois plus rapidement dans le bouton précédent du "mois de fin". Le calendrier ne se cache plus. La raison est que l'événement de mise au point ne se déclenche pas dans IE lorsque vous cliquez deux fois plus rapidement dans le bouton précédent (ou suivant).
J'ai utilisé une version légèrement différente du code que Ben posté. Au lieu de s'appuyer sur l'événement de mise au point, j'ai ajouté
.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
display: none;
}
J'aimerais avoir lu ceci. Cette approche empêche le positionnement du calendrier qui se trompe lorsqu'il apparaît au-dessus de l'entrée. (Voir: Stackoverflow.com/Questtions/5816749/... )
La solution précédente ne fonctionnera pas avec différents formats. De plus, SetDate ne fera rien dans PEFORSHOW. Bonne façon de le faire sera:
#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 la classe UI-Monthpicker, sinon le calendrier "clignote" avant que la date picker soit cachée. Settimeout (Fonction () {inst.dpdiv.removeclass ("UI-Monthpicker");}, 200);
La solution de Ben fonctionne parfaitement, vient de faire un changement mineur, j'ai utilisé Onchangemonthyear au lieu de onclose:
J'ai encore une autre solution basée sur ce qui précède avec quelques améliorations. Dans mon HTML, je cache le sélecteur de jour en ajoutant ceci comme je n'en ai qu'un sur la page:
$n(this).datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
onChangeMonthYear: function(year, month, inst) {
$(this).datepicker('setDate', new Date(year, month - 1, 1));
}
});