Shopify Question posted in
The Shopify help center can be found here.

JQUERY DATEPICKER – exclude Sundays, specific dates AND disable next day selection after 12pm – Shopify

I’m hoping someone here can help me with the following: –

Currently, I have the following script for my datepicker snippet where I have excluded Sundays.

  <script>
window.onload = function() {
  if (window.jQuery) {
    let $ = window.jQuery;

    $(function() {
      $("#date").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: +1, 
        maxDate: '+2M',
        beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0), ''];
        }
      });
    });
  }
}

I would like to add the following conditions: –

  1. Exclude multiple specific dates (i.e. 16/04/21, etc.)
  2. Disable next business day selection by customers AFTER 12pm.

For point #2, I have the following code but am unsure of where to include it in the above: –

$("#date" ).datepicker({  
minDate: +1,
beforeShow : function(){
    var dateTime = new Date();
    var hour = dateTime.getHours();
    if(hour  >= 12){
        $(this).datepicker( "option", "minDate", "+2" );
     }
 }

Please let me know, thank you!

Tags:

2

Answers


  1. 0

    You could always use the tried and true MomentJS which has plenty of development history, including nice modules to deal with localization, internationalization, business days, holidays and the other aspects of temporal qualifications.

    Note that you cannot do naive things like adding 2 to something in a loop. You have to remember to deal with things like time zones, and the possibility your customer is somewhere where the time to them is valid, but to Shopify code running on their servers, maybe differs.

    Any results you get from MomentJS can then be used to feed some widget that displays a calendar and offers the options to black out certain dates.

    Login or Signup to reply.
  2. 0

    Please refer below code snippet:

    $(function () {
    // Dates to exclude
    var excludeDays = ['2021-04-15', '2021-04-16', '2021-04-30'];
    function disableSpecificDate(date) {
        // To disable specific day
        var dateArr = [String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate())];
        if (dateArr[1].length == 1) dateArr[1] = "0" + dateArr[1];
        if (dateArr[2].length == 1) dateArr[2] = "0" + dateArr[2];
        return excludeDays.indexOf(dateArr.join("-")) == -1;
    }
    $("#date").datepicker({
        dateFormat: 'dd/mm/yy',
        minDate: +1,
        maxDate: '+2M',
        beforeShow: function () {
            // To exclude next business day after 12 PM
            if (new Date().getHours() >= 12) {
                $(this).datepicker("option", "minDate", +2);
            }
        },
        beforeShowDay: function (date) {
            var day = date.getDay();
            return [(day == 0 ? false : disableSpecificDate(date)), ''];
        }
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
<input id="date"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search