w3resource

jQuery UI: Initialize the datepicker and display dates in other months at the start or end of the current month

jQuery UI Fundamental - I : Exercise-41

Initialize the datepicker and display dates in other months at the start or end of the current month.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Initialize the datepicker and display dates in other months at the start or end of the current month.</title>
</head>
<body>
<p>Pick a date:</p>   
<p><input type="text" id="datepicker1" /></p> 
</body>
</html>

JavaScript Code :

$( "#datepicker1" ).datepicker({
    showOtherMonths: true, 
    selectOtherMonths: true
});

See the Pen jquery-ui-fundamental-exercise-41 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Initialize the datepicker and change the text to display for the previous month link.
Next: Initialize the datepicker and create an animation to show and hide the datepicker.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/jquery-ui-exercises/1/jquery-ui-fundamental-exercise-41.php