Puis-je mettre en évidence une semaine entière dans la norme de Jquery UI sélecteur de date?

Puis-je mettre en évidence une semaine entière dans la norme de Jquery UI sélecteur de date?

InformationsquelleAutor MikeN | 2010-02-08
  1. 27

    Je sais que ce post est assez ancien mais je viens de trouver ce code sur un autre site et de la pensée, ça pourrait aider.

    Le code Source de ce post : 

    <!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

    >

    • is quite interesting Et simple! +1
    • Très bonne solution. Ajouter 1 à start et end dates pour le faire fonctionner avec la norme ISO firstDay 0 (lundi)
    • De cette façon, il est préférable de changement de ces deux lignes de code pour fonctionner correctement avec firstDay = dimanche ou lundi. var f = inst.les paramètres.firstDay!=undefined ? inst.les paramètres.firstDay : $.datepicker._defaults.firstDay; startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + f); date_fin = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + f + 6);
    • 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'); });
    • A partir de maintenant, lorsque cette charge, seul le jour en cours est actif. Comment puis-je obtenir l'ensemble de la semaine en cours est-il actif?
    InformationsquelleAutor AntFalco
  2. 3

    J'ai écrit une solution à ce, qui met en lumière la semaine. Il va toujours chercher la date choisie, mais c'est très bien pour mes besoins. #semaine est la zone d'entrée qui a le datepicker attaché.

    $('#week').datepicker({
beforeShowDay: $.datepicker.noWeekends,
duration : 0,
onChangeMonthYear: function() {   setTimeout("applyWeeklyHighlight()", 100); },
beforeShow: function() { setTimeout("applyWeeklyHighlight()", 100); }
}).keyup(function() { setTimeout("applyWeeklyHighlight()", 100); });
function applyWeeklyHighlight()
{
$('.ui-datepicker-calendar tr').each(function() {
if($(this).parent().get(0).tagName == 'TBODY')
{
$(this).mouseover(function() {
$(this).find('a').css({'background':'#ffffcc','border':'1px solid #dddddd'});
$(this).find('a').removeClass('ui-state-default');
$(this).css('background', '#ffffcc');
});
$(this).mouseout(function() {
$(this).css('background', '#ffffff');
$(this).find('a').css('background','');
$(this).find('a').addClass('ui-state-default');
});
}
});
}
    InformationsquelleAutor Jeremy
  3. 2

    Voici un l'article qui est un exemple de la façon de choisir une semaine entière avec le datepicker.

    $(function()
{
$('.date-pick').datePicker({selectWeek:true,closeOnSelect:false});
});
    • Ce n'est pas la norme de JQuery UI datepicker.
    • j'ai essayé avec Yii, mais ne fonctionne pas
    InformationsquelleAutor Joseph
  4. 2

    AntFalco la réponse est grand, cependant il ne fonctionne pas bien si vous avez besoin de faire ce que j'ai fait. J'ai besoin d'un moyen de sélectionner une semaine et le premier jour de la semaine de remplir dans une zone de saisie, un clic sur ce qui a généré le datepicker. Voici le code que j'ai utilisé pour cela:

    <!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.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#ui-datepicker-div').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.datepicker').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;
