Read More
Read More
Menu Close

    jQuery Datepicker

    jQuery datepicker is a very simple, light weight and useful tool. In this article you will see how to create and disable dates in jQuery datepicker.

    Create jQuery Datepicker

    Inside the <head> tags you will have to include the following code.

    <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
    </head>
    

    Then inside the <body> tags you can use textbox or div to display your datepicker.

    <input type="text" id="date">
    

    or

    <div id="date"></div>

    Now you have to initialise the datepicker

    Start your headless eCommerce
    now.
    Read More
    <script>
    $(function() {
       $("#date").datepicker();
    });
    </script>
    

    This will get your datepicker started.

    jQuery Datepicker

    You can add some features.

    $(function() {
         $("#date").datepicker({
             changeYear: true,
             changeMonth:true,
             dateFormat: 'mm/dd/yy',
             minDate: new Date('01/01/1900'),
             maxDate: '+1Y'
         });
    });

    Disabling dates in datepicker

    var dates = ["20/01/2018", "21/01/2018", "22/01/2018", "23/01/2018"];
    
    function DisableDates(date) {
        var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
        return [dates.indexOf(string) == -1];
    }
    
    $(function() {
         $("#date").datepicker({
             beforeShowDay: DisableDates
         });
    });
    

    This will disable the dates mentioned in the array dates

    jQuery Datepicker

    Happy coding 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top