In this article, we will learn how to show datepicker using jquery.
- A date– chooser of jQuery UI is used to give a timetable to the stoner to elect the date from a timetable. This date chooser generally connected to a textbook– box so stoner selection of date from the timetable can be transferred to the textbox.
- We’ll use the CDN link for different libraries and styles. To display any jQuery UI contrivance, we’ve to use the link of jQuery and jQuery UI. We’ll also use style property and used the theme Cupertino for our timetable. You can change the theme to match your style conditions.
<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’ rel=’stylesheet’>
- Example of Datepicker:
<!DOCTYPE html>
<html>
<head>
<title>Datepicker Demo</title>
<link
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
Date: <input type="text" id="date_picker" />
<script>
$(function () {
$("#date_picker").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: false,
});
});
</script>
</body>
</html>
Code in Action:
