web-dev-qa-db-fra.com

Comment utiliser jQuery UI Calendar/Date PIcker pour une semaine plutôt que pour un jour?

J'utilise le sélecteur de calendrier/date de l'interface utilisateur jQuery avec un grand succès au cours des deux derniers mois. Une nouvelle exigence m'a été donnée de permettre la sélection d'une semaine (dimanche - samedi) plutôt que d'un seul jour.

Quelqu'un a-t-il déjà accompli cela? 

  • en soulignant par semaine plutôt que par jour
  • afficher la date de début et la date de fin plutôt qu'une seule date dans la zone de texte/les étiquettes
javascriptjqueryasp.net-mvcjquery-ui
28
RSolberg

Sélecteur de semaine en ligne utilisant jQuery UI DataPicker (requiert jQuery UI 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>

lancez-le sur JsFiddle http://jsfiddle.net/manishma/AVZJh/light/

51
Igor Zelmanovich

Voici une autre façon de s'y prendre. -Affichez la semaine avec showWeek. - Définissez un beforeShow pour attacher un gestionnaire d'événements à l'aide de live () afin que la ligne de la semaine soit mise en surbrillance (avec le numéro de semaine) .- Détachez le gestionnaire d'événements avec die () onclose. Ceci est particulièrement pratique lorsque vous utilisez des sélecteurs de date normaux 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");

    }
});
5
Keith

J'ai créé un plugin jQuery basé sur la réponse acceptée. Obtenez-le à https://github.com/Prezent/jquery-weekpicker ou via Bower. Exemple d'utilisation:

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

Vous avez besoin des dépendances suivantes:

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

  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 ));
    }
  });
.ui-datepicker-calendar tr:hover { 
    background-color:#808080;
}
<!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>

1
jaydip jadhav

Je l'ai fait si quelqu'un est toujours intéressé: Week Picker Converter .

Est un convertisseur de petit champ qui convertit du texte ou est caché dans le sélecteur de semaine . Si quelqu'un l'utilise pour imprimer une table (depuis une base de données), il est également utilisable avec le modèle suivant sur une sélection de requête SQL:

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
0
Daniele Viti

J’ai utilisé certains des exemples ci-dessus, mais j’ai adopté une approche différente car je dois appuyer la sélection d’une semaine, mais la semaine peut commencer n’importe quel jour de la semaine et doit être modifiée en fonction d’une variable. J'ai mis en place des classes pour regrouper chaque td avec un cours hebdomadaire afin de pouvoir facilement mettre en évidence une semaine qui chevauche un tr. Dans cet exemple, datepickerStartWeekDay peut être compris entre 0 et 6, ce qui représente une semaine 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;
}
0
Good Times

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

(Je ne me souviens pas où j'ai vu cela)

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

Ensuite, vous pouvez sélectionner une semaine avec W au 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, recherchez "@" (recherchez également les guillemets) dans le fichier et ajoutez ces 3 lignes.

0
kmas