16
16
< script src ="picker.js "> </ script >
17
17
< link rel ="stylesheet " href ="../themes/base/jquery.ui.all.css ">
18
18
< title > jQuery UI Datepicker Rewrite</ title >
19
- < style > body {font : 62.5% Verdana, Arial, sans-serif}</ style >
19
+ < style >
20
+ body { font : 62.5% Verdana, Arial, sans-serif; }
21
+ .ui-datepicker-multi-3 { width : 51em !important ; }
22
+ </ style >
20
23
</ head >
21
24
< body >
22
25
< select id ="culture ">
26
29
</ select >
27
30
< input id ="inline-output " />
28
31
< div id ="datepicker-inline-default "> </ div >
32
+ < div id ="datepicker-inline-multi "> </ div >
29
33
< div id ="datepicker-inline "> </ div >
30
34
< input id ="datepicker " type ="text " />
31
35
< input id ="datepicker2 " type ="text " />
35
39
$ . global . preferCulture ( $ ( this ) . val ( ) ) ;
36
40
$ ( ":ui-datepicker" ) . datepicker ( "refresh" ) ;
37
41
} )
38
- $ ( "#datepicker-inline-default" ) . datepicker ( {
42
+ $ ( "#datepicker-inline-default" ) . datepicker ( {
39
43
select : function ( event , ui ) {
40
44
$ ( "#inline-output" ) . val ( ui . date ) ;
41
45
}
42
46
} ) ;
47
+ $ ( "#datepicker-inline-multi" ) . datepicker ( {
48
+ tmpl : "#ui-datepicker-multi-tmpl" ,
49
+ select : function ( event , ui ) {
50
+ $ ( "#inline-output" ) . val ( ui . date ) ;
51
+ }
52
+ } )
43
53
$ ( "#datepicker-inline" ) . datepicker ( {
44
54
tmpl : "#ui-datepicker-weeks-tmpl" ,
45
55
select : function ( event , ui ) {
162
172
</ div >
163
173
</ script >
164
174
175
+ < script id ="ui-datepicker-multi-tmpl " type ="text/x-jquery-tmpl ">
176
+ < div class = "ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-3 ui-datepicker-multi" >
177
+ { { each ( index , month ) date . months ( 2 ) } }
178
+ < div class = "ui-datepicker-group" >
179
+ < div class = "ui-datepicker-header ui-widget-header ui-helper-clearfix {{if month.first}}ui-corner-left{{/if}}{{if month.last}}ui-corner-right{{/if}}" >
180
+ { { if month . first} }
181
+ < a class = "ui-datepicker-prev ui-corner-all" title = "${labels.prevText}" > < span class = "ui-icon ui-icon-circle-triangle-w" > ${ labels . prevText } </ span > </ a >
182
+ { { / i f } }
183
+ { { if month . last} }
184
+ < a class = "ui-datepicker-next ui-corner-all" title = "${labels.nextText}" > < span class = "ui-icon ui-icon-circle-triangle-e" > ${ labels . nextText } </ span > </ a >
185
+ { { / i f } }
186
+ < div class = "ui-datepicker-title" >
187
+ < span class = "ui-datepicker-month" > ${ month . monthname ( ) } </ span > < span class = "ui-datepicker-year" > ${ month . year ( ) } </ span >
188
+ </ div >
189
+ < / d i v >
190
+ < table class = "ui-datepicker-calendar" >
191
+ < thead >
192
+ < tr >
193
+ { { each ( index , day ) month . weekdays ( ) } }
194
+ < th class = "" > < span title = "${day.fullname}" > ${ day . shortname } </ span > </ th >
195
+ { { / each} }
196
+ </ tr >
197
+ </ thead >
198
+ < tbody >
199
+ { { each ( index , week ) month . days ( ) } }
200
+ < tr >
201
+ { { each ( index , day ) week . days} }
202
+ < td >
203
+ { { if day . render} }
204
+ { { if day . selectable} }
205
+ < a title = "${day.title}" class = "ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href = "#" >
206
+ ${ day . date }
207
+ </ a >
208
+ { { / i f } }
209
+ { { if ! day . selectable } }
210
+ < span title = "${day.title}" class = "{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" >
211
+ ${ day . date }
212
+ </ span >
213
+ { { / i f } }
214
+ { { / i f } }
215
+ </td >
216
+ { { / e a c h } }
217
+ </tr >
218
+ { { / e a c h } }
219
+ </tbody >
220
+ < / table >
221
+ </ div >
222
+ { { / each} }
223
+ < div class = "ui-datepicker-row-break" > </ div >
224
+ < div class = "ui-datepicker-buttonpane ui-widget-content" >
225
+ < button class = "ui-datepicker-current" > ${ labels . currentText } </ button >
226
+ < button class = "ui-datepicker-close" > ${ labels . closeText } </ button >
227
+ </ div >
228
+ </ div >
229
+ </ script >
165
230
</ body >
166
231
</ html >
0 commit comments