24
24
< option value ="ja-JP "> ja-JP</ option >
25
25
</ select >
26
26
< input id ="inline-output " />
27
- < div id ="datepicker-inline " style ="margin-bottom:100px "> </ div >
27
+ < div id ="datepicker-inline-default "> </ div >
28
+ < div id ="datepicker-inline "> </ div >
28
29
< input id ="datepicker " type ="text " />
29
30
< input id ="datepicker2 " type ="text " />
30
31
< script >
33
34
$ . global . preferCulture ( $ ( this ) . val ( ) ) ;
34
35
$ ( ":ui-datepicker" ) . datepicker ( "refresh" ) ;
35
36
} )
37
+ $ ( "#datepicker-inline-default" ) . datepicker ( {
38
+ select : function ( event , ui ) {
39
+ $ ( "#inline-output" ) . val ( ui . date ) ;
40
+ }
41
+ } ) ;
36
42
$ ( "#datepicker-inline" ) . datepicker ( {
43
+ tmpl : "#ui-datepicker-weeks-tmpl" ,
37
44
select : function ( event , ui ) {
38
45
$ ( "#inline-output" ) . val ( ui . date ) ;
39
46
} ,
44
51
day . title = "These are the days of last month" ;
45
52
day . extraClasses = "ui-state-disabled" ;
46
53
}
54
+ if ( day . lead && day . date < 3 ) {
55
+ day . selectable = true ;
56
+ day . render = true ;
57
+ day . extraClasses = "ui-state-disabled" ;
58
+ }
47
59
if ( day . date == 1 ) {
48
60
day . extraClasses = "ui-state-error" ;
49
61
day . title = "Something bad explaining the error highlight" ;
105
117
-->
106
118
</ div >
107
119
</ script >
120
+
121
+ < script id ="ui-datepicker-weeks-tmpl " type ="text/x-jquery-tmpl ">
122
+ < div class = "ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" >
123
+ < div class = "ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all" >
124
+ < a class = "ui-datepicker-prev ui-corner-all" title = "Prev" > < span class = "ui-icon ui-icon-circle-triangle-w" > Prev</ span > </ a >
125
+ < a class = "ui-datepicker-next ui-corner-all" title = "Next" > < span class = "ui-icon ui-icon-circle-triangle-e" > Next</ span > </ a >
126
+ < div class = "ui-datepicker-title" >
127
+ < span class = "ui-datepicker-month" > ${ date . monthname ( ) } </ span > < span class = "ui-datepicker-year" > ${ date . year ( ) } </ span >
128
+ </ div >
129
+ </ div >
130
+ < table class = "ui-datepicker-calendar" >
131
+ < thead >
132
+ < tr >
133
+ < th > Wk</ th >
134
+ { { each ( index , day ) date . weekdays ( ) } }
135
+ < th class = "" > < span title = "${day.fullname}" > ${ day . shortname } </ span > </ th >
136
+ { { / each} }
137
+ </ tr >
138
+ </ thead >
139
+ < tbody >
140
+ { { each ( index , week ) date . days ( ) } }
141
+ < tr >
142
+ < td > ${ week . number } </ td >
143
+ { { each ( index , day ) week . days} }
144
+ < td >
145
+ { { if day . render} }
146
+ { { if day . selectable} }
147
+ < 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 = "#" >
148
+ ${ day . date }
149
+ </ a >
150
+ { { / i f } }
151
+ { { if ! day . selectable } }
152
+ < span title = "${day.title}" class = "{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" >
153
+ ${ day . date }
154
+ </ span >
155
+ { { / i f } }
156
+ { { / i f } }
157
+ </td >
158
+ { { / e a c h } }
159
+ </tr >
160
+ { { / e a c h } }
161
+ </tbody >
162
+ < / table >
163
+ </ div >
164
+ </ script >
108
165
109
166
</ body >
110
167
</ html >
0 commit comments