1 | /*
|
---|
2 | * jQuery Mobile Framework : plugin to provide a date and time picker.
|
---|
3 | * Copyright (c) JTSage
|
---|
4 | * CC 3.0 Attribution. May be relicensed without permission/notification.
|
---|
5 | * https://github.com/jtsage/jquery-mobile-datebox
|
---|
6 | */
|
---|
7 | /* SLIDEBOX Mode */
|
---|
8 |
|
---|
9 | (function($) {
|
---|
10 | $.extend( $.mobile.datebox.prototype.options, {
|
---|
11 | themeDateHigh: 'b',
|
---|
12 | themeDatePick: 'b',
|
---|
13 | themeDate: 'a',
|
---|
14 | useSetButton: true,
|
---|
15 | validHours: false,
|
---|
16 | slen: {'y': 5, 'm':6, 'd':15, 'h':12, 'i':30}
|
---|
17 | });
|
---|
18 | $.extend( $.mobile.datebox.prototype, {
|
---|
19 | '_sbox_pos': function () {
|
---|
20 | var w = this,
|
---|
21 | ech, top, par, tot;
|
---|
22 |
|
---|
23 | w.d.intHTML.find('div.ui-datebox-sliderow-int').each(function () {
|
---|
24 | ech = $(this);
|
---|
25 | par = ech.parent().innerWidth();
|
---|
26 | if ( w.__('isRTL') ) {
|
---|
27 | top = ech.find('div').last();
|
---|
28 | } else {
|
---|
29 | top = ech.find('div').first();
|
---|
30 | }
|
---|
31 | tot = ech.find('div').size() * top.outerWidth();
|
---|
32 | top.css('marginLeft', ((tot/2)-(par/2))*-1);
|
---|
33 | });
|
---|
34 | }
|
---|
35 | });
|
---|
36 | $.extend( $.mobile.datebox.prototype._build, {
|
---|
37 | 'slidebox': function () {
|
---|
38 | var w = this,
|
---|
39 | o = this.options, i, y, hRow, phRow, tmp, testDate,
|
---|
40 | iDate = (w.d.input.val() === "") ? w._startOffset(w._makeDate(w.d.input.val())) : w._makeDate(w.d.input.val()),
|
---|
41 | uid = 'ui-datebox-',
|
---|
42 | thMod = (( this.options.mobVer < 140 ) ? 'up-' : ''),
|
---|
43 | slideBase = $("<div class='"+uid+"sliderow-int'></div>"),
|
---|
44 | phBase = $('<div>'),
|
---|
45 | ctrl = $("<div>", {"class":uid+'slide'});
|
---|
46 |
|
---|
47 | if ( typeof w.d.intHTML !== 'boolean' ) {
|
---|
48 | w.d.intHTML.empty().remove()
|
---|
49 | }
|
---|
50 |
|
---|
51 | w.d.input.on('datebox', function (e,p) {
|
---|
52 | if ( p.method === 'postrefresh' ) { w._sbox_pos(); }
|
---|
53 | });
|
---|
54 |
|
---|
55 | w.d.headerText = ((w._grabLabel() !== false)?w._grabLabel():w.__('titleDateDialogLabel'));
|
---|
56 | w.d.intHTML = $('<span>')
|
---|
57 |
|
---|
58 | w.fldOrder = w.__('slideFieldOrder');
|
---|
59 | w._check();
|
---|
60 | w._minStepFix();
|
---|
61 |
|
---|
62 | $('<div class="'+uid+'header"><h4>'+w._formatter(w.__('headerFormat'), w.theDate)+'</h4></div>').appendTo(w.d.intHTML);
|
---|
63 |
|
---|
64 | w.d.intHTML.append(ctrl);
|
---|
65 |
|
---|
66 | for ( y=0; y<w.fldOrder.length; y++ ) {
|
---|
67 | phRow = phBase.clone().jqmData('rowtype', w.fldOrder[y]);
|
---|
68 | hRow = slideBase.clone().jqmData('rowtype', w.fldOrder[y]).appendTo(phRow);
|
---|
69 | if ( w.__('isRTL') === true ) { hRow.css('direction', 'rtl'); }
|
---|
70 |
|
---|
71 | switch (w.fldOrder[y]) {
|
---|
72 | case 'y':
|
---|
73 | phRow.addClass(uid+'sliderow-ym');
|
---|
74 | for ( i=o.slen.y*-1; i<(o.slen.y+1); i++ ) {
|
---|
75 | tmp = (i!==0)?((iDate.get(0) === (w.theDate.get(0) + i))?o.themeDateHigh:o.themeDate):o.themeDatePick;
|
---|
76 | $('<div>', {'class':uid+'slideyear ui-corner-all ui-btn ui-btn-'+thMod+tmp})
|
---|
77 | .html(w.theDate.get(0)+i).jqmData('offset', i).jqmData('theme', tmp).appendTo(hRow);
|
---|
78 | }
|
---|
79 | break;
|
---|
80 | case 'm':
|
---|
81 | phRow.addClass(uid+'sliderow-ym');
|
---|
82 | for ( i=o.slen.m*-1; i<(o.slen.m+1); i++ ) {
|
---|
83 | testDate = w.theDate.copy([0],[0,0,1]);
|
---|
84 | testDate.adj(1,i);
|
---|
85 | tmp = (i!==0)?((iDate.get(1) === testDate.get(1) && iDate.get(0) === testDate.get(0))?o.themeDateHigh:o.themeDate):o.themeDatePick;
|
---|
86 | $('<div>', {'class':uid+'slidemonth ui-corner-all ui-btn ui-btn-'+thMod+tmp})
|
---|
87 | .html(String(w.__('monthsOfYearShort')[testDate.get(1)]))
|
---|
88 | .jqmData('offset', i)
|
---|
89 | .jqmData('theme', tmp).appendTo(hRow);
|
---|
90 | }
|
---|
91 | break;
|
---|
92 |
|
---|
93 | case 'd':
|
---|
94 | phRow.addClass(uid+'sliderow-d');
|
---|
95 | for ( i=o.slen.d*-1; i<(o.slen.d+1); i++ ) {
|
---|
96 | testDate = w.theDate.copy();
|
---|
97 | testDate.adj(2,i);
|
---|
98 | tmp = (i!==0)?((iDate.comp() === testDate.comp())?o.themeDateHigh:o.themeDate):o.themeDatePick;
|
---|
99 | if ( ( o.blackDates !== false && $.inArray(testDate.iso(), o.blackDates) > -1 ) ||
|
---|
100 | ( o.blackDays !== false && $.inArray(testDate.getDay(), o.blackDays) > -1 ) ) {
|
---|
101 | tmp += ' '+uid+'griddate-disable';
|
---|
102 | }
|
---|
103 | $('<div>', {'class':uid+'slideday ui-corner-all ui-btn ui-btn-'+thMod+tmp})
|
---|
104 | .html(testDate.get(2) + '<br /><span class="'+uid+'slidewday">' + w.__('daysOfWeekShort')[testDate.getDay()] + '</span>')
|
---|
105 | .jqmData('offset', i).jqmData('theme', tmp).appendTo(hRow);
|
---|
106 | }
|
---|
107 | break;
|
---|
108 | case 'h':
|
---|
109 | phRow.addClass(uid+'sliderow-hi');
|
---|
110 | for ( i=o.slen.h*-1; i<(o.slen.h+1); i++ ) {
|
---|
111 | testDate = w.theDate.copy();
|
---|
112 | testDate.adj(3,i);
|
---|
113 | tmp = (i!==0)?o.themeDate:o.themeDatePick;
|
---|
114 | if ( o.validHours !== false && $.inArray(testDate.get(3), o.validHours) < 0 ) {
|
---|
115 | tmp += ' '+uid+'griddate-disable';
|
---|
116 | }
|
---|
117 | $('<div>', {'class':uid+'slidehour ui-corner-all ui-btn ui-btn-'+thMod+tmp})
|
---|
118 | .html( w.__('timeFormat') === 12 ? w._formatter('%I<span class="'+uid+'slidewday">%p</span>', testDate) : testDate.get(3) )
|
---|
119 | .jqmData('offset', i).jqmData('theme', tmp).appendTo(hRow);
|
---|
120 | }
|
---|
121 | break;
|
---|
122 | case 'i':
|
---|
123 | phRow.addClass(uid+'sliderow-hi');
|
---|
124 | for ( i=o.slen.i*-1; i<(o.slen.i+1); i++ ) {
|
---|
125 | testDate = w.theDate.copy();
|
---|
126 | testDate.adj(4,(i*o.minuteStep));
|
---|
127 | tmp = (i!==0)?o.themeDate:o.themeDatePick;
|
---|
128 | $('<div>', {'class':uid+'slidemins ui-corner-all ui-btn ui-btn-'+thMod+tmp})
|
---|
129 | .html(w._zPad(testDate.get(4))).jqmData('offset', i*o.minuteStep).jqmData('theme', tmp).appendTo(hRow);
|
---|
130 | }
|
---|
131 | break;
|
---|
132 | }
|
---|
133 | phRow.appendTo(ctrl);
|
---|
134 | }
|
---|
135 |
|
---|
136 | if ( o.useSetButton || o.useClearButton ) {
|
---|
137 | y = $('<div>', {'class':uid+'controls'});
|
---|
138 |
|
---|
139 | if ( o.useSetButton ) {
|
---|
140 | $('<a href="#">'+w.__('setDateButtonLabel')+'</a>')
|
---|
141 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
|
---|
142 | .on(o.clickEventAlt, function(e) {
|
---|
143 | e.preventDefault();
|
---|
144 | if ( w.dateOK === true ) {
|
---|
145 | w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(w.__fmt(),w.theDate), 'date':w.theDate});
|
---|
146 | w.d.input.trigger('datebox', {'method':'close'});
|
---|
147 | }
|
---|
148 | });
|
---|
149 | }
|
---|
150 | if ( o.useClearButton ) {
|
---|
151 | $('<a href="#">'+w.__('clearButton')+'</a>')
|
---|
152 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'delete', iconpos: 'left', corners:true, shadow:true})
|
---|
153 | .on(o.clickEventAlt, function(e) {
|
---|
154 | e.preventDefault();
|
---|
155 | w.d.input.val('');
|
---|
156 | w.d.input.trigger('datebox',{'method':'clear'});
|
---|
157 | w.d.input.trigger('datebox',{'method':'close'});
|
---|
158 | });
|
---|
159 | }
|
---|
160 | if ( o.useCollapsedBut ) {
|
---|
161 | y.addClass('ui-datebox-collapse');
|
---|
162 | }
|
---|
163 | y.appendTo(w.d.intHTML);
|
---|
164 | }
|
---|
165 |
|
---|
166 | if ( w.wheelExists ) { // Mousewheel operation, if plugin is loaded
|
---|
167 | w.d.intHTML.on('mousewheel', '.ui-datebox-sliderow-int', function(e,d) {
|
---|
168 | e.preventDefault();
|
---|
169 | w._offset($(this).jqmData('rowtype'), ((d<0)?-1:1)*($(this).jqmData('rowtype')==='i'?o.minuteStep:1));
|
---|
170 | });
|
---|
171 | }
|
---|
172 |
|
---|
173 | w.d.intHTML.on(o.clickEvent, '.ui-datebox-sliderow-int>div', function(e) {
|
---|
174 | e.preventDefault();
|
---|
175 | w._offset($(this).parent().jqmData('rowtype'), parseInt($(this).jqmData('offset'),10));
|
---|
176 | });
|
---|
177 | w.d.intHTML.on('vmouseover vmouseout', '.ui-datebox-sliderow-int>div', function() {
|
---|
178 | w._hoover(this);
|
---|
179 | });
|
---|
180 |
|
---|
181 | w.d.intHTML.on(w.drag.eStart, '.ui-datebox-sliderow-int', function(e) {
|
---|
182 | if ( !w.drag.move ) {
|
---|
183 | w.drag.move = true;
|
---|
184 | w.drag.target = $(this);
|
---|
185 | w.drag.pos = parseInt(w.drag.target.css('marginLeft').replace(/px/i, ''),10);
|
---|
186 | w.drag.start = w.touch ? e.originalEvent.changedTouches[0].pageX : e.pageX;
|
---|
187 | w.drag.end = false;
|
---|
188 | e.stopPropagation();
|
---|
189 | e.preventDefault();
|
---|
190 | }
|
---|
191 | });
|
---|
192 | }
|
---|
193 | });
|
---|
194 | $.extend( $.mobile.datebox.prototype._drag, {
|
---|
195 | 'slidebox': function() {
|
---|
196 | var w = this,
|
---|
197 | o = this.options,
|
---|
198 | g = this.drag;
|
---|
199 |
|
---|
200 | $(document).on(g.eMove, function(e) {
|
---|
201 | if ( g.move && o.mode === 'slidebox') {
|
---|
202 | g.end = w.touch ? e.originalEvent.changedTouches[0].pageX : e.pageX;
|
---|
203 | g.target.css('marginLeft', (g.pos + g.end - g.start) + 'px');
|
---|
204 | e.preventDefault();
|
---|
205 | e.stopPropagation();
|
---|
206 | return false;
|
---|
207 | }
|
---|
208 | });
|
---|
209 |
|
---|
210 | $(document).on(g.eEnd, function(e) {
|
---|
211 | if ( g.move && o.mode === 'slidebox' ) {
|
---|
212 | g.move = false;
|
---|
213 | if ( g.end !== false ) {
|
---|
214 | e.preventDefault();
|
---|
215 | e.stopPropagation();
|
---|
216 | g.tmp = g.target.find('div').first();
|
---|
217 | w._offset(g.target.jqmData('rowtype'), ( w.__('isRTL') ? -1 : 1 )*(parseInt((g.start - g.end) / g.tmp.innerWidth(),10))*(g.target.jqmData('rowtype')==='i'?o.minuteStep:1));
|
---|
218 | }
|
---|
219 | g.start = false;
|
---|
220 | g.end = false;
|
---|
221 | }
|
---|
222 | });
|
---|
223 | }
|
---|
224 | });
|
---|
225 | })( jQuery );
|
---|