Question 207690 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I get WordPress WooCommerce Checkout date picker fields to dynamically change for weekends?

I’m using WordPress WooCommerce date picker fields in the Checkout Field Editor plugin for our events business.

I have 2 date picker fields set.

date_1 is chosen by the user and date_2 is dynamically changed to 3 days after the value set for date_1.

The problem is I want to be able to identify if date_2 is set to a weekend (i.e. the user sets the day to 3 days before a weekend day) and be able to default this to a Monday as we do not offer a service at the weekend.

Below is the code I am currently using in the functions.php file of my site, what would I need to change to be able to achieve what I need?

<script type="text/javascript">
(function($){
    $('#date_1').on('change', function(){
        var date = $(this).datepicker('getDate');
        date.setDate(date.getDate()+3);
        var dd = date.getDate(),
           mm = date.getMonth()+1,
           yy = date.getFullYear(),
           dd = parseInt(dd)<10 ? '0'+dd : dd,
           mm = parseInt(mm)<10 ? '0'+mm : mm,
           selected_date = dd+'/'+mm+'/'+yy;
        $('#date_2').datepicker("option", "minDate", selected_date);
        $('#date_2').datepicker('setDate', selected_date);
        $('#date_2').datepicker("option", "maxDate", selected_date); 
       
    });
    
})(jQuery, window, document)
</script>
Tags:

2

Answers


  1. 0

    You can use getDay method of date object to check weather it’s weekend or not. then you can use setDate method again to default this to a Monday as we do not offer a service at the weekend.

    <script type="text/javascript">
(function($){
    $('#date_1').on('change', function(){
        var date = $(this).datepicker('getDate');
        date.setDate(date.getDate()+3);
        
        // Check if the selected date is a weekend or not.
        if (date.getDay() === 6 || date.getDay() === 0) {
            //set default this to a Monday
            date.setDate(date.getDate() + (8 - date.getDay()));
        }
        
        var dd = date.getDate(),
           mm = date.getMonth()+1,
           yy = date.getFullYear(),
           dd = parseInt(dd)<10 ? '0'+dd : dd,
           mm = parseInt(mm)<10 ? '0'+mm : mm,
           selected_date = dd+'/'+mm+'/'+yy;
           
        $('#date_2').datepicker("option", "minDate", selected_date);
        $('#date_2').datepicker('setDate', selected_date);
        $('#date_2').datepicker("option", "maxDate", selected_date); 
       
    });
    
})(jQuery, window, document)
</script>

    Reference

    Date.prototype.getDay()

    Login or Signup to reply.
  2. 0 
    <script type="text/javascript">
(function($){
    $('#date_1').on('change', function(){
        var date = $(this).datepicker('getDate');
        date.setDate(date.getDate()+3);

        if (date.getDay() === 0) { 
            date.setDate(date.getDate() + 1);
        } else if (date.getDay() === 6) {
            date.setDate(date.getDate() + 2); 
        }

        var dd = date.getDate(),
           mm = date.getMonth()+1,
           yy = date.getFullYear(),
           dd = parseInt(dd)<10 ? '0'+dd : dd,
           mm = parseInt(mm)<10 ? '0'+mm : mm,
           selected_date = dd+'/'+mm+'/'+yy;

        $('#date_2').datepicker("option", "minDate", selected_date);
        $('#date_2').datepicker('setDate', selected_date);
        $('#date_2').datepicker("option", "maxDate", selected_date); 
       
    });
    
})(jQuery, window, document)
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search