javascript - jQuery datePicker 周选择

标签 javascript jquery datepicker

我有一个 jQueryUI 日期选择器，我试图获取代码来选择所选日期的特定周，它适用于除周日之外的每天。 当我选择星期日时，会显示下一周，但它应该显示当前一周。例如，如果我选择 5 月 9 日，则范围为 2016年5月9日至5月15日，但是当我选择第15日时，我得到2016年5月16日至5月22日，当我认为它应该显示相同的范围时，就像我选择了第9个

HTML

<input style="display: none" name="date" type="input" id="datePick"/>
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">         
</span>
<br/>
M : <span id="mondayNum"></span>
<br/>
TU : <span id="tuesdayNum"></span>
<br/>
W : <span id="wednesdayNum"></span>
<br/>
TH : <span id="thursdayNum"></span>
<br/>
F : <span id="fridayNum"></span>
<br/>
SA : <span id="saturdayNum"></span>
<br/>
SU : <span id="sundayNum"></span>

JavaScript

$( document ).ready(function()
    {

        //alert(t1);
        $("#datePick").datepicker(
        {
            showWeek:true,
            showOtherMonths: true,
            selectOtherMonths: true,
            firstDay: 1,
            showOn: "button",
            buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
            buttonImageOnly:true,
            onSelect: function(dateText, inst)
            {
                var dayOne,dayTwo,dayThree,dayFour,dayFive,daySix,daySeven;
                var date = $(this).datepicker('getDate');
                //console.log($.datepicker.iso8601Week(new Date(dateText)));
                tempDay = $.datepicker.formatDate( 'D', date);

                if(tempDay == 'Sun')
                {
                    console.log("Sunday");
                    console.log(date);                  
                    console.log(tempDay);

                dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
            //  
                dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate()  - date.getDay() + 3);
                dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
          $('#weekRange').text($.datepicker.formatDate( 'M d', dayOne) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven));
                $('#mondayNum').text($.datepicker.formatDate( 'd', dayOne));
                $('#tuesdayNum').text($.datepicker.formatDate( 'd', dayTwo));
                $('#wednesdayNum').text($.datepicker.formatDate( 'd', dayThree));
                $('#thursdayNum').text($.datepicker.formatDate( 'd', dayFour));
                $('#fridayNum').text($.datepicker.formatDate( 'd', dayFive));
                $('#saturdayNum').text($.datepicker.formatDate( 'd', daySix));
                $('#sundayNum').text($.datepicker.formatDate( 'd', daySeven));
                $("#datePick").datepicker("setDate", dayOne);
        }
                else
                {
                    console.log("Not Sunday");
                    console.log(tempDay);
                previousWeek = ($.datepicker.iso8601Week(date) - 1);
                console.log("Picked day previous Week: " + previousWeek);

                console.log("Current week: " + $.datepicker.iso8601Week(date));

                var nextWeek = ($.datepicker.iso8601Week(date) + 1);
                console.log("Picked day following Week: " + nextWeek);

                console.log(dateText);
                dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);

                dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate()  - date.getDay() + 3);
                dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
                }



                console.log("2nd: " + dayTwo);
                console.log("3rd: " + dayThree);
                console.log("4th: " + dayFour);
                console.log("5th: " + dayFive);
                console.log("6th: " + daySix);
                console.log("7th: " + daySeven);


                var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
                //console.log($.datepicker.formatDate( 'M d', monday, inst.settings ) + " to " + $.datepicker.formatDate( 'M d, yy', sunday, inst.settings ));
                $('#weekRange').text($.datepicker.formatDate( 'M d', dayOne, inst.settings ) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven, inst.settings ));
            $('#mondayNum').text($.datepicker.formatDate( 'd', dayOne));
                $('#tuesdayNum').text($.datepicker.formatDate( 'd', dayTwo));
                $('#wednesdayNum').text($.datepicker.formatDate( 'd', dayThree));
                $('#thursdayNum').text($.datepicker.formatDate( 'd', dayFour));
                $('#fridayNum').text($.datepicker.formatDate( 'd', dayFive));
                $('#saturdayNum').text($.datepicker.formatDate( 'd', daySix));
                $('#sundayNum').text($.datepicker.formatDate( 'd', daySeven));
                $("#datePick").datepicker("setDate", dayOne);
                //alert($.datepicker.formatDate( 'd', dayOne, inst.settings ));
            }
        });
        //console.log("1st: " + dayOne);

        $("#datePick").datepicker("setDate", new Date());
        var date = $("#datePick").datepicker('getDate');
        //console.log(test);
        dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
        dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
        dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate()  - date.getDay() + 3);
        dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
        dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
        daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
        $('#weekRange').text($.datepicker.formatDate( 'M d', dayOne) + " to " + $.datepicker.formatDate( 'M d, yy', daySeven));


    //console.log("1st: "+ bob);

    });

