jQuery datePicker周选择

时间：2016-07-15 18:53:08

标签： 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/

1 个答案:

答案 0 :(得分：2)

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

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

行动中：

＆＃13;
＆＃13; 
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));
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题