How to attach datepicker with your input text?

Today, we will learn about attaching Datepicker with your input text.
It is a very easy task .
It will just take around 30 seconds..

Let's Start !

Step 1 :

Create html Page having input textbox.

 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <!-- FOR DATEPICKER -->  
   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
   <!-- FOR BOOTSTRAP -->  
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">  
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
   <script src="demodate.js"></script>  
 </head>  
 <body>  
     <input class="datepicker">  
 </body>  
 </html>

In above-stated code snippet, observe Bold Lines ,which are CDN files to apply jquery datepicker .
jquery-ui.css is css for Jquery
jquery.min.js is min for Jquery
jquery-ui.js is for javascript for Jquery.

If you want to apply datepicker in your code you must use those 3 CDN files.

Step 2:

Create a Javascript file and attach it to html Page. I created a file named demodate.js

So, in above-mentioned snippet, I give a reference for that javascript file.

 $(document).ready(function () {  
   $('.datepicker').datepicker({  
     dateFormat: "dd/mm/yy",  
     startDate: '-3d'  
   });  
 });

Above snippet will call datepicker function .

Now Let's Run a Code

If you still have any doubts relating to this concept, mail me at : dhruvinshah16@gmail.com

Don't forget to subscribe me!
For More Updates stay connected On : Learn2All Facebook Page
Amazing Concepts in Video : Video On YouTube

Download a Code Using this Link : Download

Learn2All

Search This Blog

How to attach datepicker with your input text?

Labels

Comments

Post a Comment