PageRenderTime 28ms CodeModel.GetById 0ms RepoModel.GetById 0ms app.codeStats 0ms

/src/main/webapp/js/datepicker/jquery.mobile.datepicker.js

https://gitlab.com/bruce.ng/minhnd.jquery
JavaScript | 147 lines | 134 code | 4 blank | 9 comment | 9 complexity | 2566ec47ab3f03dd61ebb5525985d89a MD5 | raw file
  1. (function( $, undefined ) {
  2. $.widget("mobile.date",{
  3. options:{
  4. defaultDate: null, // Used when field is blank: actual date,
  5. // +/-number for offset from today, null for today
  6. appendText: "", // Display text following the input box, e.g. showing the format
  7. buttonText: "...", // Text for trigger button
  8. buttonImage: "", // URL for trigger button image
  9. buttonImageOnly: false, // True if the image appears alone, false if it appears on a button
  10. hideIfNoPrevNext: false, // True to hide next/previous month links
  11. // if not applicable, false to just disable them
  12. navigationAsDateFormat: false, // True if date formatting applied to prev/today/next links
  13. gotoCurrent: false, // True if today link goes back to current selection instead
  14. changeMonth: false, // True if month can be selected directly, false if only prev/next
  15. changeYear: false, // True if year can be selected directly, false if only prev/next
  16. yearRange: "c-10:c+10", // Range of years to display in drop-down,
  17. // either relative to today's year (-nn:+nn), relative to currently displayed year
  18. // (c-nn:c+nn), absolute (nnnn:nnnn), or a combination of the above (nnnn:-n)
  19. showOtherMonths: false, // True to show dates in other months, false to leave blank
  20. selectOtherMonths: false, // True to allow selection of dates in other months, false for unselectable
  21. showWeek: false, // True to show week of the year, false to not show it
  22. calculateWeek: this.iso8601Week, // How to calculate the week of the year,
  23. // takes a Date and returns the number of the week for it
  24. shortYearCutoff: "+10", // Short year values < this are in the current century,
  25. // > this are in the previous century,
  26. // string value starting with "+" for current year + value
  27. minDate: null, // The earliest selectable date, or null for no limit
  28. maxDate: null, // The latest selectable date, or null for no limit
  29. beforeShowDay: null, // Function that takes a date and returns an array with
  30. // [0] = true if selectable, false if not, [1] = custom CSS class name(s) or "",
  31. // [2] = cell title (optional), e.g. $.datepicker.noWeekends
  32. onSelect: function(text,object){
  33. var self = this;
  34. setTimeout( function(){
  35. if( !object.settings.inline ){
  36. $(object.input)
  37. .date( "addMobileStyle" );
  38. } else {
  39. $(object.settings.altField)
  40. .date( "addMobileStyle" );
  41. }
  42. },0);
  43. }, // Define a callback function when a date is selected
  44. onChangeMonthYear: function(month,year,object){
  45. var self = this;
  46. setTimeout( function(){
  47. if( !object.settings.inline ){
  48. $(object.input)
  49. .date( "addMobileStyle" );
  50. } else {
  51. $(object.settings.altField)
  52. .date( "addMobileStyle" );
  53. }
  54. },0);
  55. },
  56. beforeShow: function( element ){
  57. var self = this;
  58. setTimeout( function(){
  59. $(element)
  60. .data("mobileDate").addMobileStyle();
  61. },0);
  62. },// Define a callback function when the month or year is changed
  63. numberOfMonths: 1, // Number of months to show at a time
  64. showCurrentAtPos: 0, // The position in multipe months at which to show the current month (starting at 0)
  65. stepMonths: 1, // Number of months to step back/forward
  66. stepBigMonths: 12, // Number of months to step back/forward for the big links
  67. altField: "", // Selector for an alternate field to store selected dates into
  68. altFormat: "", // The date format to use for the alternate field
  69. constrainInput: true, // The input is constrained by the current date format
  70. showButtonPanel: false, // True to show button panel, false to not show it
  71. autoSize: false, // True to size the input for the date format, false to leave as is
  72. disabled: false, // The initial disabled state
  73. dateFormat: "dd/mm/yy",
  74. inline: false
  75. },
  76. _create:function(){
  77. var calendar, interval,
  78. that = this;
  79. if( this.options.inline ){
  80. this.options.altField = this.element;
  81. calendar = $("<div>").datepicker(this.options);
  82. this.element.parent().after(calendar);
  83. } else {
  84. this.element.datepicker( this.options );
  85. calendar= this.element.datepicker( "widget" );
  86. }
  87. this.calendar = calendar;
  88. this.baseWidget = ( !this.options.inline )? this.element: this.calendar;
  89. this._on({
  90. "change": function() {
  91. if( this.options.inline ){
  92. this.calendar.datepicker( "setDate", this.element.val() );
  93. }
  94. this._delay( "addMobileStyle", 10 );
  95. },
  96. "input": function() {
  97. interval = window.setInterval( function(){
  98. if( !that.calendar.hasClass( "mobile-enhanced" ) ){
  99. that.addMobileStyle();
  100. } else {
  101. clearInterval( interval );
  102. }
  103. });
  104. }
  105. });
  106. this.addMobileStyle();
  107. },
  108. setOption:function( key, value ){
  109. this.calendar.datepicker("option",key,value);
  110. },
  111. getDate: function(){
  112. console.log( this.baseWidget );
  113. return this.baseWidget.datepicker("getDate");
  114. },
  115. _destroy: function(){
  116. return this.baseWidget.datepicker("destroy");
  117. },
  118. isDisabled: function(){
  119. return this.baseWidget.datepicker("isDisabled");
  120. },
  121. refresh: function(){
  122. return this.baseWidget.datepicker("refresh");
  123. },
  124. setDate: function( date ){
  125. return this.baseWidget.datepicker("setDate", date );
  126. },
  127. widget:function(){
  128. return this.element;
  129. },
  130. addMobileStyle: function(){
  131. this.calendar.addClass("ui-shadow")
  132. .find( ".ui-datepicker-calendar" ).addClass( "mobile-enhanced" ).end()
  133. .find(".ui-datepicker-calendar a,.ui-datepicker-prev,.ui-datepicker-next").addClass("ui-btn").end()
  134. .find(".ui-datepicker-prev").addClass("ui-btn-icon-notext ui-btn-inline ui-corner-all ui-icon-arrow-l ui-shadow").end()
  135. .find(".ui-datepicker-next").addClass("ui-btn-icon-notext ui-btn-inline ui-corner-all ui-icon-arrow-r ui-shadow").end()
  136. .find(".ui-datepicker-header").addClass("ui-body-a ui-corner-top").removeClass("ui-corner-all").end()
  137. .find(".ui-datepicker-calendar th" ).addClass("ui-bar-a").end()
  138. .find(".ui-datepicker-calendar td" ).addClass("ui-body-a").end()
  139. .find(".ui-datepicker-calendar a.ui-state-active").addClass("ui-btn-active").end()
  140. .find(".ui-datepicker-calendar a.ui-state-highlight").addClass("ui-btn-up-a").end().find(".ui-state-disabled").css("opacity","1");
  141. }
  142. });
  143. })( jQuery );