CODEWITHSUNDEEP
javascriptjquerydatepicker
Andrew Bailey
Andrew Bailey

Reputation: 31

jQuery datePicker week selection

I have a jQueryUI datepicker and I am trying to get the code to select the specific week that the day is picked, it works for everyday except for sundays. When I select a sunday, the following week is displayed but it should be displaying the current week. For example if I select May 9th the range is May 9 to May 15, 2016 , but when i select the 15th I get May 16 to May 22, 2016, when I think it should be displaying the same range as if i selected the 9th

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/

Upvotes: 0

Views: 327

Answers (1)

Mike Cluck
Mike Cluck

Reputation: 32511

Since it's always off by one day, which is likely caused by your setting the first day of the week to Monday, you could fix this by subtracting one day from the selected date.

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

In action:

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>

Upvotes: 2

Related Questions