library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

datepicker:yearOrder option

Browse Source
This commit is contained in:
Tomasz Kociołek 2016-09-28 13:59:28 +02:00
parent c218bee80d
commit 1998f34c49
3 changed files with 49 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demos/datepicker/index.html
View File

@ -15,13 +15,14 @@
<li><a href="alt-field.html">Populate alternate field</a></li>
<li><a href="inline.html">Display inline</a></li>
<li><a href="buttonbar.html">Display button bar</a></li>
<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
<li><a href="other-months.html">Dates in other months</a></li>
<li><a href="show-week.html">Show week of the year</a></li>
<li><a href="multiple-calendars.html">Display multiple months</a></li>
<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
<li><a href="other-months.html">Dates in other months</a></li>
<li><a href="show-week.html">Show week of the year</a></li>
<li><a href="multiple-calendars.html">Display multiple months</a></li>
<li><a href="icon-trigger.html">Icon trigger</a></li>
<li><a href="animation.html">Animations</a></li>
<li><a href="date-range.html">Date Range</a></li>
<li><a href="year-order.html">Year Order</a></li>
</ul>
</body>

30
demos/datepicker/year-order.html Normal file
View File

@ -0,0 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<link rel="stylesheet" href="../demos.css">
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "#datepickerAsc" ).datepicker({
changeYear: true,
yearOrder: 'asc'
});
$( "#datepickerDesc" ).datepicker({
changeYear: true,
yearOrder: 'desc'
});
</script>
</head>
<body>
<p>Year ascending: <input type="text" id="datepickerAsc"></p>
<p>Year descending: <input type="text" id="datepickerDesc"></p>
<div class="demo-description">
<p>Order years select ascending (asc) or descending (desc) using yearOrder option.</p>
</div>
</body>
</html>

19
ui/widgets/datepicker.js
View File

@ -121,6 +121,8 @@ function Datepicker() {
yearRange: "c-10:c+10", // Range of years to display in drop-down,
// either relative to today's year (-nn:+nn), relative to currently displayed year
// (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
yearOrder: "asc", // asc means ascending order in year select, desc means
// descending order in year select
showOtherMonths: false, // True to show dates in other months, false to leave blank
selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable
showWeek: false, // True to show week of the year, false to not show it
@ -1846,9 +1848,11 @@ $.extend( Datepicker.prototype, {
var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
changeMonth = this._get( inst, "changeMonth" ),
changeYear = this._get( inst, "changeYear" ),
yearsAsc = this._get( inst, "yearOrder" ) === "asc",
showMonthAfterYear = this._get( inst, "showMonthAfterYear" ),
html = "<div class='ui-datepicker-title'>",
monthHtml = "";
monthHtml = "",
yearHtml = "";
// Month selection
if ( secondary || !changeMonth ) {
@ -1891,14 +1895,19 @@ $.extend( Datepicker.prototype, {
endYear = Math.max( year, determineYear( years[ 1 ] || "" ) );
year = ( minDate ? Math.max( year, minDate.getFullYear() ) : year );
endYear = ( maxDate ? Math.min( endYear, maxDate.getFullYear() ) : endYear );
inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";
for ( ; year <= endYear; year++ ) {
inst.yearshtml += "<option value='" + year + "'" +
yearHtml = "<option value='" + year + "'" +
( year === drawYear ? " selected='selected'" : "" ) +
">" + year + "</option>";
if ( yearsAsc ) {
inst.yearshtml = inst.yearshtml + yearHtml;
} else {
inst.yearshtml = yearHtml + inst.yearshtml;
}
}
inst.yearshtml += "</select>";
inst.yearshtml = "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>" +
inst.yearshtml +
"</select>";
html += inst.yearshtml;
inst.yearshtml = null;
}