advanced-form-element.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. //[advanced form element Javascript]
  2. $(function () {
  3. "use strict";
  4. //Initialize Select2 Elements
  5. $('.select2').select2();
  6. //Datemask dd/mm/yyyy
  7. $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' });
  8. //Datemask2 mm/dd/yyyy
  9. $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' });
  10. //Money Euro
  11. $('[data-mask]').inputmask();
  12. //Date range picker
  13. $('#reservation').daterangepicker();
  14. //Date range picker with time picker
  15. $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' });
  16. //Date range as a button
  17. $('#daterange-btn').daterangepicker(
  18. {
  19. ranges : {
  20. 'Today' : [moment(), moment()],
  21. 'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  22. 'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
  23. 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
  24. 'This Month' : [moment().startOf('month'), moment().endOf('month')],
  25. 'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  26. },
  27. startDate: moment().subtract(29, 'days'),
  28. endDate : moment()
  29. },
  30. function (start, end) {
  31. $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
  32. }
  33. );
  34. //Date picker
  35. $('#datepicker').datepicker({
  36. autoclose: true
  37. });
  38. //iCheck for checkbox and radio inputs
  39. $('.ichack-input input[type="checkbox"].minimal, .ichack-input input[type="radio"].minimal').iCheck({
  40. checkboxClass: 'icheckbox_minimal-blue',
  41. radioClass: 'icheckbox_minimal-blue'
  42. });
  43. //Red color scheme for iCheck
  44. $('.ichack-input input[type="checkbox"].minimal-red, .ichack-input input[type="radio"].minimal-red').iCheck({
  45. checkboxClass: 'icheckbox_minimal-red',
  46. radioClass : 'iradio_minimal-red'
  47. });
  48. //Flat red color scheme for iCheck
  49. $('.ichack-input input[type="checkbox"].flat-red, .ichack-input input[type="radio"].flat-red').iCheck({
  50. checkboxClass: 'icheckbox_flat-green',
  51. radioClass : 'iradio_flat-green'
  52. });
  53. //Colorpicker
  54. $('.my-colorpicker1').colorpicker();
  55. //color picker with addon
  56. $('.my-colorpicker2').colorpicker();
  57. //Timepicker
  58. $('.timepicker').timepicker({
  59. showInputs: false
  60. });
  61. //Bootstrap-TouchSpin
  62. $(".vertical-spin").TouchSpin({
  63. verticalbuttons: true,
  64. verticalupclass: 'ti-plus',
  65. verticaldownclass: 'ti-minus'
  66. });
  67. var vspinTrue = $(".vertical-spin").TouchSpin({
  68. verticalbuttons: true
  69. });
  70. if (vspinTrue) {
  71. $('.vertical-spin').prev('.bootstrap-touchspin-prefix').remove();
  72. }
  73. $("input[name='demo1']").TouchSpin({
  74. min: 0,
  75. max: 100,
  76. step: 0.1,
  77. decimals: 2,
  78. boostat: 5,
  79. maxboostedstep: 10,
  80. postfix: '%'
  81. });
  82. $("input[name='demo2']").TouchSpin({
  83. min: -1000000000,
  84. max: 1000000000,
  85. stepinterval: 50,
  86. maxboostedstep: 10000000,
  87. prefix: '$'
  88. });
  89. $("input[name='demo3']").TouchSpin();
  90. $("input[name='demo3_1']").TouchSpin({
  91. initval: 40
  92. });
  93. $("input[name='demo4']").TouchSpin({
  94. prefix: "pre",
  95. postfix: "post"
  96. });
  97. });