1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2 //>>description: Shows date and time, and make them able to be changed by user
3 //>>label: Datetime picker
4 //>>group: Tizen:Widgets
6 define( [ 'jquery.mobile.tizen.widgetex', 'jquery.mobile.tizen.popupwindow', 'jquery.mobile.tizen.popupwindow.ctxpopup' ], function ( ) {
7 //>>excludeEnd("jqmBuildExclude");
9 /*global Globalize:false, range:false, regexp:false*/
11 * jQuery Mobile Widget @VERSION
13 * This software is licensed under the MIT licence (as defined by the OSI at
14 * http://www.opensource.org/licenses/mit-license.php)
16 * ***************************************************************************
17 * Copyright (C) 2011 by Intel Corporation Ltd.
19 * Permission is hereby granted, free of charge, to any person obtaining a
20 * copy of this software and associated documentation files (the "Software"),
21 * to deal in the Software without restriction, including without limitation
22 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
23 * and/or sell copies of the Software, and to permit persons to whom the
24 * Software is furnished to do so, subject to the following conditions:
26 * The above copyright notice and this permission notice shall be included in
27 * all copies or substantial portions of the Software.
29 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
30 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
31 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
32 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
33 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
34 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
35 * DEALINGS IN THE SOFTWARE.
36 * ***************************************************************************
38 * Authors: Salvatore Iovene <salvatore.iovene@intel.com>
39 * Daehyon Jung <darrenh.jung@samsung.com>
43 * datetimepicker is a widget that lets the user select a date and/or a
44 * time. If you'd prefer use as auto-initialization of form elements,
45 * use input elements with type=date/time/datetime within form tag
46 * as same as other form elements.
50 * data-role: 'datetimepicker'
51 * data-format: date format string. e.g) "MMM dd yyyy, HH:mm"
52 * type: 'date', 'datetime', 'time'
53 * value: pre-set value. only accepts ISO date string. e.g) "2012-05-04", "2012-05-04T01:02:03+09:00"
54 * data-date: any date/time string "new Date()" accepts.
57 * type: 'date', 'datetime', 'time'
58 * format: see data-format in HTML Attributes.
59 * value: see value in HTML Attributes.
60 * date: preset value as JavaScript Date Object representation.
64 * : Set date/time to 'datestring'.
66 * : Get current selected date/time as W3C DTF style string.
67 * getValue() - replaced with 'value()'
69 * setValue( datestring ) - replaced with 'value(datestring)'
70 * : same as value( datestring )
71 * changeTypeFormat( type, format ) - deprecated
72 * : Change Type and Format options. use datetimepicker( "option", "format" ) instead
75 * date-changed: Raised when date/time was changed.
78 * <ul data-role="listview">
79 * <li class="ui-li-3-2-2">
80 * <span class="ui-li-text-main">
81 * <input type="datetime" name="demo-date" id="demo-date"
82 * data-format="MMM dd yyyy hh:mm tt"/>
84 * <span class="ui-li-text-sub">
85 * Date/Time Picker - <span id="selected-date1"><em>(select a date first)</em></span>
88 * <li class="ui-li-3-2-2">
89 * <span class="ui-li-text-main">
90 * <input type="date" name="demo-date2" id="demo-date2"/>
92 * <span class="ui-li-text-sub">
93 * Date Picker - <span id="selected-date2"><em>(select a date first)</em></span>
96 * <li class="ui-li-3-2-2">
97 * <span class="ui-li-text-main">
98 * <input type="time" name="demo-date3" id="demo-date3"/>
100 * <span class="ui-li-text-sub">
101 * Time Picker - <span id="selected-date3"><em>(select a date first)</em></span>
105 * How to get a return value:
106 * ==========================
107 * Bind to the 'date-changed' event, e.g.:
108 * $("#myDatetimepicker").bind("date-changed", function(e, date) {
109 * alert("New date: " + date.toString());
114 @class DateTimePicker
115 The picker widgets show a control that you can use to enter date and time values. <br/> To add a date time picker widget to the application, use the following code:
117 <li class="ui-li-dialogue ui-datetime">
118 <div class="ui-datetime-text-main">
119 <input type="datetime" data-format="MMM dd yyyy hh:mm:ss" name="demo-date" id="demo-date" />
121 <div class="ui-li-text-sub">Date/Time Picker
122 <span id="selected-date1"><em>(select a date first)</em></span>
128 ( function ( $, window, undefined ) {
129 $.widget( "tizen.datetimepicker", $.tizen.widgetex, {
132 type: null, // date, time, datetime applicable
135 initSelector: "input[type='date'], input[type='datetime'], input[type='time'], :jqmData(role='datetimepicker')"
138 _calendar: function () {
139 return window.Globalize.culture().calendars.standard;
143 attr: "data-" + ( $.mobile.ns || "" ) + "date",
144 signal: "date-changed"
147 _daysInMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
149 _isLeapYear: function ( year ) {
150 return year % 4 ? 0 : ( year % 100 ? 1 : ( year % 400 ? 0 : 1 ) );
153 _makeTwoDigits: function ( val ) {
154 var ret = val.toString(10);
161 _setType: function ( type ) {
162 //datetime, date, time
167 this.options.type = type;
170 this.options.type = 'datetime';
174 this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "type", this.options.type );
175 return this.options.type;
178 _setFormat: function ( format ) {
179 if ( this.options.format != format ) {
180 this.options.format = format;
185 this.ui.children().remove();
187 var token = this._parsePattern( format ),
188 div = document.createElement('div'),
195 while ( token.length > 0 ) {
197 tpl = '<span class="ui-datefield-%1" data-pat="' + pat + '">%2</span>';
199 case 'H': //0 1 2 3 ... 21 22 23
200 case 'HH': //00 01 02 ... 21 22 23
201 case 'h': //0 1 2 3 ... 11 12
202 case 'hh': //00 01 02 ... 11 12
203 $(div).append( tpl.replace('%1', 'hour') );
205 case 'mm': //00 01 ... 59
206 case 'm': //0 1 2 ... 59
207 if ( this.options.type == 'date' ) {
208 $(div).append( tpl.replace('%1', 'month') );
210 $(div).append( tpl.replace('%1', 'min') );
215 $(div).append( tpl.replace('%1', 'sec') );
217 case 'd': // day of month 5
218 case 'dd': // day of month(leading zero) 05
219 $(div).append( tpl.replace('%1', 'day') );
221 case 'M': // Month of year 9
222 case 'MM': // Month of year(leading zero) 09
225 $(div).append( tpl.replace('%1', 'month') );
227 case 'yy': // year two digit
228 case 'yyyy': // year four digit
229 $(div).append( tpl.replace('%1', 'year') );
231 case 't': //AM / PM indicator(first letter) A, P
233 case 'tt': //AM / PM indicator AM/PM
235 btn = '<a href="#" class="ui-datefield-period"' +
236 ' data-role="button" data-inline="true">period</a>';
237 $(div).append( btn );
241 $(div).append( tpl.replace('%1', 'era').replace('%2', this._calendar().eras.name) );
244 $(div).append( tpl.replace('%1', 'tab').replace('%2', pat) );
246 default : // string or any non-clickable object
247 $(div).append( tpl.replace('%1', 'seperator').replace('%2', pat) );
252 this.ui.append( div );
253 if ( this.options.date ) {
254 this._setDate( this.options.date );
257 this.ui.find('.ui-datefield-period').buttonMarkup().bind( 'vclick', function ( e ) {
258 obj._switchAmPm( obj );
261 this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "format", this.options.format );
262 return this.options.format;
265 _setDate: function ( newdate ) {
266 if ( typeof ( newdate ) == "string" ) {
267 newdate = new Date( newdate );
270 var fields = $('span,a', this.ui),
277 function getMonth() {
278 return newdate.getMonth() + 1;
281 for ( i = 0; i < fields.length; i++ ) {
282 $field = $(fields[i]);
283 type = $field.attr("class").match(/ui-datefield-([\w]*)/);
289 fn = newdate.getHours;
292 fn = newdate.getMinutes;
295 fn = newdate.getSeconds;
298 fn = newdate.getFullYear;
304 fn = newdate.getDate;
307 fn = newdate.getHours() < 12 ? this._calendar().AM[0] : this._calendar().PM[0];
308 btn = $field.find( '.ui-btn-text' );
309 if ( btn.length == 0 ) {
311 } else if ( btn.text() != fn ) {
321 this._updateField( $field, fn.call( newdate ) );
325 this.options.date = newdate;
327 this._setValue( newdate );
329 this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "date", this.options.date );
330 return this.options.date;
333 destroy: function () {
338 if ( this.element ) {
343 value: function ( val ) {
344 function timeStr( t, obj ) {
345 return obj._makeTwoDigits( t.getHours() ) + ':' +
346 obj._makeTwoDigits( t.getMinutes() ) + ':' +
347 obj._makeTwoDigits( t.getSeconds() );
350 function dateStr( d, obj ) {
351 return ( ( d.getFullYear() % 10000 ) + 10000 ).toString().substr(1) + '-' +
352 obj._makeTwoDigits( d.getMonth() + 1 ) + '-' +
353 obj._makeTwoDigits( d.getDate() );
358 rvalue = this._setDate( val );
360 switch ( this.options.type ) {
362 rvalue = timeStr( this.options.date, this );
365 rvalue = dateStr( this.options.date, this );
368 rvalue = dateStr( this.options.date, this ) + 'T' + timeStr( this.options.date, this );
375 setValue: function ( newdate ) {
376 console.warn( "setValue was deprecated. use datetimepicker('option', 'date', value) instead." );
377 return this.value( newdate );
381 * return W3C DTF string
383 getValue: function () {
384 console.warn("getValue() was deprecated. use datetimepicker('value') instead.");
388 _updateField: function ( target, value ) {
389 if ( !target || target.length == 0 ) {
397 var pat = target.jqmData( 'pat' ),
408 if ( pat.charAt(0) == 'h' ) {
411 } else if ( hour == 0 ) {
415 hour = this._makeTwoDigits( hour );
428 text = this._makeTwoDigits( value );
431 text = this._calendar().months.namesAbbr[ value - 1];
434 text = this._calendar().months.names[ value - 1 ];
437 text = this._makeTwoDigits( value % 100 );
441 value = '000' + value;
442 } else if ( value < 100 ) {
443 value = '00' + value;
444 } else if ( value < 1000 ) {
451 // to avoid reflow where its value isn't out-dated
452 if ( target.text() != text ) {
453 if ( target.hasClass("ui-datefield-selected") ) {
454 target.addClass("out");
455 this._new_value = text;
457 target.animationComplete( function () {
458 target.text( self._new_value);
459 target.addClass("in")
462 target.animationComplete( function () {
463 target.removeClass("in").
464 removeClass("ui-datefield-selected");
473 _switchAmPm: function ( obj ) {
474 if ( this._calendar().AM != null ) {
475 var date = new Date( this.options.date ),
477 change = 1000 * 60 * 60 * 12;
478 if ( date.getHours() > 11 ) {
481 date.setTime( date.getTime() + change );
482 this._setDate( date );
486 _parsePattern: function ( pattern ) {
487 var regex = /\/|\s|dd|d|MMMM|MMM|MM|M|yyyy|yy|y|hh|h|HH|H|mm|m|ss|s|tt|t|f|gg|g|\'[\w\W]*\'$|[\w\W]/g,
491 matches = pattern.match( regex );
493 for ( i = 0; i < matches.length; i++ ) {
494 if ( matches[i].charAt(0) == "'" ) {
495 matches[i] = matches[i].substr( 1, matches[i].length - 2 );
502 changeTypeFormat: function ( type, format ) {
503 console.warn('changeTypeFormat() was deprecated. use datetimepicker("option", "type"|"format", value) instead');
505 this._setType( type );
509 this._setFormat( format );
513 _create: function () {
516 if ( this.element.is( "input" ) ) {
518 var type, value, format;
520 type = obj.element.get(0).getAttribute( "type" );
521 obj.options.type = type;
523 value = obj.element.get(0).getAttribute( "value" );
525 obj.options.date = new Date( value );
530 if ( !this.options.format ) {
531 switch ( this.options.type ) {
533 this.options.format = this._calendar().patterns.d + "\t" + this._calendar().patterns.t;
536 this.options.format = this._calendar().patterns.d;
539 this.options.format = this._calendar().patterns.t;
544 if ( !this.options.date ) {
545 this.options.date = new Date();
549 this.ui = $('<div class="ui-datefield"></div>');
550 $(this.element).after( this.ui );
552 this._popup_open = false;
553 this.ui.bind('vclick', function ( e ) {
554 obj._showDataSelector( obj, this, e.target );
558 _populateDataSelector: function ( field, pat ) {
563 range = window.range,
571 if ( pat == 'H' || pat == 'HH' ) {
573 values = range( 0, 23 );
574 data = range( 0, 23 );
575 current = this.options.date.getHours();
577 values = range( 1, 12 );
578 current = this.options.date.getHours() - 1;//11
579 if ( current >= 11 ) {
580 current = current - 12;
581 data = range( 13, 23 );
582 data.push( 12 ); // consider 12:00 am as 00:00
584 data = range( 1, 11 );
588 current = 11; // 12:00 or 00:00
591 if ( pat.length == 2 ) {
593 values = values.map( this._makeTwoDigits );
595 numItems = values.length;
599 values = range( 0, 59 );
600 if ( pat.length == 2 ) {
601 values = values.map( this._makeTwoDigits );
603 data = range( 0, 59 );
604 current = ( field == 'min' ? this.options.date.getMinutes() : this.options.date.getSeconds() );
605 numItems = values.length;
610 data = range( yearlb, yearhb );
611 current = this.options.date.getFullYear() - yearlb;
612 values = range( yearlb, yearhb );
613 numItems = values.length;
616 switch ( pat.length ) {
618 values = range( 1, 12 );
621 values = range( 1, 12 ).map( this._makeTwoDigits );
624 values = this._calendar().months.namesAbbr.slice();
627 values = this._calendar().months.names.slice();
630 if ( values.length == 13 ) { // @TODO Lunar calendar support
631 if ( values[12] == "" ) { // to remove lunar calendar reserved space
635 data = range( 1, values.length );
636 current = this.options.date.getMonth();
637 numItems = values.length;
640 day = this._daysInMonth[ this.options.date.getMonth() ];
642 day += this._isLeapYear( this.options.date.getFullYear() );
644 values = range( 1, day );
645 if ( pat.length == 2 ) {
646 values = values.map( this._makeTwoDigits );
648 data = range( 1, day );
649 current = this.options.date.getDate() - 1;
663 _showDataSelector: function ( obj, ui, target ) {
666 var attr = target.attr("class"),
667 field = attr ? attr.match(/ui-datefield-([\w]*)/) : undefined,
690 if ( this._popup_open ) {
694 target.not('.ui-datefield-seperator').addClass('ui-datefield-selected');
696 pat = target.jqmData('pat');
697 data = obj._populateDataSelector.call( obj, field[1], pat );
699 values = data.values;
700 numItems = data.numItems;
701 current = data.current;
702 valuesData = data.data;
705 datans = "data-" + ($.mobile.ns ? ($.mobile.ns + '-') : "") + 'val="';
706 for ( i = 0; i < values.length; i++ ) {
707 html += '<li><a class="ui-link" ' + datans + valuesData[i] + '">' + values[i] + '</a></li>';
710 $ul = $("<ul></ul>");
711 $div = $('<div class="ui-datetimepicker-selector" data-transition="fade" data-fade="false"></div>');
712 $div.append( $ul ).appendTo( ui );
713 $ctx = $div.ctxpopup();
714 $ctx.parents('.ui-popupwindow').addClass('ui-datetimepicker');
716 $( $li[current] ).addClass("current");
717 $div.jqmData( "list", $li );
720 obj._reflow = function() {
721 $div.circularview( "reflow" );
722 $div.circularview( 'centerTo', '.current', 0 );
724 $(window).bind( "resize" , obj._reflow );
726 // cause ctxpopup forced to subtract 10
727 if ( $( window ).width() / 2 < target.offset().left ) {
730 $ctx.popupwindow( 'open',
731 target.offset().left + ( target.width() / 2 ) + newLeft - window.pageXOffset ,
732 target.offset().top + target.height() - window.pageYOffset );
734 this._popup_open = true;
736 $div.bind('popupafterclose', function ( e ) {
738 $(window).unbind("resize", obj._reflow);
742 if ( !( target.hasClass("in") || target.hasClass("out") ) ) {
743 target.removeClass("ui-datefield-selected");
746 $div.unbind( 'popupafterclose' );
747 $ul.unbind( 'vclick' );
748 $(obj).unbind( 'update' );
749 $ctx.popupwindow( 'destroy' );
752 self._popup_open = false;
755 $(obj).bind( 'update', function ( e, val ) {
756 var date = new Date( this.options.date ),
758 date_calibration = function () {
760 date.setDate( date.getDate() - 1 );
763 switch ( field[1] ) {
765 date.setMinutes( val );
768 date.setHours( val );
771 date.setSeconds( val );
774 month = date.getMonth();
775 date.setFullYear( val );
777 if ( date.getMonth() != month ) {
782 date.setMonth( val - 1 );
784 if ( date.getMonth() == val ) {
793 obj._setDate( date );
795 $ctx.popupwindow( 'close' );
798 $ul.bind( 'click', function ( e ) {
799 if ( $(e.target).is('a') ) {
800 $ul.find(".current").removeClass("current");
801 $(e.target).parent().addClass('current');
802 var val = $(e.target).jqmData("val");
803 $(obj).trigger( 'update', val ); // close popup, unselect field
807 $div.circularview( 'centerTo', '.current', 500 );
808 $div.bind( 'scrollend' , function ( e ) {
809 if ( !obj._reflow ) {
810 obj._reflow = function () {
811 $div.circularview("reflow");
813 $(window).bind("resize", obj._reflow);
822 $(document).bind("pagecreate create", function ( e ) {
823 $($.tizen.datetimepicker.prototype.options.initSelector, e.target)
824 .not(":jqmData(role='none'), :jqmData(role='nojs')")
828 } ( jQuery, this ) );
830 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
832 //>>excludeEnd("jqmBuildExclude");