jsfiddle https://jsfiddle.net/gauldivic/vexuu26j/

最佳答案

由于它总是关闭一天，这可能是由于您将一周的第一天设置为星期一造成的，因此您可以通过从所选日期中减去一天来解决此问题。

var date = $(this).datepicker('getDate');
date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);

实际操作:

var t1;
$(document).ready(function() {
  $("#datePick").datepicker({
    showWeek: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    firstDay: 1,
    showOn: "button",
    buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
    buttonImageOnly: true,
    onSelect: function(dateText, inst) {
      var dayOne, dayTwo, dayThree, dayFour, dayFive, daySix, daySeven;
      
      // Subtract one day to account for different first day of the week
      var date = $(this).datepicker('getDate');
      date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1);
      
      var tempDay = $.datepicker.formatDate('D', date);
      var previousWeek = ($.datepicker.iso8601Week(date) - 1);
      var nextWeek = ($.datepicker.iso8601Week(date) + 1);
      dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
      dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
      dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
      dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
      dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
      daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
      daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);

      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
      $('#weekRange').text($.datepicker.formatDate('M d', dayOne, inst.settings) + " to " + $.datepicker.formatDate('M d, yy', daySeven, inst.settings));
      $('#mondayNum').text($.datepicker.formatDate('d', dayOne));
      $('#tuesdayNum').text($.datepicker.formatDate('d', dayTwo));
      $('#wednesdayNum').text($.datepicker.formatDate('d', dayThree));
      $('#thursdayNum').text($.datepicker.formatDate('d', dayFour));
      $('#fridayNum').text($.datepicker.formatDate('d', dayFive));
      $('#saturdayNum').text($.datepicker.formatDate('d', daySix));
      $('#sundayNum').text($.datepicker.formatDate('d', daySeven));
      $("#datePick").datepicker("setDate", dayOne);
    }
  });

  $("#datePick").datepicker("setDate", new Date());
  var date = $("#datePick").datepicker('getDate');
  dayOne = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
  dayTwo = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
  dayThree = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
  dayFour = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
  dayFive = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
  daySix = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
  daySeven = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
  $('#weekRange').text($.datepicker.formatDate('M d', dayOne) + " to " + $.datepicker.formatDate('M d, yy', daySeven));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input style="display: none" name="date" type="input" id="datePick" />
<span>Week Of: </span>
<span style="font-weight: bold" id="weekRange">
			
		</span>
<br/>M : <span id="mondayNum"></span>
<br/>TU : <span id="tuesdayNum"></span>
<br/>W : <span id="wednesdayNum"></span>
<br/>TH : <span id="thursdayNum"></span>
<br/>F : <span id="fridayNum"></span>
<br/>SA : <span id="saturdayNum"></span>
<br/>SU : <span id="sundayNum"></span>

关于javascript - jQuery datePicker 周选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38403287/

上一篇：javascript - 如何迭代通过 AJAX JSON 发送的对象

下一篇：javascript - 如何使物体沿对 Angular 线和之字形移动？

相关文章：

javascript - worker-loader 内联做什么？

JavaScript (ECMA) 语法 - 左递归问题

Javascript 重定向 - 错误的重定向

java - datepickerdialog 隐藏日历并将我的日期选择器 View 更改为标准模式

javascript - jQuery Datepicker 将日期更改为今天

javascript - 在 asp.net 中使用 javascript 验证特定范围值的文本框

javascript - 模块模式中的简单闭包示例不起作用

javascript - jQuery:如果存在错误，请删除旧的

javascript - twitter-bootstrap 按钮没有触发我的表单 .dialog()

带有 onChange 事件的 javascript 自动完成

©2024 IT工具网  联系我们