Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to disable previous dates in datepicker using jQuery?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 204
    Comment on it

    Hi Readers,
     Welcome to FindNerd, today we are going to discuss a method to disable previous dates in datepicker using jQuery?

    Datepickers is a very important feature of a web application. It is mostly used in any registration form when any user goes to sign up.Datepickers() method  allow to users for filling dates easily and visually in <input> elements. You can customize the date format and language In jQueryUI.

    You can also change the appearance of HTML elements on a page with new CSS and also make it selectable date range.

     Note:datepicker() method is mostly uses with <input> elements.

     In below example you can see that when the user focuses on input field by clicking on it or using the tab key, below jQuery code pop-ups calendar for choosing a date,Then you will see previous dates is disable.

     <!DOCTYPE html>
    <html>
    <head>
      <title>Datepicker</title>
    
        <!--add here jquery Date UI with CSS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
        <link rel="stylesheet" ref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
         <!--end-->
    
           <!--here define css-->
            <style type="text/css">
               #width {
                max-width: 600px;
                margin: 0 auto;
                color:red;
              }
              table{
                     background-color: grey;
                     color: white;
                     width: 232px;
                   }
                .ui-datepicker-next.ui-corner-all{float: right;}
                .ui-datepicker-title{ background: none repeat scroll 0 0 skyblue;
                text-align: center;}
            </style>
            <!-- end css paret -->
    
    </head>
    
     <body>
            <script> 
    
               jQuery(document).ready(function() {
                 $('#datepick').datepicker({
                       format: "dd/mm/yyyy",
                       clearBtn: true,
                       minDate: 0,
                       maxDate: "+1M +30D",//define limitation of day
                       WeekDisabled: "0,6"
                   });
               });
            </script>
         
             <!--start  HTML Form  -->
            <div id="width">
              <h2>Select Date</h2>  
              Date:<input id="datepick" type="text" placeholder="Enter Date">
            </div>
          <!--end  HTML code  -->
     </body>
    </html>

     

    In above code, you can see uses of maxDate which is provided to the user for filling next 1month and 30day and by using WeekDisabled it's keeping disabled which days have passed.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: