clock  Mon - Sun 8.00 AM - 8.00 PM
fb
instagram
play store
pinterest

jQuery Datepicker using jQuery Ui

writter  Sumit Dey Sarkar
Date  31 Aug 2022
Language  JQuery
jQuery Datepicker using jQuery Ui

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="//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