jQuery-ui Datepicker返回选定周的第一天

时间:2013-08-28 08:12:59

标签: javascript jquery jquery-ui textbox datepicker

如何编辑我的日期选择器以返回所选周的第一天?目前,它始终返回所选日期的确切日期。

我想要的是:如果我选择“2013年8月28日星期三”,则datepicker应返回“2013年8月26日星期一”。我怎样才能做到这一点?

如果我在textboxfor @id="#startDate中写不起作用。

@Html.TextBoxFor(m => m.datS, new { @type = "text", @width = "80", @maxlength = 10, @readonly = "true" })

@Html.TextBoxFor(m => m.datE, new { @type = "text", @width = "80", @maxlength = 10, @readonly = "true" })

这是针对datepicker的javascript。

 $(function () {
         var startDate;
         var endDate;
         var dateToday = new Date();
         var selectCurrentWeek = function () {
             window.setTimeout(function () {
                 $('#datS, #datE').find('.ui-datepicker-current-day a').addClass('ui-state-active')
             }, 1);
         }
         $('#datS, #datE').datepicker({
             onSelect: function (dateText, inst) {
                 var date = $(this).datepicker('getDate');
                 startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() - 1);
                 endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                 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();
             },
             onClose: function (selectedDate, test) {
                 var day = ('0' + (parseInt(test.selectedDay))).slice(-2);
                 var month = ('0' + (test.selectedMonth)).slice(-2);
                 var year = test.selectedYear;
                 var tempDate = new Date(year, month, day);
                 if (this.id == "datS") {
                     tempDate.setDate(tempDate.getDate() + 1);
                     $("#datE").datepicker("option", "minDate", tempDate);
                 }
                 if (this.id == "datE") {
                     tempDate.setDate(tempDate.getDate() - 1);
                     $("#datS").datepicker("option", "maxDate", tempDate);
                 }
             }
         });

2 个答案:

答案 0 :(得分:1)

FIDDLE

$(function() {
    $( "#datepicker" ).datepicker({
        showWeek: true,
        firstDay: 1,
        onSelect: function(date){
         var d = new Date(date);
            var index = d.getDay();
            if(index == 0) {
             d.setDate(d.getDate() - 6);
            }
            else if(index == 1) {
             d.setDate(d.getDate());
            }
            else if(index != 1 && index > 0) {
              d.setDate(d.getDate() - (index - 1));
            }
            $(this).val(d);
        }

    });
});

答案 1 :(得分:0)

我创建了一个可以执行此操作的jQuery插件。在https://github.com/Prezent/jquery-weekpicker或通过Bower获取。用法示例:

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