diff options
| author | Felix Nagel <info@felixnagel.com> | 2017-04-11 10:21:17 +0200 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2017-04-12 22:32:48 +0200 |
| commit | c1cb6e3398cf3f68e25d375f1e2dce1830fc95f4 (patch) | |
| tree | 0cd6f98ddc6d65e6a67d99638b494b1631de2c49 /demos | |
| parent | 7ef7f3ab9ea8c0e5a778f5b5ae31b6d591275eef (diff) | |
| download | jquery-ui-c1cb6e3398cf3f68e25d375f1e2dce1830fc95f4.tar.gz jquery-ui-c1cb6e3398cf3f68e25d375f1e2dce1830fc95f4.zip | |
Calendar: Use widget extension to render year and month select
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/calendar/dropdown-month-year.html | 71 |
1 files changed, 67 insertions, 4 deletions
diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html index 92b7e24fb..e9571343f 100644 --- a/demos/calendar/dropdown-month-year.html +++ b/demos/calendar/dropdown-month-year.html @@ -8,10 +8,73 @@ <link rel="stylesheet" href="../demos.css"> <script src="../../external/requirejs/require.js"></script> <script src="../bootstrap.js"> - $( "#calendar" ).calendar({ - changeMonth: true, - changeYear: true + $.widget( "ui.calendar", $.ui.calendar, { + _buildTitle: function() { + var title = $( "<div>", { role: "alert", id: this.gridId + "-month-label" } ), + month = this._renderMonthSelect(), + year = this._renderYearSelect(); + + this._addClass( title, "ui-calendar-title" ) + ._addClass( month, "ui-calendar-month" ) + ._addClass( year, "ui-calendar-year" ); + + return title + .append( month ) + .append( " " ) + .append( year ); + }, + _renderMonthSelect: function() { + var select = $( "<select>" ), + date = this.date.clone(), + i = 0, + option; + + this._on( select, { + change: function() { + this._off( select ); + this.date.setFullDate( this.date.year(), select.val(), this.date.day() ); + this._updateView(); + } + } ); + + for ( ; i < 12; i++ ) { + date.setFullDate( select.val(), i, this.date.day() ); + option = $( "<option>", { val: i, text: date.monthName() } ); + if ( this.date.month() === i ) { + option.prop( "selected", true ); + } + select.append( option ); + } + + return select; + }, + _renderYearSelect: function() { + var current = new Date(), + select = $( "<select>" ), + i = current.getFullYear(), + option; + + this._on( select, { + change: function() { + this._off( select ); + this.date.setFullDate( select.val(), this.date.month(), this.date.day() ); + this._updateView(); + } + } ); + + for ( ;i <= current.getFullYear() + 10; i++ ) { + option = $( "<option>", { val: i, text: i } ); + if ( this.date.year() === i ) { + option.prop( "selected", true ); + } + select.append( option ); + } + + return select; + } }); + + $( "#calendar" ).calendar(); </script> </head> <body> @@ -19,7 +82,7 @@ <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. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> +<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.</p> </div> </body> </html> |