colonymech / docs / www / colonyscout / internal / jeditable / contributed / jquery.jeditable.selectdate.js @ f59acf11
History | View | Annotate | Download (8.04 KB)
1 |
/* v1 - December 4, 2008
|
---|---|
2 |
* SELECTDATE (Dropdown date picker for Jeditable)
|
3 |
* by Ethan Piliavin with code from martinp
|
4 |
*
|
5 |
* Idea and original code from:
|
6 |
* http://groups.google.com/group/jquery-en/browse_thread/thread/f4ac0893083fda8/181bb9a3ba2ff226
|
7 |
*/
|
8 |
|
9 |
$.editable.addInputType('selectdate', { |
10 |
|
11 |
element : function(settings, original) { |
12 |
|
13 |
/* Create and pulldowns for hours and minutes. Append them to */
|
14 |
/* form which is accessible as variable this. */
|
15 |
|
16 |
var yearselect = $('<select id="year_">'); |
17 |
var monthselect = $('<select id="month_">'); |
18 |
var dayselect = $('<select id="day_">'); |
19 |
|
20 |
//Setup the Year selection
|
21 |
|
22 |
//Set default minyear and maxyear
|
23 |
|
24 |
var d = new Date(); |
25 |
var maxyear = d.getFullYear();
|
26 |
var minyear = d.getFullYear() - 10; |
27 |
|
28 |
|
29 |
//Do we have settings?
|
30 |
if (typeof(settings.selectdate) != 'undefined') |
31 |
{ |
32 |
//Check if user passed a minyear or maxyear value in settings, if so, use it.
|
33 |
if (typeof(settings.selectdate.maxyear) == 'number') |
34 |
{ |
35 |
var maxyear = settings.selectdate.maxyear;
|
36 |
} |
37 |
|
38 |
if (typeof(settings.selectdate.minyear) == 'number') |
39 |
{ |
40 |
var minyear = settings.selectdate.minyear;
|
41 |
} |
42 |
} |
43 |
|
44 |
//Generate the Year Selection
|
45 |
|
46 |
for(var year = maxyear; year >= minyear; year--) |
47 |
{ |
48 |
var option = $('<option>').val(year).append(year); |
49 |
yearselect.append(option); |
50 |
} |
51 |
|
52 |
|
53 |
//Generate the Month selection
|
54 |
|
55 |
for(var month=1; month <= 12; month++) |
56 |
{ |
57 |
var monthname = [];
|
58 |
monthname[1] = "January"; |
59 |
monthname[2] = "February"; |
60 |
monthname[3] = "March"; |
61 |
monthname[4] = "April"; |
62 |
monthname[5] = "May"; |
63 |
monthname[6] = "June"; |
64 |
monthname[7] = "July"; |
65 |
monthname[8] = "August"; |
66 |
monthname[9] = "September"; |
67 |
monthname[10] = "October"; |
68 |
monthname[11] = "November"; |
69 |
monthname[12] = "December"; |
70 |
if(month < 10) { |
71 |
monthnum = '0' + month;
|
72 |
} else {
|
73 |
monthnum = month; |
74 |
} |
75 |
var option = $('<option>').val(monthnum).append(monthname[month]); |
76 |
monthselect.append(option); |
77 |
} |
78 |
|
79 |
//Generate the Day selection
|
80 |
|
81 |
for(var day=1; day <=31; day++) |
82 |
{ |
83 |
if(day < 10) { |
84 |
day = '0' + day;
|
85 |
} |
86 |
var option = $('<option>').val(day).append(day); |
87 |
dayselect.append(option); |
88 |
} |
89 |
|
90 |
//Do we have settings?
|
91 |
if (typeof(settings.selectdate) != 'undefined') |
92 |
{ |
93 |
//Detect the specified order for the output string
|
94 |
if ((typeof(settings.selectdate.displayorder) != 'undefined') && (settings.selectdate.displayorder.length == 3)) |
95 |
{ |
96 |
switch (settings.selectdate.displayorder[0].toLowerCase()) |
97 |
{ |
98 |
case 'y': |
99 |
$(this).append(yearselect); |
100 |
break;
|
101 |
|
102 |
case 'm': |
103 |
$(this).append(monthselect); |
104 |
break;
|
105 |
|
106 |
case 'd': |
107 |
$(this).append(dayselect); |
108 |
break;
|
109 |
} |
110 |
|
111 |
switch (settings.selectdate.displayorder[1].toLowerCase()) |
112 |
{ |
113 |
case 'y': |
114 |
$(this).append(yearselect); |
115 |
break;
|
116 |
|
117 |
case 'm': |
118 |
$(this).append(monthselect); |
119 |
break;
|
120 |
|
121 |
case 'd': |
122 |
$(this).append(dayselect); |
123 |
break;
|
124 |
} |
125 |
|
126 |
switch (settings.selectdate.displayorder[2].toLowerCase()) |
127 |
{ |
128 |
case 'y': |
129 |
$(this).append(yearselect); |
130 |
break;
|
131 |
|
132 |
case 'm': |
133 |
$(this).append(monthselect); |
134 |
break;
|
135 |
|
136 |
case 'd': |
137 |
$(this).append(dayselect); |
138 |
break;
|
139 |
} |
140 |
} |
141 |
else //There was no setting, so use default dmy |
142 |
{ |
143 |
$(this).append(dayselect); |
144 |
$(this).append(monthselect); |
145 |
$(this).append(yearselect); |
146 |
} |
147 |
|
148 |
} |
149 |
else //There are no settings at all, so use default dmy |
150 |
{ |
151 |
$(this).append(dayselect); |
152 |
$(this).append(monthselect); |
153 |
$(this).append(yearselect); |
154 |
} |
155 |
|
156 |
|
157 |
/* Last create an hidden input. This is returned to plugin. It will */
|
158 |
/* later hold the actual value which will be submitted to server. */
|
159 |
var hidden = $('<input type="hidden">'); |
160 |
$(this).append(hidden); |
161 |
return(hidden);
|
162 |
}, |
163 |
/* Set content / value of previously created input element. */
|
164 |
content : function(datestring, settings, original) { |
165 |
|
166 |
|
167 |
/* Select correct Year, Month and Day in pulldowns. */
|
168 |
var ymd = datestring.split('-'); // YYYY-MM-DD |
169 |
year = parseInt( ymd[0], 10 ); |
170 |
month = parseInt( ymd[1], 10 ); |
171 |
day = parseInt( ymd[2], 10 ); |
172 |
|
173 |
$("#day_", this).children().each(function() { |
174 |
if(day == $(this).val()) { |
175 |
$(this).attr('selected', 'selected'); |
176 |
} |
177 |
}); |
178 |
|
179 |
$("#month_", this).children().each(function() { |
180 |
if(month == $(this).val()) { |
181 |
$(this).attr('selected', 'selected'); |
182 |
} |
183 |
}); |
184 |
|
185 |
$("#year_", this).children().each(function() { |
186 |
if(year == $(this).val()) { |
187 |
$(this).attr('selected', 'selected'); |
188 |
} |
189 |
}); |
190 |
|
191 |
}, |
192 |
/* Call before submit hook. */
|
193 |
submit: function (settings, original) { |
194 |
|
195 |
//Take values from day month and year pulldowns and create the string
|
196 |
//If we have settings for delimiter and order, then use them, otherwise use the default: Y-M-D
|
197 |
|
198 |
//Set default
|
199 |
|
200 |
var delimeter = '-'; |
201 |
var firstout = 'year'; |
202 |
var secondout = 'month'; |
203 |
var thirdout = 'day'; |
204 |
|
205 |
//Do we have settings?
|
206 |
if (typeof(settings.selectdate) != 'undefined') |
207 |
{ |
208 |
//Check if user passed a minyear or maxyear value in settings, if so, use it.
|
209 |
if (typeof(settings.selectdate.delimeter) != 'undefined') |
210 |
{ |
211 |
var delimeter = settings.selectdate.delimeter;
|
212 |
} |
213 |
|
214 |
//Detect the specified order for the output string
|
215 |
if ((typeof(settings.selectdate.submitorder) != 'undefined') && (settings.selectdate.submitorder.length == 3)) |
216 |
{ |
217 |
switch (settings.selectdate.submitorder[0].toLowerCase()) |
218 |
{ |
219 |
case 'y': |
220 |
var firstout = 'year'; |
221 |
break;
|
222 |
|
223 |
case 'm': |
224 |
var firstout = 'month'; |
225 |
break;
|
226 |
|
227 |
case 'd': |
228 |
var firstout = 'day'; |
229 |
break;
|
230 |
|
231 |
} |
232 |
|
233 |
switch (settings.selectdate.submitorder[1].toLowerCase()) |
234 |
{ |
235 |
case 'y': |
236 |
var secondout = 'year'; |
237 |
break;
|
238 |
|
239 |
case 'm': |
240 |
var secondout = 'month'; |
241 |
break;
|
242 |
|
243 |
case 'd': |
244 |
var secondout = 'day'; |
245 |
break;
|
246 |
|
247 |
} |
248 |
|
249 |
switch (settings.selectdate.submitorder[2].toLowerCase()) |
250 |
{ |
251 |
case 'y': |
252 |
var thirdout = 'year'; |
253 |
break;
|
254 |
|
255 |
case 'm': |
256 |
var thirdout = 'month'; |
257 |
break;
|
258 |
|
259 |
case 'd': |
260 |
var thirdout = 'day'; |
261 |
break;
|
262 |
|
263 |
} |
264 |
} |
265 |
} |
266 |
|
267 |
//Generate output
|
268 |
var value= $("#"+firstout+"_").val() + delimeter + $("#"+secondout+"_").val() + delimeter + $("#"+thirdout+"_").val(); |
269 |
$('input', this).val(value); |
270 |
|
271 |
} |
272 |
}); |