clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

jQuery Datepicker Using jQuery Ui

  Sumit Dey Sarkar
  31 Aug 2022
  JQuery
Imperial Advance Hero Image

jQuery Datepicker Using jQuery Ui

In this tutorial we will see how to use jQuery Datepicker using jquery ui.

Let's see example -

How to use jQuery datepicker using jQuery ui

<html lang="en">
<head>
    <title>jQuery Datepicker Using jQuery Ui</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">    
</head>
<body>


<div class="container">
     <h1>jQuery Datepicker Using jQuery Ui</h1>
     <label>Select Your Date</label>  <br>
     <input type="text" id="myDatepicker" class="from-control">
</div>	

<script type="text/javascript">   

        $("#myDatepicker").datepicker({ 
            dateFormat: 'dd-MM-yy' 
        });
</script>


</body>
</html>

 

Output

jQuery