Tuesday, November 29, 2016

How to disable Weekends in Jquery Datetime picker

In this post, I will demonstrate how to disable week ends using jQuery Datetime picker.
There are different ways of implementing the same functionality. In this post, I will show case basic way of disabling weekends using jquery.

Prerequisites

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css

I'm using beforeShowDay inbuilt function to implement this:

HTML:

  

JavaScript:
$("#datepicker").datepicker({
    beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 6 && day != 0)]; // 1- saturday, 0- sunday
    }
});

Or you can get the same functionality by providing a inbuilt function as the parameter.

$(function() {
   $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
   });
 });

1 comment:

  1. yours blog was excellent and really enjoyed.Thanks for sharing and mainting blogging
    This idea is mind blowing. I think everyone should know such information like you have described on this post. Thank you for sharing this explanation
    oracle training in chennai

    oracle training institute in chennai

    oracle training in bangalore

    oracle training in hyderabad

    oracle training

    oracle online training

    hadoop training in chennai

    hadoop training in bangalore

    ReplyDelete