Comment faire pour utiliser jQuery UI Calendrier/Sélecteur de Date pour la semaine plutôt que le jour?

J'ai été en utilisant l'INTERFACE utilisateur de jQuery Calendrier /Sélecteur de Date avec un grand succès au cours des deux derniers mois. J'ai reçu une nouvelle exigence pour permettre une semaine pour être sélectionné (Sun - Sat) plutôt que d'une seule journée.

Quelqu'un a accompli ceci avant?

  • mis en exergue par semaine plutôt que le jour
  • spectacle date de début et date de fin au lieu d'une seule date dans la zone de texte /étiquettes
InformationsquelleAutor RSolberg | 2009-08-17
  1. 54

    Inline semaine sélecteur à l'aide de jQuery UI DataPicker (requiert l'INTERFACE utilisateur de jQuery 1.8+):

    <!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.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) { 
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<div class="week-picker"></div>
<br /><br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>

    l'exécuter sur JsFiddle http://jsfiddle.net/manishma/AVZJh/light/

    • C'est super mais ne fonctionne que pour l'affichage de datepicker (fixé à la div ou span). Des suggestions pour modifier cette whena ttached régulièrement champ de texte?
    • Petite question...quelle est la bonne startDate et endDate si j'ai mis 'firstDay: 3'
    • var $calendarTR = $('.ui-weekpicker .ui-datepicker-calendar tr'); $calendarTR.live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); sa ne fonctionne pas jquery-1.9.0b1.min.js versions ci-dessus.
    • Remplacer .live() avec .sur() $calendarTR.sur('mousemove', function() { $(this).find('td').addClass('ui-state-hover'); });
    • REMARQUE - live() lié à l'événement pour avenir Nœuds DOM et sur les() ne marche pas. Il y a quelques modifications à apporter. Voici une démo jsfiddle.net/TZtes/1 pour une raison quelconque, il ne fonctionne pas dans le violon, probablement à cause de la façon dont l'intérieur html de l'enfant est manipulé, mais il ne le travail dans tout le programme d'installation (j'ai copié et collé mon code). Donc oui, je voulais juste partager une version qui fonctionne avec jQuery 1.9+
    • C'est exactement ce que je recherche. Mais j'ai aussi besoin de sélectionner une date de quelques temps. L'utilisateur permet de sélectionner une plage de dates ou d'une date spécifique. Comment puis-je faire dans cette?
    • le code de remplacement pour jQuery 1.7+ : remplacer $('.week-sélecteur .ui-datepicker-calendrier tr').live('mousemove', function() { $(this).find('td').addClass('ui-state-hover'); }); $('.week-sélecteur .ui-datepicker-calendrier tr').live('mouseleave', function() { $(this).find('td').removeClass('ui-state-hover'); }); avec : $(document).sur( 'mousemove','.week-sélecteur .ui-datepicker-calendrier tr',function() {$(this).find('td').addClass('ui-state-hover'); }); $(document).sur('mouseleave','.week-sélecteur .ui-datepicker-calendrier tr',function() {$(this).find('td').removeClass('ui-state-hover'); });
    • Wow, c'est la seule chose que je peux dire à cette réponse. C'est ce que je cherche. Merci des hommes, une grande aide

    InformationsquelleAutor Igor Zelmanovich
  2. 6

    Voici une autre manière à y vont.
    -Affichage de la semaine avec showWeek.
    - Définir un beforeShow à associer un gestionnaire d'événement à l'aide de live() donc la ligne de la semaine est mise en évidence (y compris le numéro de la semaine).
    - Détacher le gestionnaire d'événement avec die() onclose. C'est particulièrement pratique lorsque vous utilisez normal datepickers ailleurs dans votre code.

    $( ".week-picker" ).datepicker({
dateFormat: "yy-mm-dd",
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
beforeShow: function(dateText, inst) { 
//for week highighting
$(".ui-datepicker-calendar tr").live("mousemove", function() { 
$(this).find("td a").addClass("ui-state-hover"); 
$(this).find(".ui-datepicker-week-col").addClass("ui-state-hover");
});
$(".ui-datepicker-calendar tr").live("mouseleave", function() { 
$(this).find("td a").removeClass("ui-state-hover");
$(this).find(".ui-datepicker-week-col").removeClass("ui-state-hover");      
});
},
onClose: function(dateText, inst) { 
var wk = $.datepicker.iso8601Week(new Date(dateText));
if (parseInt(wk) < 10) {
wk = "0" + wk;
}           
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
if (isNaN(wk)) {
$(this).val("");
} else {
$(this).val(year + ";" + wk);
}
//disable live listeners so they dont impact other instances
$(".ui-datepicker-calendar tr").die("mousemove");
$(".ui-datepicker-calendar tr").die("mouseleave");
}
});
    • C'est une excellente solution, et travaille en tant que bien. Seulement, je voudrais ajouter une petite modification; changement $(".ui-datepicker-calendar tr") à $(".ui-datepicker-calendar tbody tr") (ajout de tbody en deux endroits). De cette façon, la "Semaine" dans l'en-tête de la table ne sera pas sauter lorsque la surbrillance. @Stijn Van Loo peut-être aussi intéressés.
    InformationsquelleAutor Keith
  3. 5

    J'ai créé un plugin jQuery basé sur la accepté de répondre. L'obtenir à https://github.com/Prezent/jquery-weekpicker ou par l'intermédiaire de la Charmille. Exemple d'utilisation:

    $('#selector').weekpicker({
startField: '#date-start',
endField: '#date-end'
});
    InformationsquelleAutor Sander Marechal
  4. 1

    Vous avez besoin de les dépendances suivantes:

    1. jquery.js
    2. jquery-ui.min.js
    3. jquery-ui.css

    JS:

      var startDate;
var endDate;
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
$(this).val($.datepicker.formatDate( dateFormat, startDate, inst.settings ) + " - " + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
}
});

    CSS:

    .ui-datepicker-calendar tr:hover { 
background-color:#808080;
}

    HTML:

    <!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.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" class="date-picker" />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
