w3resource

jQuery UI: Initialize the datepicker and specify a text to display for the week of the year column heading

jQuery UI Fundamental - I : Exercise-50

Initialize the datepicker and specify a text to display for the week of the year column heading.

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 specify a text to display for the week of the year column heading.</title>
</head>
<body>
<p>Pick a Date [Default weekHeader - Wk] :</p>
<p><input type="text" id="datepicker1" /></p>
<p>Pick a Date [Specified weekHeader - W] :</p>
<p><input type="text" id="datepicker2" /></p>
</body>
</html>

JavaScript Code :

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

$( "#datepicker2" ).datepicker({
  showWeek: true,
  weekHeader: "W"
});

Go to:


PREV : Initialize the datepicker with two months to move when clicking the previous/next links.
NEXT : Initialize the datepicker and specify a year range between 2016 and 2030.

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


Contribute your code and comments through Disqus.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.