In jQuery,
datepickers()
allow the user to customize the date format and language. It also has the
ability to easily restrict the selectable date ranges which users may find it very convenient.
Datepicker is an
interactive calendar on a small overlay and on the input, it's either you click or use the tab key when choosing a date.
The jQuery contains methods that generates a date picker that changes the looks of HTML elements on a web page.
Syntax:
You can use
datepicker()
method in two ways:
- $(selector).datepicker (options)
- $(selector).datepicker (“action”, [params])
Description:
selector – can be used with an class, id, and name of HTML elements.
options – It specifies the looks and behaviors of the date picker elements.
$(selector).datepicker (options)
examples:
- Defaults
<!doctype html>
<link rel="stylesheet" href="jquery-ui.css"> $(function() {
$("#datepickers" ).datepicker();
});
input {
height: 21px;
font-size: 15px;
}
p {
font-size: 15px;
text-align: left;
}
h1{
text-align: left;
}
<h1>Date Picker Default Execution
</h1> <p>Date:
<input type="text" class="input" id="datepickers"></p>
Alternate
Date
<!doctype html>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript -->
$(function() {
$( "#datepickers1" ).datepicker({
dateFormat:"mm / dd / yy",
altField: "#datepickers2",
altFormat: "DD, d MM, yy"
});
});
<!-- HTML -->
<p>Enter Date:
<input type="text" id="datepickers1"></p> <p>Alternate Date:
<input type="text" id="datepickers2"></p>
-
buttonImageOnly
, buttonImage
, and showOn
<!doctype html>
<title>jQuery UI Datepicker buttonImage, buttonImageOnly and showOn
</title> <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript -->
$(function() {
$( "#datepickers4" ).datepicker({
showOn:"button",
buttonImage: "/jqueryui/images/calendar-icon.png",
buttonImageOnly: true
});
});
<!-- HTML -->
<p>Enter Date:
<input type="text" id="datepickers4"></p>
defaultDate
, dayNamesMin
, and duration
<!doctype html>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript -->
$(function() {
$( "#datepickers5" ).datepicker({
defaultDate:+9,
dayNamesMin: [ "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat" ],
duration: "slow"
});
});
<!-- HTML -->
<p>Enter Date:
<input type="text" id="datepickers5"></p>
showWeek
and showAnim
<!doctype html>
<title>jQuery UI Datepicker showWeek and showAnim functionality
</title> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript -->
$(function() {
$( "#datepickers6" ).datepicker({
showWeek:true,
showAnim: "slide"
});
});
<!-- HTML -->
<p>Enter Date:
<input type="text" id="datepickers6"></p>
$(selector).datepicker (“action”, [params])
Example:
setDate()
action
<!doctype html>
<title>jQuery UI Datepicker setDate function
</title> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript -->
$(function() {
$( "#datepickers7" ).datepicker();
$( "#datepickers7" ).datepicker("setDate", "6w+1");
});
<!-- HTML -->
<p>Enter Date:
<input type="text" id="datepickers7"></p>
For all students who need a programmer for your thesis system or anyone who needs a source code in any programming languages. You can contact me @ :
Email –
[email protected]
Mobile No. – 09305235027 – TNT