$(this).attr("value",$.datepicker.formatDate( dateFormat, startDate, 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();
}
});
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
</script>
</head>
<body>
<input type="text" id="from_date" name="from_date" class="datepicker" />
<input type="text" id="to_date" name="to_date" class="datepicker" />
</body>
</html>

    Ce qui a aussi pour effet de bord de travail pour plusieurs valeurs d'entrée ainsi. Ce morceau de code est de loin le plus utile si vous avez besoin d'une sorte de "semaine" sélection. Il y a très peu de code afin d'apporter de petites modifications à tester est assez facile. En outre, il fonctionne très bien avec minDate/maxDate fonctions.

    InformationsquelleAutor cardonator
  5. 1

    Vous pouvez être en mesure de suivre les suggestions de cette discussion pour atteindre votre sélection de la semaine de la fonctionnalité: http://code.google.com/p/jquery-datepicker/issues/detail?id=13

    Malheureusement, cependant, il semble que le datepicker de jQuery ne peut pas gérer de la sélection d'une semaine entière. Il faut être personnalisée codée.

    InformationsquelleAutor Ricket
  6. 1

    C'est incroyablement en retard, mais j'étais à la recherche pour la même solution, et ne pouvait trouver de référence à ces types de réponses (c'est à dire pour un autre sélecteur de date). Dans mon cas, je l'utilise inline, donc, c'est comment ce code fonctionne. Si vous souhaitez un pop-up avec une semaine en surbrillance, vous devez modifier. Voici quelque chose qui fonctionne:

    var selectedWeek;//remember which week the user selected here
$("#inlineDIVdatepicker").datepicker({
firstDay:1,
showOtherMonths:true,
onSelect: function(dateText){
selectedWeek = $.datepicker.iso8601Week(new Date(dateText));
} ,
//set the class 'week-highlight' for the whole week
beforeShowDay: function(d){
if (!selectedWeek) { return [true,''];}
if (selectedWeek == $.datepicker.iso8601Week(d)){
return [true,'week-highlight'];   
}
return [true,''];
}
});

    Définir ensuite un peu de CSS (je n'ai pas vraiment fait de cette partie de moi-même, donc c'est moche):

    #inlineDIVdatepicker .week-highlight a {
background:none;
background-color:yellow;  
}
    • Mieux appliquer jqueryUI classes comme ui-state-active
    InformationsquelleAutor Ryley
  7. 1

    Le script met en évidence une semaine à compter de la date sélectionnée.


    Commander un exemple ici: http://jsfiddle.net/frictionless/W5GMg/

    Logique:

    beforeShowDay : est exécuté pour chaque date dans le calendrier affiché. Elle est appelée au moment de l'affichage du calendrier, et lorsqu'une date est sélectionnée.

    onSelect :
    la fonction de capture de la semaine sélectionnée à partir de la selectedDay et beforeShowDay rend la semaine sélectionnée

    Voici un extrait de code qui fonctionne avec Jquery 1.5.1 et JQuery UI 1.8.1 

    $(function () {
var _dates=new Array();
$('#datepicker').datepicker({
beforeShowDay:function(_date){
if($.inArray(_date.getTime(),_dates)>=0)
return [true,"highlighted-week","Week Range"];
return[true,"",""];
},
onSelect:function(_selectedDate){
var _date=new Date(_selectedDate);
_dates=new Array();
for(i=0;i<7;i++){
var tempDate=new Date(_date.getTime());
tempDate.setDate(tempDate.getDate()+i);
_dates.push(tempDate.getTime());
}
}
});
});
    • J'ai mis à jour le script sur jsfiddle pour tenir compte de l'espace de noms et optiomized il plus loin, mais la cruz de la solution reste la même.
    • +1 Merci! Nous nous sommes intéressés à mettre en valeur le courant de la semaine, en commençant au premier jour de la semaine, j'ai donc révisé GetWeek en conséquence.
    • À l'aide de beforeShowDay retourne toujours vrai ne vous permettra pas de désactiver des dates précises dans le cas où vous souhaitez limiter la sélection de la date par exemple, min/max date, qui sont actuellement traitées par Datepicker.
    InformationsquelleAutor frictionlesspulley
  8. 1

    EDIT: Revêtements de réponse est très bien, sauf que la question était de savoir comment sélectionner toute la semaine (pas les 6 jours suivant ce que l'utilisateur clique sur). Il a été recommandé que je copie mon patch ici.

    C'est une version simplifiée de ce que j'utilise sur mon site. Notez que la semaine sélecteur est rattaché à un <span> tag afin de montrer les premier et dernier jours de la semaine. Cela nécessite un bouton de déclenchement références /images/calendrier.png.

    Changement requis:

    <style type="text/css">
.highlighted-week a.ui-state-default{
background: #FFFFFF;
border: 1px solid #AAAAAA;
color: #212121;
font-weight: normal
}
</style>
<!-- include jquery and jquery-ui here -->
<script type="text/javascript">
//This $(function()) block could be moved to another file. It's what I did.
$(function() {
var internal = 0;
if (typeof SVG == 'undefined') SVG = {};
if (typeof SVG.Weekpicker == 'undefined') SVG.Weekpicker = {};
SVG.Weekpicker.GetWeek = function(_selectedDate) {
var week = new Array();
/* ***NOTE*** This is the only line required to "fix" Frictionless' code. */
_selectedDate.setDate(_selectedDate.getDate()-_selectedDate.getDay());
for (i = 0; i < 7; i++) {
var tempDate = new Date(_selectedDate.getTime());
tempDate.setDate(tempDate.getDate() + i);
week.push(tempDate.getTime());
}
return week;
};
SVG.Weekpicker.Init = function(selector) {
var elem = $(selector);
var insert = $('<input type="hidden" name="weekpicker'+(++internal)+'" value="'+elem.html()+'" />');
SVG.Weekpicker._dates = SVG.Weekpicker.GetWeek(new Date());
insert = insert.insertAfter(elem);
insert.datepicker({
beforeShowDay: function(_date) {
if ($.inArray(_date.getTime(), SVG.Weekpicker._dates) >= 0)
return [true, "highlighted-week", "Week Range"];
return [true, "", ""];
},
onSelect: function(_selectedDate) {
var _date = new Date(_selectedDate);
SVG.Weekpicker._dates = SVG.Weekpicker.GetWeek(_date);
var start = new Date(SVG.Weekpicker._dates[0]);
var end = new Date(SVG.Weekpicker._dates[6]);
$(elem).html(($.datepicker.formatDate('MM d, yy', start, '')+' &mdash; '+$.datepicker.formatDate('MM d, yy', end, ''))+'&nbsp;&nbsp;');
},
showOn: "button",
buttonImage: "/images/schedule.png",
buttonImageOnly: false,
showAnim: "slideDown",
});
};
});
$(document).ready(function() {
//Attach a week picker to the weekpicker <span> tag.
SVG.Weekpicker.Init("#weekpicker");
}
</script>
<body>
<span id="weekpicker"></span>
</body>
    • Vous devriez poster le code ici, pas sur un autre site que possible est retiré ou les prises de décisions votre réponse ici incomplète.
    InformationsquelleAutor EpicVoyage
  9. 1

    Je cherchais à faire la même chose mais il voulait aussi le champ de saisie pour afficher la semaine sélectionnée gamme, voilà ce que j'ai fait (en gros, utiliser le altField pour stocker la date choisie, mais d'afficher en forme la semaine de la plage dans le champ de saisie qui est remplacée par la date réelle à l'aide de la datepicker beforeShow de rappel. Coffeescript est ci-dessous; gist peuvent être trouvés ici: https://gist.github.com/2048010

        weekchooser = -> 
$('#datepicker').datepicker({
dateFormat: "M d, yy",
altFormat:  "M d, yy",
altField:       "#actualdate",
selectWeek: true,
firstDay:       1,
showOtherMonths: true,
selectOtherMonths: true,
beforeShow: -> 
$('#datepicker').val($('#actualdate').val())
onClose: (date) ->
reformatWeek(date)
this.blur()
}).click -> 
currentDay = $('.ui-datepicker-current-day')
currentDay.siblings().find('a').addClass('ui-state-active')
calendarTR = $('.ui-datepicker .ui-datepicker-calendar tr');
calendarTR.live 'mousemove', (event) ->
$(this).find('td a').addClass('ui-state-hover');
calendarTR.live 'mouseleave', (event) ->
$(this).find('td a').removeClass('ui-state-hover');
reformatWeek = (dateText) ->
$('#datepicker').datepicker('refresh')
current = parseInt($('.ui-datepicker-current-day').find('a').html())
weekstart = parseInt($('.ui-datepicker-current-day').siblings().find('a').first().html())
weekend     = parseInt($('.ui-datepicker-current-day').siblings().find('a').last().html())
pattern = ///
^([a-zA-Z]+)\s+([0-9]{1,2})(,.*)
///
[month, day, year] = dateText.match(pattern)[1..3]
date = if weekstart > current
first_month = relativeMonth(month, -1)
"#{first_month} #{weekstart} - #{month} #{weekend}#{year}"
else if weekend < current
last_month = relativeMonth(month, 1)
"#{month} #{weekstart} - #{last_month} #{weekend}#{year}"
else
"#{month} #{weekstart} - #{weekend}#{year}"
$('#datepicker').val( date )
relativeMonth = (month, c) -> 
monthArray = $('#datepicker').datepicker('option', "monthNamesShort")
index = monthArray.indexOf(month)
if c > 0
return if index + c > monthArray.length - 1 then monthArray[0] else monthArray[index + c]
else
return if index + c < 0 then monthArray[monthArray.length - 1] else monthArray[index + c]
    InformationsquelleAutor mrampton
  10. 1

    J'ai créé un plugin jQuery fondées sur le dessus de réponse. 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'
});
    • Très bien, merci!
    InformationsquelleAutor Sander Marechal
  11. 0

    Vous pouvez vérifier l'répondu à la question dans le lien ci-dessous

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

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

    });

    InformationsquelleAutor HRI
  12. 0

    N'est pas de travailler avec de multiples cueilleurs /dernière jquery.l'interface utilisateur.
    Essayez cette petite réécriture:

    jQuery(function() {
var startDate; //closure
var endDate;
var baseAttachHandler = jQuery.datepicker._attachHandlers;
jQuery.datepicker._attachHandlers = function(inst) {
baseAttachHandler.apply(this, [inst]);
var element_data = jQuery._data(inst.dpDiv.get(0));
var ori_handler_mouseover = element_data.events.mouseover[0].handler;
var ori_handler_mouseout = element_data.events.mouseout[0].handler;
//remove handlers
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseover');
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseout');
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseover');
inst.dpDiv.undelegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseout');
inst.dpDiv.find(".ui-datepicker-calendar tr").unbind('mouseover');
inst.dpDiv.find(".ui-datepicker-calendar tr").unbind('mouseout');
//attach proper ones
if (this._get(inst, "weekSelector")) {
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseover', ori_handler_mouseover);
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next", 'mouseout', ori_handler_mouseout);
inst.dpDiv.find(".ui-datepicker-calendar tr").bind('mouseover', function() { 
jQuery(this).find('td a').addClass('ui-state-hover');
});
inst.dpDiv.find(".ui-datepicker-calendar tr").bind('mouseout', function() { 
jQuery(this).find('td a').removeClass('ui-state-hover');
});
} else {
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseover', ori_handler_mouseover);
inst.dpDiv.delegate("button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a", 'mouseout', ori_handler_mouseout);
}
};
jQuery.datepicker.calcWeekBoundaries = function () {
var date = jQuery(this).datepicker('getDate');
if (date) {
var tmp = date.getDay();
if (tmp == 0) { //starting with monday, i'm italian ;-)
endDate = date;
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 6);
} else {
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - tmp + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - tmp + 7);
}
}
};
jQuery("#yourcontrol").datepicker(
jQuery.extend({}, jQuery.datepicker.regional["yourlanguage"], {
showOtherMonths: true
, selectOtherMonths: true
, changeMonth: true
, changeYear: true
, onSelect: function(dateText, inst) { 
if (jQuery.datepicker._get(inst, "weekSelector")) {
jQuery.datepicker.calcWeekBoundaries.apply(this, []);
jQuery(this).datepicker('setDate', startDate);
}
inst.input.trigger("change");
}
, beforeShowDay: function(date) {
var inst = jQuery.data(this, "datepicker");
var cssClass = '';
if (jQuery.datepicker._get(inst, "weekSelector") && date) {
if(date >= startDate && date <= endDate) {
cssClass = 'ui-state-active';
}
}
return [true, cssClass];
}
, beforeShow: function(input, inst) {
jQuery.datepicker.calcWeekBoundaries.apply(this, []);
}
, weekSelector: true //the magic is here
})
);
});
    InformationsquelleAutor Samuele Diella