j查询日期选取器周选择

jQuery datePicker week selection

本文关键字:选择 周选择 查询 日期 选取      更新时间:2023-09-26

我有一个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);
    }); 

斯菲德尔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>