'
19 | });
20 |
21 | // Creates a button out an a JQuery UI button. See:
22 | // http://github.com/KidSysco/jquery-ui-month-picker#button
23 | // for details on handeling internationalization.
24 | $("#JQButton").MonthPicker({
25 | Button: function() {
26 | return $("").button();
27 | }
28 | });
29 |
30 | // Allows 1 months from today (future months only).
31 | $('#FutureDateDemo').MonthPicker({ MinMonth: 1 });
32 |
33 | // Allows at most 1 month from today (past months only).
34 | $('#PastDateDemo').MonthPicker({ MaxMonth: -1 });
35 |
36 | // Don't allow this month and at most 18 months from today.
37 | // For detaild on the datatyps you can pass see:
38 | // http://github.com/KidSysco/jquery-ui-month-picker#minmonth
39 | $('#YearAndAHalfDeom').MonthPicker({
40 | MinMonth: 0,
41 | MaxMonth: '+2y -6m' // Or you could just pass 18.
42 | });
43 |
44 | // Start on the year 2023 no matter what date is selected.
45 | $("#OverrideStartYear").MonthPicker({ StartYear: 2023 });
46 |
47 | // Display an error message if the date is not valid.
48 | $('#GetYearDemo').MonthPicker({
49 | ValidationErrorMessage: 'Invalid Date!'
50 | });
51 |
52 | // Apply an input mask which mkase sure the user
53 | // limits the user to typing a month in the
54 | //fromat specified in the MonthFormat option.
55 | $('#DigitalBush').MonthPicker({ UseInputMask: true });
56 | $('#DigitalBushBoth').MonthPicker({
57 | UseInputMask: true,
58 | ValidationErrorMessage: 'Invalid Date!'
59 | });
60 |
61 | // The plugin supports the HTML 5 month type out of the box
62 | // no special setup required.
63 | $('#Html5').MonthPicker({
64 | ShowIcon: false,
65 | StartYear: 2027
66 | });
67 |
68 | // You can control the menu's positioning
69 | // and collision handeling by passing options to the
70 | // jQuery UI .position() plugin.
71 | $('#PositionDemo').MonthPicker({
72 | ShowIcon: false,
73 | Position: {
74 | collision: 'fit flip'
75 | }
76 | });
77 |
78 | // Create an inline menu by calling
79 | // .MonthPicker(); on a About
44 | 45 |The jQuery UI Month Picker Plugin is designed to allow user input for only a month and year when only that input 46 | is required. Clicking on the year, allows the user to jump ahead or back 12 years at a time. Clicking anywhere 47 | on the page, except on the month picker menu itself, will cause the month picker to hide. The Month Picker 48 | has lots of options for date validation, setting the start year, using an icon button, input masking, internationalization, 49 | localization and more.
50 |
51 |
52 | 
53 |
54 |
55 |
56 | 
57 |
58 |
59 |
60 | 
61 |
62 |
Default functionality
65 |
66 | This demonstrates the plugin's default functionality.
67 |
68 |
Choose a Month:
69 |
70 |
Button Demonstration
73 |
74 | This demonstrates how you can customize every aspect of the open button. See the Button documenation for details on handeling internationalization.
75 |
76 |
No button:
77 |
78 |
79 |
80 |
Image button:
81 |
82 |
83 |
84 |
Plain HTML button:
85 |
86 |
87 |
88 |
jQuery UI button:
89 |
90 |
91 |
MinMonth and MaxMonth Demonstration
94 |
95 | This demonstrates how you can limit the user to chooseing months within a given interval.
96 |
97 |
Future months only:
98 |
99 |
100 |
101 |
Past months only:
102 |
103 |
104 |
105 |
18 months from today:
106 |
107 |
108 |
Start Year Demonstration
111 |
112 | This demonstrates how the plugin will default to the year specified in the text box. Changing the year in
113 | the text box will result in a new default year for the chooser and if no date is selected then the default
114 | year is the current year.
115 |
116 |
Choose a month:
117 |
118 |
Override Start Year Demonstration
121 |
122 | This demonstrates how the MonthPicker can be configured to override the start year default behavior. This
123 | MonthPicker will start on 2023 no matter which date is currently selected, even if no date is specified.
124 |
125 |
Choose a month:
126 |
127 |
Get Month/Year & Validation API Demonstration
130 |
131 | This demonstrates API usage for the GetSelectedMonthYear(), GetSelectedYear() and GetSelectedMonth() function
132 | calls which will also perform date validation. Clear() will clear the text field and any validation messages.
133 |
134 |
Choose a month:
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
Disable/Enable API Demonstration
145 |
146 | This demonstrates API usage for the Enable() and Disable().
147 |
148 |
Choose a month:
149 |
150 |
151 |
152 |
153 |
Digital Bush Integration Demonstration
156 |
157 | This demonstrates how the MonthPicker plugin integrates with the Digital Bush Plugin for Input Masking as well as the html 5 placeholder attribute to simulate watermarking. Try to type an invalid date and try
158 | the Get Month/Year button to fire off validation.
159 |
160 |
Type in a month/year:
161 |
162 |
163 |
164 |
Type in a month/year:
165 |
166 |
167 |
168 |
169 |
170 |
171 |
Month Format Demonstration
174 |
175 | This demonstrates how you can display month feedback in a variety of ways. Choose a month format from the
176 | dropdown, then click on the input and select a month to see it in that format.
177 |
178 |
Date:
179 |
180 |
181 |
Format:
182 |
190 |
Alternate Field/Format Demonstration
193 |194 | This demonstrates how the AltField and 195 | AltFormat options work so that values shown to the user can be different than what is submitted to the server. 196 |
| Value shown to user: | 199 |200 | | Unix Date value sent to server: | 201 |
| 204 | | 205 | | 206 | 207 | | 208 |
| 211 | | 212 | | 213 | |
| Value shown to user: | 216 |217 | | ODBC Date value sent to server: | 218 |
| 221 | | 222 | | 223 | 224 | | 225 |
jQuery UI Dialog Integration Demonstration
230 |
231 | This demonstrates the Month Picker running inside of the jQuery UI Modal Dialog.
232 |
233 |
234 |
235 |
Inline Menu Demonstration
238 |239 | This demonstrates the Month Picker menu inlined in a div tag. 240 |
241 | 242 | 243 |HTML 5 Month Input Type Support
244 |
245 | This demonstrates how the MonthPicker will work with the HTML 5 Month Input Type. View this section using
246 | Chrome to see Google's latest implementation in comparison.
247 |
248 |
Jquery UI Month Picker:
249 |
250 |
251 |
Chrome Month Picker:
252 |
253 |
.position() Integration Demonstration
256 |
257 |
This demonstrates the Month Picker integration with the optional .position() plugin. The menu should show on top of the input
258 | rather than below where the view would be obstructed.
259 |
260 |
Choose a month:
261 |
262 |