src/widgets/datetimepicker/js/jquery.mobile.tizen.datetimepicker.js

   1 /*global Globalize:false, range:false, regexp:false*/
   2 /*
   3  * jQuery Mobile Widget @VERSION
   4  *
   5  * This software is licensed under the MIT licence (as defined by the OSI at
   6  * http://www.opensource.org/licenses/mit-license.php)
   7  *
   8  * ***************************************************************************
   9  * Copyright (C) 2011 by Intel Corporation Ltd.
  10  *
  11  * Permission is hereby granted, free of charge, to any person obtaining a
  12  * copy of this software and associated documentation files (the "Software"),
  13  * to deal in the Software without restriction, including without limitation
  14  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  15  * and/or sell copies of the Software, and to permit persons to whom the
  16  * Software is furnished to do so, subject to the following conditions:
  17  *
  18  * The above copyright notice and this permission notice shall be included in
  19  * all copies or substantial portions of the Software.
  20  *
  21  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  22  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  23  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  24  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  25  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  26  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  27  * DEALINGS IN THE SOFTWARE.
  28  * ***************************************************************************
  29  *
  30  * Authors: Salvatore Iovene <salvatore.iovene@intel.com>
  31  *                      Daehyon Jung <darrenh.jung@samsung.com>
  32  */
  33
  34 /**
  35  * datetimepicker is a widget that lets the user select a date and/or a
  36  * time. If you'd prefer use as auto-initialization of form elements,
  37  * use input elements with type=date/time/datetime within form tag
  38  * as same as other form elements.
  39  *
  40  * HTML Attributes:
  41  *
  42  *      data-role: 'datetimepicker'
  43  *      data-format: date format string. e.g) "MMM dd yyyy, HH:mm"
  44  *      type: 'date', 'datetime', 'time'
  45  *      value: pre-set value. only accepts ISO date string. e.g) "2012-05-04", "2012-05-04T01:02:03+09:00"
  46  *      data-date: any date/time string "new Date()" accepts.
  47  *
  48  * Options:
  49  *      type: 'date', 'datetime', 'time'
  50  *      format: see data-format in HTML Attributes.
  51  *      value: see value in HTML Attributes.
  52  *      date: preset value as JavaScript Date Object representation.
  53  *
  54  * APIs:
  55  *      value( datestring )
  56  *              : Set date/time to 'datestring'.
  57  *      value()
  58  *              : Get current selected date/time as W3C DTF style string.
  59  *      getValue() - replaced with 'value()'
  60  *              : same as value()
  61  *      setValue( datestring ) - replaced with 'value(datestring)'
  62  *              : same as value( datestring )
  63  *      changeTypeFormat( type, format ) - deprecated
  64  *              : Change Type and Format options. use datetimepicker( "option", "format" ) instead
  65  *
  66  * Events:
  67  *      date-changed: Raised when date/time was changed.
  68  *
  69  * Examples:
  70  *      <ul data-role="listview">
  71  *              <li class="ui-li-3-2-2">
  72  *                      <span class="ui-li-text-main">
  73  *                              <input type="datetime" name="demo-date" id="demo-date"
  74  *                                      data-format="MMM dd yyyy hh:mm tt"/>
  75  *                      </span>
  76  *                      <span class="ui-li-text-sub">
  77  *                              Date/Time Picker - <span id="selected-date1"><em>(select a date first)</em></span>
  78  *                      </span>
  79  *              </li>
  80  *              <li class="ui-li-3-2-2">
  81  *                      <span class="ui-li-text-main">
  82  *                              <input type="date" name="demo-date2" id="demo-date2"/>
  83  *                      </span>
  84  *                      <span class="ui-li-text-sub">
  85  *                              Date Picker  - <span id="selected-date2"><em>(select a date first)</em></span>
  86  *                      </span>
  87  *              </li>
  88  *              <li class="ui-li-3-2-2">
  89  *                      <span class="ui-li-text-main">
  90  *                              <input type="time" name="demo-date3" id="demo-date3"/>
  91  *                      </span>
  92  *                      <span class="ui-li-text-sub">
  93  *                              Time Picker - <span id="selected-date3"><em>(select a date first)</em></span>
  94  *                      </span>
  95  *              </li>
  96  *      </ul>
  97  * How to get a return value:
  98  * ==========================
  99  * Bind to the 'date-changed' event, e.g.:
 100  *    $("#myDatetimepicker").bind("date-changed", function(e, date) {
 101  *        alert("New date: " + date.toString());
 102  *    });
 103  */
 104
 105
 106 ( function ( $, window, undefined ) {
 107         $.widget( "tizen.datetimepicker", $.tizen.widgetex, {
 108
 109                 options: {
 110                         type: null, // date, time, datetime applicable
 111                         format: null,
 112                         date: null,
 113                         initSelector: "input[type='date'], input[type='datetime'], input[type='time'], :jqmData(role='datetimepicker')"
 114                 },
 115
 116                 _calendar: function () {
 117                         return window.Globalize.culture().calendars.standard;
 118                 },
 119
 120                 _value: {
 121                         attr: "data-" + ( $.mobile.ns || "" ) + "date",
 122                         signal: "date-changed"
 123                 },
 124
 125                 _daysInMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ],
 126
 127                 _isLeapYear: function ( year ) {
 128                         return year % 4 ? 0 : ( year % 100 ? 1 : ( year % 400 ? 0 : 1 ) );
 129                 },
 130
 131                 _makeTwoDigits: function ( val ) {
 132                         var ret = val.toString(10);
 133
 134                         if ( val < 10 ) {
 135                                 ret = "0" + ret;
 136                         }
 137                         return ret;
 138                 },
 139
 140                 _setType: function ( type ) {
 141                         //datetime, date, time
 142                         switch (type) {
 143                         case 'datetime':
 144                         case 'date':
 145                         case 'time':
 146                                 this.options.type = type;
 147                                 break;
 148                         default:
 149                                 this.options.type = 'datetime';
 150                                 break;
 151                         }
 152
 153                         this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "type", this.options.type );
 154                         return this.options.type;
 155                 },
 156
 157                 _setFormat: function ( format ) {
 158                         if ( this.options.format != format ) {
 159                                 this.options.format = format;
 160                         } else {
 161                                 return;
 162                         }
 163
 164                         this.ui.children().remove();
 165
 166                         var token = this._parsePattern( format ),
 167                                 div = document.createElement('div'),
 168                                 pat,
 169                                 tpl,
 170                                 period,
 171                                 btn,
 172                                 obj = this;
 173
 174                         while ( token.length > 0 ) {
 175                                 pat = token.shift();
 176                                 tpl = '<span class="ui-datefield-%1" data-pat="' + pat + '">%2</span>';
 177                                 switch ( pat ) {
 178                                 case 'H': //0 1 2 3 ... 21 22 23
 179                                 case 'HH': //00 01 02 ... 21 22 23
 180                                 case 'h': //0 1 2 3 ... 11 12
 181                                 case 'hh': //00 01 02 ... 11 12
 182                                         $(div).append( tpl.replace('%1', 'hour') );
 183                                         break;
 184                                 case 'mm': //00 01 ... 59
 185                                 case 'm': //0 1 2 ... 59
 186                                         if ( this.options.type == 'date' ) {
 187                                                 $(div).append( tpl.replace('%1', 'month') );
 188                                         } else {
 189                                                 $(div).append( tpl.replace('%1', 'min') );
 190                                         }
 191                                         break;
 192                                 case 'ss':
 193                                 case 's':
 194                                         $(div).append( tpl.replace('%1', 'sec') );
 195                                         break;
 196                                 case 'd': // day of month 5
 197                                 case 'dd': // day of month(leading zero) 05
 198                                         $(div).append( tpl.replace('%1', 'day') );
 199                                         break;
 200                                 case 'M': // Month of year 9
 201                                 case 'MM': // Month of year(leading zero) 09
 202                                 case 'MMM':
 203                                 case 'MMMM':
 204                                         $(div).append( tpl.replace('%1', 'month') );
 205                                         break;
 206                                 case 'yy':      // year two digit
 207                                 case 'yyyy': // year four digit
 208                                         $(div).append( tpl.replace('%1', 'year') );
 209                                         break;
 210                                 case 't': //AM / PM indicator(first letter) A, P
 211                                         // add button
 212                                 case 'tt': //AM / PM indicator AM/PM
 213                                         // add button
 214                                         btn = '<a href="#" class="ui-datefield-period"' +
 215                                                 ' data-role="button" data-inline="true">period</a>';
 216                                         $(div).append( btn );
 217                                         break;
 218                                 case 'g':
 219                                 case 'gg':
 220                                         $(div).append( tpl.replace('%1', 'era').replace('%2', this._calendar().eras.name) );
 221                                         break;
 222                                 case '\t':
 223                                         $(div).append( tpl.replace('%1', 'tab').replace('%2', pat) );
 224                                         break;
 225                                 default : // string or any non-clickable object
 226                                         $(div).append( tpl.replace('%1', 'seperator').replace('%2', pat) );
 227                                         break;
 228                                 }
 229                         }
 230
 231                         this.ui.append( div );
 232                         if ( this.options.date ) {
 233                                 this._setDate( this.options.date );
 234                         }
 235
 236                         this.ui.find('.ui-datefield-period').buttonMarkup().bind( 'vclick', function ( e ) {
 237                                 obj._switchAmPm( obj );
 238                         });
 239
 240                         this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "format", this.options.format );
 241                         return this.options.format;
 242                 },
 243
 244                 _setDate: function ( newdate ) {
 245                         if ( typeof ( newdate ) == "string" ) {
 246                                 newdate = new Date( newdate );
 247                         }
 248
 249                         var fields = $('span,a', this.ui),
 250                                 type,
 251                                 fn,
 252                                 $field,
 253                                 btn,
 254                                 i;
 255
 256                         function getMonth() {
 257                                 return newdate.getMonth() + 1;
 258                         }
 259
 260                         for ( i = 0; i < fields.length; i++ ) {
 261                                 $field = $(fields[i]);
 262                                 type = $field.attr("class").match(/ui-datefield-([\w]*)/);
 263                                 if ( !type ) {
 264                                         type = "";
 265                                 }
 266                                 switch ( type[1] ) {
 267                                 case 'hour':
 268                                         fn = newdate.getHours;
 269                                         break;
 270                                 case 'min':
 271                                         fn = newdate.getMinutes;
 272                                         break;
 273                                 case 'sec':
 274                                         fn = newdate.getSeconds;
 275                                         break;
 276                                 case 'year':
 277                                         fn = newdate.getFullYear;
 278                                         break;
 279                                 case 'month':
 280                                         fn = getMonth;
 281                                         break;
 282                                 case 'day':
 283                                         fn = newdate.getDate;
 284                                         break;
 285                                 case 'period':
 286                                         fn = newdate.getHours() < 12 ? this._calendar().AM[0] : this._calendar().PM[0];
 287                                         btn = $field.find( '.ui-btn-text' );
 288                                         if ( btn.length == 0 ) {
 289                                                 $field.text(fn);
 290                                         } else if ( btn.text() != fn ) {
 291                                                 btn.text( fn );
 292                                         }
 293                                         fn = null;
 294                                         break;
 295                                 default:
 296                                         fn = null;
 297                                         break;
 298                                 }
 299                                 if ( fn ) {
 300                                         this._updateField( $field, fn.call( newdate ) );
 301                                 }
 302                         }
 303
 304                         this.options.date = newdate;
 305
 306                         this._setValue( this.value() );
 307
 308                         this.element.attr( "data-" + ( $.mobile.ns ? $.mobile.ns + "-" : "" ) + "date", this.options.date );
 309                         return this.options.date;
 310                 },
 311
 312                 destroy: function () {
 313                         if ( this.ui ) {
 314                                 this.ui.remove();
 315                         }
 316
 317                         if ( this.element ) {
 318                                 this.element.show();
 319                         }
 320                 },
 321
 322                 value: function ( val ) {
 323                         function timeStr( t, obj ) {
 324                                 return obj._makeTwoDigits( t.getHours() ) + ':' +
 325                                         obj._makeTwoDigits( t.getMinutes() ) + ':' +
 326                                         obj._makeTwoDigits( t.getSeconds() );
 327                         }
 328
 329                         function dateStr( d, obj ) {
 330                                 return ( ( d.getFullYear() % 10000 ) + 10000 ).toString().substr(1) + '-' +
 331                                         obj._makeTwoDigits( d.getMonth() + 1 ) + '-' +
 332                                         obj._makeTwoDigits( d.getDate() );
 333                         }
 334
 335                         var rvalue = null;
 336                         if ( val ) {
 337                                 rvalue = this._setDate( val );
 338                         } else {
 339                                 switch ( this.options.type ) {
 340                                 case 'time':
 341                                         rvalue = timeStr( this.options.date, this );
 342                                         break;
 343                                 case 'date':
 344                                         rvalue = dateStr( this.options.date, this );
 345                                         break;
 346                                 default:
 347                                         rvalue = dateStr( this.options.date, this ) + 'T' + timeStr( this.options.date, this );
 348                                         break;
 349                                 }
 350                         }
 351                         return rvalue;
 352                 },
 353
 354                 setValue: function ( newdate ) {
 355                         console.warn( "setValue was deprecated. use datetimepicker('option', 'date', value) instead." );
 356                         return this.value( newdate );
 357                 },
 358
 359                 /**
 360                  * return W3C DTF string
 361                  */
 362                 getValue: function () {
 363                         console.warn("getValue() was deprecated. use datetimepicker('value') instead.");
 364                         return this.value();
 365                 },
 366
 367                 _updateField: function ( target, value ) {
 368                         if ( !target || target.length == 0 ) {
 369                                 return;
 370                         }
 371
 372                         if ( value == 0 ) {
 373                                 value = "0";
 374                         }
 375
 376                         var pat = target.jqmData( 'pat' ),
 377                                 hour,
 378                                 text;
 379                         switch ( pat ) {
 380                         case 'H':
 381                         case 'HH':
 382                         case 'h':
 383                         case 'hh':
 384                                 hour = value;
 385                                 if ( pat.charAt(0) == 'h' ) {
 386                                         if ( hour > 12 ) {
 387                                                 hour -= 12;
 388                                         } else if ( hour == 0 ) {
 389                                                 hour = 12;
 390                                         }
 391                                 }
 392                                 if ( pat.length == 2 ) {
 393                                         hour = this._makeTwoDigits( hour );
 394                                 }
 395                                 text = hour;
 396                                 break;
 397                         case 'm':
 398                         case 'M':
 399                         case 'd':
 400                         case 's':
 401                                 text = value;
 402                                 break;
 403                         case 'mm':
 404                         case 'dd':
 405                         case 'MM':
 406                         case 'ss':
 407                                 text = this._makeTwoDigits( value );
 408                                 break;
 409                         case 'MMM':
 410                                 text = this._calendar().months.namesAbbr[ value - 1];
 411                                 break;
 412                         case 'MMMM':
 413                                 text = this._calendar().months.names[ value - 1 ];
 414                                 break;
 415                         case 'yy':
 416                                 text = this._makeTwoDigits( value % 100 );
 417                                 break;
 418                         case 'yyyy':
 419                                 if ( value < 10 ) {
 420                                         value = '000' + value;
 421                                 } else if ( value < 100 ) {
 422                                         value = '00' + value;
 423                                 } else if ( value < 1000 ) {
 424                                         value = '0' + value;
 425                                 }
 426                                 text = value;
 427                                 break;
 428                         }
 429                         // to avoid reflow where its value isn't out-dated
 430                         if ( target.text() != text ) {
 431                                 target.text( text );
 432                         }
 433                 },
 434
 435                 _switchAmPm: function ( obj ) {
 436                         if ( this._calendar().AM != null ) {
 437                                 var date = new Date( this.options.date ),
 438                                         text,
 439                                         change = 1000 * 60 * 60 * 12;
 440                                 if ( date.getHours() > 11 ) {
 441                                         change = -change;
 442                                 }
 443                                 date.setTime( date.getTime() + change );
 444                                 this._setDate( date );
 445                         }
 446                 },
 447
 448                 _parsePattern: function ( pattern ) {
 449                         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,
 450                                 matches,
 451                                 i;
 452
 453                         matches = pattern.match( regex );
 454
 455                         for ( i = 0; i < matches.length; i++ ) {
 456                                 if ( matches[i].charAt(0) == "'" ) {
 457                                         matches[i] = matches[i].substr( 1, matches[i].length - 2 );
 458                                 }
 459                         }
 460
 461                         return matches;
 462                 },
 463
 464                 changeTypeFormat: function ( type, format ) {
 465                         console.warn('changeTypeFormat() was deprecated. use datetimepicker("option", "type"|"format", value) instead');
 466                         if ( type ) {
 467                                 this._setType( type );
 468                         }
 469
 470                         if ( format ) {
 471                                 this._setFormat( format );
 472                         }
 473                 },
 474
 475                 _create: function () {
 476                         var obj = this;
 477
 478                         if ( this.element.is( "input" ) ) {
 479                                 ( function ( obj ) {
 480                                         var type, value, format;
 481
 482                                         type = obj.element.attr( "type" );
 483                                         obj.options.type = type;
 484
 485                                         value = obj.element.attr( "value" );
 486                                         if ( value ) {
 487                                                 obj.options.date = new Date( value );
 488                                         }
 489                                 }( this ) );
 490                         }
 491
 492                         if ( !this.options.format ) {
 493                                 switch ( this.options.type ) {
 494                                 case 'datetime':
 495                                         this.options.format = this._calendar().patterns.d + "\t" + this._calendar().patterns.t;
 496                                         break;
 497                                 case 'date':
 498                                         this.options.format = this._calendar().patterns.d;
 499                                         break;
 500                                 case 'time':
 501                                         this.options.format = this._calendar().patterns.t;
 502                                         break;
 503                                 }
 504                         }
 505
 506                         if ( !this.options.date ) {
 507                                 this.options.date = new Date();
 508                         }
 509
 510                         this.element.hide();
 511                         this.ui = $('<div class="ui-datefield"></div>');
 512                         $(this.element).after( this.ui );
 513
 514                         this.ui.bind('vclick', function ( e ) {
 515                                 obj._showDataSelector( obj, this, e.target );
 516                         });
 517                 },
 518
 519                 _populateDataSelector: function ( field, pat ) {
 520                         var values,
 521                                 numItems,
 522                                 current,
 523                                 data,
 524                                 range = window.range,
 525                                 local,
 526                                 yearlb,
 527                                 yearhb,
 528                                 day;
 529
 530                         switch ( field ) {
 531                         case 'hour':
 532                                 if ( pat == 'H' ) {
 533                                         // twentyfour
 534                                         values = range( 0, 23 );
 535                                         data = range( 0, 23 );
 536                                         current = this.options.date.getHours();
 537                                 } else {
 538                                         values = range( 1, 12 );
 539                                         current = this.options.date.getHours() - 1;//11
 540                                         if ( current >= 11 ) {
 541                                                 current = current - 12;
 542                                                 data = range( 13, 23 );
 543                                                 data.push( 12 ); // consider 12:00 am as 00:00
 544                                         } else {
 545                                                 data = range( 1, 11 );
 546                                                 data.push( 0 );
 547                                         }
 548                                         if ( current < 0 ) {
 549                                                 current = 11; // 12:00 or 00:00
 550                                         }
 551                                 }
 552                                 if ( pat.length == 2 ) {
 553                                         // two digit
 554                                         values = values.map( this._makeTwoDigits );
 555                                 }
 556                                 numItems = values.length;
 557                                 break;
 558                         case 'min':
 559                         case 'sec':
 560                                 values = range( 0, 59 );
 561                                 if ( pat.length == 2 ) {
 562                                         values = values.map( this._makeTwoDigits );
 563                                 }
 564                                 data = range( 0, 59 );
 565                                 current = ( field == 'min' ? this.options.date.getMinutes() : this.options.date.getSeconds() );
 566                                 numItems = values.length;
 567                                 break;
 568                         case 'year':
 569                                 yearlb = 1900;
 570                                 yearhb = 2100;
 571                                 data = range( yearlb, yearhb );
 572                                 current = this.options.date.getFullYear() - yearlb;
 573                                 values = range( yearlb, yearhb );
 574                                 numItems = values.length;
 575                                 break;
 576                         case 'month':
 577                                 switch ( pat.length ) {
 578                                 case 1:
 579                                         values = range( 1, 12 );
 580                                         break;
 581                                 case 2:
 582                                         values = range( 1, 12 ).map( this._makeTwoDigits );
 583                                         break;
 584                                 case 3:
 585                                         values = this._calendar().months.namesAbbr.slice();
 586                                         break;
 587                                 case 4:
 588                                         values = this._calendar().months.names.slice();
 589                                         break;
 590                                 }
 591                                 if ( values.length == 13 ) { // @TODO Lunar calendar support
 592                                         if ( values[12] == "" ) { // to remove lunar calendar reserved space
 593                                                 values.pop();
 594                                         }
 595                                 }
 596                                 data = range( 1, values.length );
 597                                 current = this.options.date.getMonth();
 598                                 numItems = values.length;
 599                                 break;
 600                         case 'day':
 601                                 day = this._daysInMonth[ this.options.date.getMonth() ];
 602                                 if ( day == 28 ) {
 603                                         day += this._isLeapYear( this.options.date.getFullYear() );
 604                                 }
 605                                 values = range( 1, day );
 606                                 if ( pat.length == 2 ) {
 607                                         values = values.map( this._makeTwoDigits );
 608                                 }
 609                                 data = range( 1, day );
 610                                 current = this.options.date.getDate() - 1;
 611                                 numItems = day;
 612                                 break;
 613                         }
 614
 615                         return {
 616                                 values: values,
 617                                 data: data,
 618                                 numItems: numItems,
 619                                 current: current
 620                         };
 621
 622                 },
 623
 624                 _showDataSelector: function ( obj, ui, target ) {
 625                         target = $(target);
 626
 627                         var attr = target.attr("class"),
 628                                 field = attr ? attr.match(/ui-datefield-([\w]*)/) : undefined,
 629                                 pat,
 630                                 data,
 631                                 values,
 632                                 numItems,
 633                                 current,
 634                                 valuesData,
 635                                 html,
 636                                 datans,
 637                                 $ul,
 638                                 $div,
 639                                 $ctx,
 640                                 $li,
 641                                 i,
 642                                 newLeft = 10;
 643
 644                         if ( !attr ) {
 645                                 return;
 646                         }
 647                         if ( !field ) {
 648                                 return;
 649                         }
 650
 651                         target.not('.ui-datefield-seperator').addClass('ui-datefield-selected');
 652
 653                         pat = target.jqmData('pat');
 654                         data = obj._populateDataSelector.call( obj, field[1], pat );
 655
 656                         values = data.values;
 657                         numItems = data.numItems;
 658                         current = data.current;
 659                         valuesData = data.data;
 660
 661                         if ( values ) {
 662                                 datans = "data-" + ($.mobile.ns ? ($.mobile.ns + '-') : "") + 'val="';
 663                                 for ( i = 0; i < values.length; i++ ) {
 664                                         html += '<li><a class="ui-link" ' + datans + valuesData[i] + '">' + values[i] + '</a></li>';
 665                                 }
 666
 667                                 $ul = $("<ul></ul>");
 668                                 $div = $('<div class="ui-datetimepicker-selector" data-transition="none" data-fade="false"></div>');
 669                                 $div.append( $ul ).appendTo( ui );
 670                                 $ctx = $div.ctxpopup();
 671                                 $ctx.parents('.ui-popupwindow').addClass('ui-datetimepicker');
 672                                 $li = $(html);
 673                                 $( $li[current] ).addClass("current");
 674                                 $div.jqmData( "list", $li );
 675                                 $div.circularview();
 676                                 // cause ctxpopup forced to subtract 10
 677                                 if( $(window).width() / 2 < target.offset().left ) {
 678                                         newLeft = -10;
 679                                 }
 680                                 $ctx.popupwindow( 'open',
 681                                                 target.offset().left + ( target.width() / 2 ) + newLeft - window.pageXOffset ,
 682                                                 target.offset().top + target.height() - window.pageYOffset );
 683                                 $div.bind('popupafterclose', function ( e ) {
 684                                         if ( obj._reflow ) {
 685                                                 $(window).unbind("resize", obj._reflow);
 686                                                 obj._reflow = null;
 687                                         }
 688                                         $div.unbind( 'popupafterclose' );
 689                                         $ul.unbind( 'vclick' );
 690                                         $(obj).unbind( 'update' );
 691                                         $(ui).find('.ui-datefield-selected').removeClass('ui-datefield-selected');
 692                                         $ctx.popupwindow( 'destroy' );
 693                                         $div.remove();
 694                                 });
 695
 696                                 $(obj).bind( 'update', function ( e, val ) {
 697                                         $ctx.popupwindow( 'close' );
 698                                         var date = new Date( this.options.date );
 699                                         switch ( field[1] ) {
 700                                         case 'min':
 701                                                 date.setMinutes( val );
 702                                                 break;
 703                                         case 'hour':
 704                                                 date.setHours( val );
 705                                                 break;
 706                                         case 'sec':
 707                                                 date.setSeconds( val );
 708                                                 break;
 709                                         case 'year':
 710                                                 date.setFullYear( val );
 711                                                 break;
 712                                         case 'month':
 713                                                 date.setMonth( val - 1 );
 714
 715                                                 if ( date.getMonth() == val ) {
 716                                                         date.setDate( date.getDate() - 1 );
 717                                                 }
 718                                                 break;
 719                                         case 'day':
 720                                                 date.setDate( val );
 721                                                 break;
 722                                         }
 723                                         obj._setDate( date );
 724                                 });
 725
 726                                 $ul.bind( 'click', function ( e ) {
 727                                         if ( $(e.target).is('a') ) {
 728                                                 $ul.find(".current").removeClass("current");
 729                                                 $(e.target).parent().addClass('current');
 730                                                 var val = $(e.target).jqmData("val");
 731                                                 $(obj).trigger( 'update', val ); // close popup, unselect field
 732                                         }
 733                                 });
 734
 735                                 $div.circularview( 'centerTo', '.current', 500 );
 736                                 $div.bind( 'scrollend' , function ( e ) {
 737                                         if ( !obj._reflow ) {
 738                                                 obj._reflow = function () {
 739                                                                 $div.circularview("reflow");
 740                                                         };
 741                                                 $(window).bind("resize", obj._reflow);
 742                                         }
 743                                 });
 744                         }
 745                         return ui;
 746                 }
 747
 748         });
 749
 750         $(document).bind("pagecreate create", function ( e ) {
 751                 $($.tizen.datetimepicker.prototype.options.initSelector, e.target)
 752                         .not(":jqmData(role='none'), :jqmData(role='nojs')")
 753                         .datetimepicker();
 754         });
 755
 756 } ( jQuery, this ) );