date picker

How to use Jquery Datepicker?

A:  We required calendar control when we want to choose date for particular operation. In this situation jquery datepicker is useful.

Ex:

<html lang = “en”>

   <head>

      <meta charset = “utf-8”>

      <title>jQuery UI Datepicker functionality</title>

      <link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”

         rel = “stylesheet”>

      <script src = “https://code.jquery.com/jquery-1.10.2.js”></script>

      <script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

      <!– Javascript –>

      <script>

         $(function() {

            $( “#datepicker-3” ).datepicker({

               appendText:”(yy-mm-dd)”,

               dateFormat:”yy-mm-dd”,

               altField: “#datepicker-4”,

               altFormat: “DD, d MM, yy”

            });

         });

      </script>

   </head>

   <body>

      <!– HTML –> 

      <p>Enter Date: <input type = “text” id = “datepicker-3”></p>

      <p>Alternate Date: <input type = “text” id = “datepicker-4”></p>

   </body>

</html>

OP:

In this code we have datepicker attributes where we can defined the date format and many more things. The result is above calendar to choose date.

Leave a comment

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