JQuery Datepicker

Question

Could someone help me to change code, I want to let my members choose a sunday between March – October (of every year ). But only the 2nd or 4th Sunday of the month.

Thanks for help!

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 
 <script type="text/javascript">
    $(function() {
        $("#datepic").datepicker(
        { beforeShowDay: function(day) {
            var day = day.getDay();
            if (day == 2 || day == 5| day == 4| day == 6| day == 1| day == 3)
{
                return [false, "somecssclass"]
            } else {
                return [true, "someothercssclass"]
            }
        }
        });
    });
</script>
</head>
<body>
<p>Uw voorkeursdatum: <input id="datepic"/>
</body>
</body>
</html>

You should try and start the development and ask questions if you have any issues or see errors. — Nirjhar Vermani, Nov 14 '16 at 21:00
This answer should help you on your way http://stackoverflow.com/a/9295262/2822450 — developius, Nov 14 '16 at 21:03
I changed you can only select sunday, but what now? I want to enable only 2nd en 4th sunday of each month. — tiresz, Nov 14 '16 at 21:33

score 0 · Answer 1 · answered Nov 15 '16 at 01:54

beforeShowDay option is the right place to allow 2nd and 4th sundays only to be picked.

In order to do this, I used two "flags" (variable used to determine a certain state within a loop).

One flag which toggles each time a sunday is encountered in the loop.
And one to be sure to consider only the current month sundays.

DatePicker is looping through each table cells in the function provided in the beforeShowDay option.
And even if it isn't "rendered", days from the previous or next months ARE going through this loop.

I also used a 100ms timeout to reset these flags once a month has been drawn.
It is needed when navigating from a month to another.

Here is the function working in this CodePen.
I left a couple useful console.log.
;)

$(function() {
    var even=false;
    var inCurrentMonth=false;

    $("#DatePicker").datepicker({

        beforeShowDay: function(fulldate) {
            //console.log(fulldate);
            var day = fulldate.getDay();
            var date = fulldate.getDate();

            // In current month when the date 1 is found.
            if(date==1){
                inCurrentMonth=!inCurrentMonth;
                // To reset values right after month draw.
                setTimeout(function(){
                    even=false;
                    inCurrentMonth=false;
                },100);
            }

            // This condition prevents conting syndays frome the previous month.
            if(inCurrentMonth){
                // If NOT a sunday.
                if ( day != 0 ){
                    return [false,"Otherdays"]
                } else {
                    // If this sunday is even (2nd or 4th)
                    if(even){
                        even=!even;
                        return [true,"Selectable-Sunday","You can select me!"]
                    }else{
                        even=!even;
                        return [false,"Unselectable-Sunday"]
                    }
                }
            }
        }
    }).focus();
});

JQuery Datepicker

1 Answers1