11-Apr-2023
.
Admin
Hi Guys,
In this example,I will learn you how to use datepicker month and year menus display in jquery ui.you can easy use display month and year menus in jquery ui.
Date picker is bound to a standard form on the input field. Move the focus on the input (or use the tab key to click) to open an interactive calendar on a small overlay.Choose a date, click anywhere on the page or click the Esc key to close.
Example :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery UI Datepicker - Display Month & Year Menus</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
.datepicker-main{
width:30%;
border-radius:15px;
margin:40px auto;
padding:40px 10px;
text-align: center;
border:1px solid #000;
}
input{
padding:5px;
}
h2{
text-align: center;
}
</style>
</head>
<body>
<h2>Jquery UI Datepicker Display Month & Year Menus Example - Nicesnippets.com</h2>
<div class="datepicker-main">
<p>Date:
<input type="text" class="datepicker">
</p>
</div>
<script>
$( function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</body>
</html>
It will help you...
#Jqury UI
