jQuery Girl
  1. jQuery Girl
  3. jQuery DatePicker – sélection d’une semaine entière
Intereting Posts
javascript / jquery: Besoin de sous-chaîne dans jquery Insérer une colonne de table avec jQuery jQuery Mobile URL convertissant le hachage (#) en% 23 sur le navigateur Android Jquery Selector qui recherche des événements Formes meteors et alpaga Accéder à la fonction dans un autre fichier .js avec $ .getScript Changer la taille de la police SVG en un clic de souris Obtenir le nom du contrôleur MVC en fonction Javascript JQuery Valider le type de fichier d’entrée comment désactiver le bouton de retour du téléphone sous Android à l’aide de Jquerymobile, PhoneGap jquery mobile multi html retournez à la première page Jquery: erreur de syntaxe, expression non reconnue: nth-child () Définition de la couleur de fond des options de sélection dans JQuery Supprimer l’élément de jQuery à chaque boucle Empêcher le spam de la fonction bouton à appeler

jQuery DatePicker – sélection d’une semaine entière

J’utilise deux datepickers jQuery pour sélectionner une plage de dates. Est-il possible de sélectionner une semaine entière? Cela signifie que lors de l’ouverture du sélecteur de date de début, il y aura deux méthodes de sélection:

  • Sélectionnez une date de début unique (sans affecter le sélecteur de date de fin).
  • Sélectionnez une semaine entière (qui définirait le sélecteur de date de début sur le premier jour de la semaine, puis le sélecteur de date de fin sur le dernier).

Dans le calendrier asp, vous pouvez obtenir un résultat similaire en définissant la propriété SelectionMode sur “DayWeek”, mais je ne trouve aucun moyen de réaliser cela dans jQuery datepicker. Cela peut-il être fait?

Voici comment j’ai fini par implémenter ceci: 

// A click on a week number cell in the weeks column of the start datepicker $("td.ui-datepicker-week-col").live("click", function() { // Simulate a click on the first day of the week $(this).next().click(); // Grab the date, and set the end of the week in the end datepicker var fromDate = $("#inputStartDate").datepicker("getDate"); var toDate = fromDate; toDate.setDate(fromDate.getDate() + 6); $("#inputEndDate").datepicker("setDate", toDate); });

Voici un exemple où les deux champs de saisie peuvent être cliqués: 

  $(document).ready(function(){ // date picker for Export part $(".datePicker").datepicker( { dateFormat: 'yymmdd', showWeek: true, firstDay: 1, weekHeader: "", showOtherMonths: true, selectOtherMonths: true } ).focus(function(){ // prevent focus event firing twice var $this = $(this); var now = +new Date(); var lastClicked = $this.data("lastClicked"); if (lastClicked && (now - lastClicked) < 100) { // Don't do anything return; } $this.data("lastClicked", now); var el = this; // A click on a week number cell in the weeks column of the start datepicker $("td.ui-datepicker-week-col").click(function(){ // Simulate a click on the first day of the week $(this).next().click(); var selectedDate = $(el).datepicker("getDate"); $("#inputStartDate").datepicker("setDate", selectedDate); var toDate = selectedDate; toDate.setDate(toDate.getDate() + 6); $("#inputEndDate").datepicker("setDate", toDate); }); }); });