pick-a-datetime.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /*=========================================================================================
  2. File Name: picker-date-time.js
  3. Description: Pick a date/time Picker, Date Range Picker JS
  4. ----------------------------------------------------------------------------------------
  5. Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. Author: Pixinvent
  7. Author URL: hhttp://www.themeforest.net/user/pixinvent
  8. ==========================================================================================*/
  9. (function(window, document, $) {
  10. 'use strict';
  11. /******* Pick-a-date Picker *****/
  12. // Basic date
  13. $('.pickadate').pickadate();
  14. // Format Date Picker
  15. $('.format-picker').pickadate({
  16. format: 'mmmm, d, yyyy'
  17. });
  18. // Date limits
  19. $('.pickadate-limits').pickadate({
  20. min: [2019,3,20],
  21. max: [2019,5,28]
  22. });
  23. // Disabled Dates & Weeks
  24. $('.pickadate-disable').pickadate({
  25. disable: [
  26. 1,
  27. [2019,3,6],
  28. [2019,3,20]
  29. ]
  30. });
  31. // Picker Translations
  32. $( '.pickadate-translations' ).pickadate({
  33. formatSubmit: 'dd/mm/yyyy',
  34. monthsFull: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
  35. monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
  36. weekdaysShort: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
  37. today: 'aujourd\'hui',
  38. clear: 'clair',
  39. close: 'Fermer'
  40. });
  41. // Month Select Picker
  42. $('.pickadate-months').pickadate({
  43. selectYears: false,
  44. selectMonths: true
  45. });
  46. // Month and Year Select Picker
  47. $('.pickadate-months-year').pickadate({
  48. selectYears: true,
  49. selectMonths: true
  50. });
  51. // Short String Date Picker
  52. $('.pickadate-short-string').pickadate({
  53. weekdaysShort: ['S', 'M', 'Tu', 'W', 'Th', 'F', 'S'],
  54. showMonthsShort: true
  55. });
  56. // Change first weekday
  57. $('.pickadate-firstday').pickadate({
  58. firstDay: 1
  59. });
  60. /******* Pick-a-time Picker *****/
  61. // Basic time
  62. $('.pickatime').pickatime();
  63. // Format options
  64. $('.pickatime-format').pickatime({
  65. // Escape any “rule” characters with an exclamation mark (!).
  66. format: 'T!ime selected: h:i a',
  67. formatLabel: 'HH:i a',
  68. formatSubmit: 'HH:i',
  69. hiddenPrefix: 'prefix__',
  70. hiddenSuffix: '__suffix'
  71. });
  72. // Format options
  73. $('.pickatime-formatlabel').pickatime({
  74. formatLabel: function(time) {
  75. var hours = ( time.pick - this.get('now').pick ) / 60,
  76. label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now';
  77. return 'h:i a <sm!all>' + ( hours ? Math.abs(hours) : '' ) + label +'</sm!all>';
  78. }
  79. });
  80. // Min - Max Time to select
  81. $( '.pickatime-min-max').pickatime({
  82. // Using Javascript
  83. min: new Date(2015,3,20,7),
  84. max: new Date(2015,7,14,18,30)
  85. // Using Array
  86. // min: [7,30],
  87. // max: [14,0]
  88. });
  89. // Intervals
  90. $('.pickatime-intervals').pickatime({
  91. interval: 150
  92. });
  93. // Disable Time
  94. $('.pickatime-disable').pickatime({
  95. disable: [
  96. // Disable Using Integers
  97. 3, 5, 7, 13, 17, 21
  98. /* Using Array */
  99. // [0,30],
  100. // [2,0],
  101. // [8,30],
  102. // [9,0]
  103. ]
  104. });
  105. // Close on a user action
  106. $('.pickatime-close-action').pickatime({
  107. closeOnSelect: false,
  108. closeOnClear: false
  109. });
  110. })(window, document, jQuery);