You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

404 lines
13 KiB

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. "use strict";
  2. $(document).ready(function(){
  3. // Minimum setup
  4. $('#datetimepicker1').datetimepicker({
  5. icons: {
  6. time: "icofont icofont-clock-time",
  7. date: "icofont icofont-ui-calendar",
  8. up: "icofont icofont-rounded-up",
  9. down: "icofont icofont-rounded-down",
  10. next: "icofont icofont-rounded-right",
  11. previous: "icofont icofont-rounded-left"
  12. }
  13. });
  14. // Using Locales
  15. $('#datetimepicker2').datetimepicker({
  16. locale: 'ru',
  17. icons: {
  18. time: "icofont icofont-clock-time",
  19. date: "icofont icofont-ui-calendar",
  20. up: "icofont icofont-rounded-up",
  21. down: "icofont icofont-rounded-down",
  22. next: "icofont icofont-rounded-right",
  23. previous: "icofont icofont-rounded-left"
  24. }
  25. });
  26. // Custom Formats
  27. $('#datetimepicker3').datetimepicker({
  28. format: 'LT',
  29. icons: {
  30. time: "icofont icofont-clock-time",
  31. date: "icofont icofont-ui-calendar",
  32. up: "icofont icofont-rounded-up",
  33. down: "icofont icofont-rounded-down",
  34. next: "icofont icofont-rounded-right",
  35. previous: "icofont icofont-rounded-left"
  36. }
  37. });
  38. // No Icon (input field only)
  39. $('#datetimepicker4').datetimepicker({
  40. icons: {
  41. time: "icofont icofont-clock-time",
  42. date: "icofont icofont-ui-calendar",
  43. up: "icofont icofont-rounded-up",
  44. down: "icofont icofont-rounded-down",
  45. next: "icofont icofont-rounded-right",
  46. previous: "icofont icofont-rounded-left"
  47. }
  48. });
  49. // Enabled/Disabled Dates
  50. $('#datetimepicker5').datetimepicker({
  51. defaultDate: "11/1/2013",
  52. disabledDates: [
  53. moment("12/25/2013"),
  54. new Date(2013, 11 - 1, 21),
  55. "11/22/2013 00:53"
  56. ],
  57. icons: {
  58. time: "icofont icofont-clock-time",
  59. date: "icofont icofont-ui-calendar",
  60. up: "icofont icofont-rounded-up",
  61. down: "icofont icofont-rounded-down",
  62. next: "icofont icofont-rounded-right",
  63. previous: "icofont icofont-rounded-left"
  64. }
  65. });
  66. // Linked Pickers
  67. $('#datetimepicker6').datetimepicker({
  68. icons: {
  69. time: "icofont icofont-clock-time",
  70. date: "icofont icofont-ui-calendar",
  71. up: "icofont icofont-rounded-up",
  72. down: "icofont icofont-rounded-down",
  73. next: "icofont icofont-rounded-right",
  74. previous: "icofont icofont-rounded-left"
  75. }
  76. });
  77. $('#datetimepicker7').datetimepicker({
  78. useCurrent: false, //Important! See issue #1075
  79. icons: {
  80. time: "icofont icofont-clock-time",
  81. date: "icofont icofont-ui-calendar",
  82. up: "icofont icofont-rounded-up",
  83. down: "icofont icofont-rounded-down",
  84. next: "icofont icofont-rounded-right",
  85. previous: "icofont icofont-rounded-left"
  86. }
  87. });
  88. $("#datetimepicker6").on("dp.change", function(e) {
  89. $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
  90. });
  91. $("#datetimepicker7").on("dp.change", function(e) {
  92. $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
  93. });
  94. // Custom icons
  95. $('#datetimepicker8').datetimepicker({
  96. icons: {
  97. time: "icofont icofont-clock-time",
  98. date: "icofont icofont-ui-calendar",
  99. up: "icofont icofont-rounded-up",
  100. down: "icofont icofont-rounded-down"
  101. }
  102. });
  103. // View Mode
  104. $('#datetimepicker9').datetimepicker({
  105. viewMode: 'years',
  106. icons: {
  107. time: "icofont icofont-clock-time",
  108. date: "icofont icofont-ui-calendar",
  109. up: "icofont icofont-rounded-up",
  110. down: "icofont icofont-rounded-down",
  111. next: "icofont icofont-rounded-right",
  112. previous: "icofont icofont-rounded-left"
  113. }
  114. });
  115. // Min View Mode
  116. $('#datetimepicker10').datetimepicker({
  117. viewMode: 'years',
  118. format: 'MM/YYYY',
  119. icons: {
  120. time: "icofont icofont-clock-time",
  121. date: "icofont icofont-ui-calendar",
  122. up: "icofont icofont-rounded-up",
  123. down: "icofont icofont-rounded-down",
  124. next: "icofont icofont-rounded-right",
  125. previous: "icofont icofont-rounded-left"
  126. }
  127. });
  128. // Disabled Days of the Week
  129. $('#datetimepicker11').datetimepicker({
  130. daysOfWeekDisabled: [0, 6],
  131. icons: {
  132. time: "icofont icofont-clock-time",
  133. date: "icofont icofont-ui-calendar",
  134. up: "icofont icofont-rounded-up",
  135. down: "icofont icofont-rounded-down",
  136. next: "icofont icofont-rounded-right",
  137. previous: "icofont icofont-rounded-left"
  138. }
  139. });
  140. $('input[name="daterange"]').daterangepicker();
  141. $(function() {
  142. $('input[name="birthdate"]').daterangepicker({
  143. singleDatePicker: true,
  144. showDropdowns: true
  145. },
  146. function(start, end, label) {
  147. var years = moment().diff(start, 'years');
  148. alert("You are " + years + " years old.");
  149. });
  150. $('input[name="datefilter"]').daterangepicker({
  151. autoUpdateInput: false,
  152. locale: {
  153. cancelLabel: 'Clear'
  154. }
  155. });
  156. $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
  157. $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  158. });
  159. $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
  160. $(this).val('');
  161. });
  162. var start = moment().subtract(29, 'days');
  163. var end = moment();
  164. function cb(start, end) {
  165. $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  166. }
  167. $('#reportrange').daterangepicker({
  168. startDate: start,
  169. endDate: end,
  170. "drops": "up",
  171. ranges: {
  172. 'Today': [moment(), moment()],
  173. 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  174. 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
  175. 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
  176. 'This Month': [moment().startOf('month'), moment().endOf('month')],
  177. 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  178. }
  179. }, cb);
  180. cb(start, end);
  181. $('.input-daterange input').each(function() {
  182. $(this).datepicker();
  183. });
  184. $('#sandbox-container .input-daterange').datepicker({
  185. todayHighlight: true
  186. });
  187. $('.input-group-date-custom').datepicker({
  188. todayBtn: true,
  189. clearBtn: true,
  190. keyboardNavigation: false,
  191. forceParse: false,
  192. todayHighlight: true,
  193. defaultViewDate: {
  194. year: '2017',
  195. month: '01',
  196. day: '01'
  197. }
  198. });
  199. $('.multiple-select').datepicker({
  200. todayBtn: true,
  201. clearBtn: true,
  202. multidate: true,
  203. keyboardNavigation: false,
  204. forceParse: false,
  205. todayHighlight: true,
  206. defaultViewDate: {
  207. year: '2017',
  208. month: '01',
  209. day: '01'
  210. }
  211. });
  212. $('#config-demo').daterangepicker({
  213. "singleDatePicker": true,
  214. "showDropdowns": true,
  215. "timePicker": true,
  216. "timePicker24Hour": true,
  217. "timePickerSeconds": true,
  218. "showCustomRangeLabel": false,
  219. "alwaysShowCalendars": true,
  220. "startDate": "11/30/2016",
  221. "endDate": "12/06/2016",
  222. "drops": "up"
  223. }, function(start, end, label) {
  224. console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
  225. });
  226. });
  227. // Date-dropper js start
  228. $("#dropper-default").dateDropper( {
  229. dropWidth: 200,
  230. dropPrimaryColor: "#1abc9c",
  231. dropBorder: "1px solid #1abc9c"
  232. }),
  233. $("#dropper-animation").dateDropper( {
  234. dropWidth: 200,
  235. init_animation: "bounce",
  236. dropPrimaryColor: "#1abc9c",
  237. dropBorder: "1px solid #1abc9c"
  238. }),
  239. $("#dropper-format").dateDropper( {
  240. dropWidth: 200,
  241. format: "F S, Y",
  242. dropPrimaryColor: "#1abc9c",
  243. dropBorder: "1px solid #1abc9c"
  244. }),
  245. $("#dropper-lang").dateDropper( {
  246. dropWidth: 200,
  247. format: "F S, Y",
  248. dropPrimaryColor: "#1abc9c",
  249. dropBorder: "1px solid #1abc9c",
  250. lang: "ar"
  251. }),
  252. $("#dropper-lock").dateDropper( {
  253. dropWidth: 200,
  254. format: "F S, Y",
  255. dropPrimaryColor: "#1abc9c",
  256. dropBorder: "1px solid #1abc9c",
  257. lock: "from"
  258. }),
  259. $("#dropper-max-year").dateDropper( {
  260. dropWidth: 200,
  261. dropPrimaryColor: "#1abc9c",
  262. dropBorder: "1px solid #1abc9c",
  263. maxYear: "2020"
  264. }),
  265. $("#dropper-min-year").dateDropper( {
  266. dropWidth: 200,
  267. dropPrimaryColor: "#1abc9c",
  268. dropBorder: "1px solid #1abc9c",
  269. minYear: "1990"
  270. }),
  271. $("#year-range").dateDropper( {
  272. dropWidth: 200,
  273. dropPrimaryColor: "#1abc9c",
  274. dropBorder: "1px solid #1abc9c",
  275. yearsRange: "5"
  276. }),
  277. $("#dropper-width").dateDropper( {
  278. dropPrimaryColor: "#1abc9c",
  279. dropBorder: "1px solid #1abc9c",
  280. dropWidth: 500
  281. }),
  282. $("#dropper-dangercolor").dateDropper( {
  283. dropWidth: 200,
  284. dropPrimaryColor: "#e74c3c",
  285. dropBorder: "1px solid #e74c3c",
  286. }),
  287. $("#dropper-backcolor").dateDropper( {
  288. dropWidth: 200,
  289. dropPrimaryColor: "#1abc9c",
  290. dropBorder: "1px solid #1abc9c",
  291. dropBackgroundColor: "#bdc3c7"
  292. }),
  293. $("#dropper-txtcolor").dateDropper( {
  294. dropWidth: 200,
  295. dropPrimaryColor: "#46627f",
  296. dropBorder: "1px solid #46627f",
  297. dropTextColor: "#FFF",
  298. dropBackgroundColor: "#e74c3c"
  299. }),
  300. $("#dropper-radius").dateDropper( {
  301. dropWidth: 200,
  302. dropPrimaryColor: "#1abc9c",
  303. dropBorder: "1px solid #1abc9c",
  304. dropBorderRadius: "0"
  305. }),
  306. $("#dropper-border").dateDropper( {
  307. dropWidth: 200,
  308. dropPrimaryColor: "#1abc9c",
  309. dropBorder: "2px solid #1abc9c"
  310. }),
  311. $("#dropper-shadow").dateDropper( {
  312. dropWidth: 200,
  313. dropPrimaryColor: "#1abc9c",
  314. dropBorder: "1px solid #1abc9c",
  315. dropBorderRadius: "20px",
  316. dropShadow: "0 0 20px 0 rgba(26, 188, 156, 0.6)"
  317. })
  318. // Date-dropper js end
  319. // Color picker js start
  320. function change_checkbox_color() {
  321. $('.color-box .show-box').on('click', function() {
  322. $(".color-box").toggleClass("open");
  323. });
  324. $('.colors-list a').on('click', function() {
  325. var curr_color = $('main').data('checkbox-color');
  326. var color = $(this).data('checkbox-color');
  327. var new_colot = 'checkbox-' + color;
  328. $('.rkmd-checkbox .input-checkbox').each(function(i, v) {
  329. var findColor = $(this).hasClass(curr_color);
  330. if (findColor) {
  331. $(this).removeClass(curr_color);
  332. $(this).addClass(new_colot);
  333. }
  334. $('main').data('checkbox-color', new_colot);
  335. });
  336. });
  337. }
  338. // Color picker
  339. $("#custom").spectrum({
  340. color: "#f00"
  341. });
  342. $("#flat").spectrum({
  343. flat: true,
  344. showInput: true
  345. });
  346. $("#flatClearable").spectrum({
  347. flat: true,
  348. showInput: true,
  349. allowEmpty: true
  350. });
  351. // Color picker js end
  352. // Mini-color js start
  353. $('.demo').each( function() {
  354. //
  355. // Dear reader, it's actually very easy to initialize MiniColors. For example:
  356. //
  357. // $(selector).minicolors();
  358. //
  359. // The way I've done it below is just for the demo, so don't get confused
  360. // by it. Also, data- attributes aren't supported at this time...they're
  361. // only used for this demo.
  362. //
  363. $(this).minicolors({
  364. control: $(this).attr('data-control') || 'hue',
  365. defaultValue: $(this).attr('data-defaultValue') || '',
  366. format: $(this).attr('data-format') || 'hex',
  367. keywords: $(this).attr('data-keywords') || '',
  368. inline: $(this).attr('data-inline') === 'true',
  369. letterCase: $(this).attr('data-letterCase') || 'lowercase',
  370. opacity: $(this).attr('data-opacity'),
  371. position: $(this).attr('data-position') || 'bottom left',
  372. swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
  373. change: function(value, opacity) {
  374. if( !value ) return;
  375. if( opacity ) value += ', ' + opacity;
  376. if( typeof console === 'object' ) {
  377. console.log(value);
  378. }
  379. },
  380. theme: 'bootstrap'
  381. });
  382. });
  383. // Mini-color js ends
  384. });