</body>
</html>

    InformationsquelleAutor jaydip jadhav
  5. 0

    J'ai modifié le jqueryui-1.10.2.js à la ligne 8123 :

    (Je ne me souviens pas où je l'ai vu)

    case 'W':  
output += this.iso8601Week(new Date(date.getFullYear(), date.getMonth(), date.getDate()));
break;

    Ensuite, vous pouvez sélectionner la semaine avec un " W " dans le format de date ==> dateFormat: 'yy-W'

    $("#your_datepicker").datepicker ({ firstDay: 1, showWeek: true, showOtherMonths: true, dateFormat: 'yy-W'});

    Si vous avez une version précédente de jqueryui, recherche pour "@" (recherche de la cite aussi) dans le fichier et ajouter ces 3 lignes.

    • Bien que cette solution peut fonctionner, ad-hoc, les correctifs des bibliothèques de tiers n'est pas une bonne idée car il garantit votre code de la consommation va se briser si/lorsque la bibliothèque est mis à jour.
    • Vous avez absolument raison. 😉 Mais vous savez, parfois, vous voulez briser les règles ! L'ANARCHIE !!!
    InformationsquelleAutor kmas
  6. 0

    J'ai utilisé certains des exemples ci-dessus, mais a pris une approche différente parce que j'ai besoin à l'appui de la sélection d'une semaine, mais la semaine peut commencer n'importe quel jour de la semaine et les besoins de changement, basé sur une variable. J'ai mis en place des classes de groupe de chaque td avec une semaine de classe pour que je puisse facilement mettre en évidence une semaine qui chevauche un tr. Dans cet exemple, datepickerStartWeekDay peut être de 0 à 6 représente une semaine à compter du dimanche au samedi.

    Voici mon code:

    var $elem = $("input.my-date-picker");
var weekCounter = 1;
var datepickerStartWeekDay = 1;
options = {
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
onClose: function (dateText, inst) {
weekCounter = 1;
},
onSelect: function(dateText, inst) {
if (datepickerStartWeekDay != null) {
var elem = $(this);
var date = elem.datepicker('getDate');
var curDayNum = date.getDay();
var offset;
if (curDayNum > datepickerStartWeekDay) {
offset = -(curDayNum - datepickerStartWeekDay);
}
else {
offset = -(7 - (datepickerStartWeekDay - curDayNum));
}
var wkStartDate = new Date(date.addDays(offset));
elem.val(wkStartDate);
}
},
beforeShowDay: function(date) {
var retClass;
//datepickerStartWeekDay:  0 = Sunday.. 6 = Saturday
//Set up weeks based on the start day with classes.
//week1, week2, week3, etc based on the start day of the week
if (datepickerStartWeekDay != null) {
if (date.getDay() == datepickerStartWeekDay) {
weekCounter += 1;
}
retClass = [true, 'week' + weekCounter];
}
else {
retClass = [true, ''];
}
return retClass;
},
onChangeMonthYear: function(year, month, inst) {
weekCounter = 1;
}
};
$elem.datepicker(options);
//Event to list for mouseover for week selection
$(".ui-datepicker-calendar td").live('mouseover', function (ev) {
var targetElem = $(ev.currentTarget);
targetElem.closest("tbody").find(".ui-week-hover").removeClass("ui-week-hover");
for (var i = 0; i < 8; i++) {
if (targetElem.hasClass("week" + i)) {
targetElem.closest("tbody").find(".week" + i).addClass("ui-week-hover");
continue;
}
}
});`

    //CSS

    .ui-week-hover a {
background-color: #eef6f9 !important;
}
    InformationsquelleAutor Good Times
  7. 0

    J'ai fait ce que si quelqu'un est intéressé: Semaine Sélecteur De Convertisseur.

    Est un petit champ convertisseur qui permet de convertir le texte ou caché dans la semaine du sélecteur.
    Si quelqu'un est de l'utiliser pour imprimer un tableau (à partir de la base de données) c'est utilisable aussi bien avec le motif suivant sur une Requête SQL select:

    select
'<span class="displayWeek">'
|| week_field
|| '</span><input type="hidden" value="week_field" id="id_field" />'
|| '<i class="fa fa-calendar showCalendar" aria-hidden="true"
style="cursor:pointer;margin-left: 10px;"
onclick="javascript:showWeekCalendar(this, additionalFunction);"></i>'
as "WeekPicker"
from dual
    InformationsquelleAutor Daniele Viti
  8. 0
    $(function () {
var date = $('#FromDate').datepicker('getDate');
date.setMonth(date.getMonth() + 1);
var year = date.getFullYear(); //get year
var month = date.getMonth();
var date1 = date.getDate();
$("#ToDate").datepicker("setDate", date);
$("#ToDate").datepicker({
//In Datepicker set the Calendar display start with Monday
firstDay: $('#FromDate').datepicker('getDate'),
//stepMonths: 0 ,
//month: date.getMonth(), 
showOtherMonths: true,
selectOtherMonths: true,
startDate: new Date(month, date1, year), //set it here
endDate: new Date(month, '31', year + 1),
beforeShowDay: function (date) {
//var monday = new Date("June 1, 2013 00:00:00"); Used it for testing
//Get today's date
var monday = $('#FromDate').datepicker('getDate');
//Set the time of today's date to 00:00:00
monday.setHours(0, 0, 0, 0);
//alert(monday.getDay() + ' : ' + monday.getDate() + ' : ' + (monday.getDay() || 7) + ' : ' + monday); Used it for testing
/*
Below Line sets the Date to Monday (Start of that Week)
(monday.getDay() || 7) returns the value of getDay()
ie., [ 1 - Mon, 2 - Tue, 3 - Wed, 4 - Thu, 5 - Fri, 6 - Sat ]
except for Sunday where it returns 7.
The return value is used to calculate the Date of that Week's Monday
*/
monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7));
//Set the Date to Monday
var sunday = new Date(monday);
//Now add 6 to Monday to get the Date of Sunday (End of that Week)
sunday.setDate(monday.getDate() + 6);
//Now return the enabled and disabled dates to datepicker
return [(date >= monday && date <= sunday), ''];
},
});
//Set the date format to dd/mm/yy ie., 30/10/1989
$("#ToDate").datepicker("option", "dateFormat", "mm/dd/yy");
});
    InformationsquelleAutor nilesh soma