jQuery Datepicker using jQuery Ui

Sumit Dey Sarkar

31 Aug 2022

JQuery

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