mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>jQuery UI Calendar - Display month & year menus</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">
|
|
$.widget( "ui.calendar", $.ui.calendar, {
|
|
_buildTitleMonth: function() {
|
|
var select = $( "<select>" ),
|
|
date = this._getDate().clone(),
|
|
i = 0,
|
|
option;
|
|
|
|
this._on( select, {
|
|
change: function() {
|
|
this._off( select );
|
|
this._getDate().setFullDate(
|
|
this._getDate().year(),
|
|
select.val(),
|
|
this._getDate().day()
|
|
);
|
|
this._updateView();
|
|
}
|
|
} );
|
|
|
|
for ( ; i < 12; i++ ) {
|
|
date.setFullDate( select.val(), i, this._getDate().day() );
|
|
option = $( "<option>", { val: i, text: date.monthName() } );
|
|
if ( this._getDate().month() === i ) {
|
|
option.prop( "selected", true );
|
|
}
|
|
select.append( option );
|
|
}
|
|
|
|
return select;
|
|
},
|
|
_buildTitleYear: function() {
|
|
var current = new Date(),
|
|
select = $( "<select>" ),
|
|
i = current.getFullYear(),
|
|
option;
|
|
|
|
this._on( select, {
|
|
change: function() {
|
|
this._off( select );
|
|
this._getDate().setFullDate(
|
|
select.val(),
|
|
this._getDate().month(),
|
|
this._getDate().day()
|
|
);
|
|
this._updateView();
|
|
}
|
|
} );
|
|
|
|
for ( ;i <= current.getFullYear() + 10; i++ ) {
|
|
option = $( "<option>", { val: i, text: i } );
|
|
if ( this._getDate().year() === i ) {
|
|
option.prop( "selected", true );
|
|
}
|
|
select.append( option );
|
|
}
|
|
|
|
return select;
|
|
}
|
|
});
|
|
|
|
$( "#calendar" ).calendar();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="calendar"></div>
|
|
|
|
<div class="demo-description">
|
|
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|