JAVASCRIPT   20

advanced form js

Guest on 15th July 2022 01:39:00 AM

  1. //date picker start
  2.  
  3. if (top.location != location) {
  4.     top.location.href = document.location.href ;
  5. }
  6. $(function(){
  7.     window.prettyPrint && prettyPrint();
  8.     $('.default-date-picker').datepicker({
  9.         format: 'dd-mm-yyyy'
  10.     });
  11.     $('.dpYears').datepicker();
  12.     $('.dpMonths').datepicker();
  13.  
  14.  
  15.     var startDate = new Date(2012,1,20);
  16.     var endDate = new Date(2012,1,25);
  17.     $('.dp4').datepicker()
  18.         .on('changeDate', function(ev){
  19.             if (ev.date.valueOf() > endDate.valueOf()){
  20.                 $('.alert').show().find('strong').text('The start date can not be greater then the end date');
  21.             } else {
  22.                 $('.alert').hide();
  23.                 startDate = new Date(ev.date);
  24.                 $('#startDate').text($('.dp4').data('date'));
  25.             }
  26.             $('.dp4').datepicker('hide');
  27.         });
  28.     $('.dp5').datepicker()
  29.         .on('changeDate', function(ev){
  30.             if (ev.date.valueOf() < startDate.valueOf()){
  31.                 $('.alert').show().find('strong').text('The end date can not be less then the start date');
  32.             } else {
  33.                 $('.alert').hide();
  34.                 endDate = new Date(ev.date);
  35.                 $('.endDate').text($('.dp5').data('date'));
  36.             }
  37.             $('.dp5').datepicker('hide');
  38.         });
  39.  
  40.     // disabling dates
  41.     var nowTemp = new Date();
  42.     var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
  43.  
  44.     var checkin = $('.dpd1').datepicker({
  45.         onRender: function(date) {
  46.             return date.valueOf() < now.valueOf() ? 'disabled' : '';
  47.         }
  48.     }).on('changeDate', function(ev) {
  49.             if (ev.date.valueOf() > checkout.date.valueOf()) {
  50.                 var newDate = new Date(ev.date)
  51.                 newDate.setDate(newDate.getDate() + 1);
  52.                 checkout.setValue(newDate);
  53.             }
  54.             checkin.hide();
  55.             $('.dpd2')[0].focus();
  56.         }).data('datepicker');
  57.     var checkout = $('.dpd2').datepicker({
  58.         onRender: function(date) {
  59.             return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  60.         }
  61.     }).on('changeDate', function(ev) {
  62.             checkout.hide();
  63.         }).data('datepicker');
  64. });
  65.  
  66. //date picker end
  67.  
  68.  
  69. //datetime picker start
  70.  
  71. $(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
  72.  
  73. $(".form_datetime-component").datetimepicker({
  74.     format: "dd MM yyyy - hh:ii"
  75. });
  76.  
  77. $(".form_datetime-adv").datetimepicker({
  78.     format: "dd MM yyyy - hh:ii",
  79.     autoclose: true,
  80.     todayBtn: true,
  81.     startDate: "2013-02-14 10:00",
  82.     minuteStep: 10
  83. });
  84.  
  85. $(".form_datetime-meridian").datetimepicker({
  86.     format: "dd MM yyyy - HH:ii P",
  87.     showMeridian: true,
  88.     autoclose: true,
  89.     todayBtn: true
  90. });
  91.  
  92. //datetime picker end
  93.  
  94. //timepicker start
  95. $('.timepicker-default').timepicker();
  96.  
  97.  
  98. $('.timepicker-24').timepicker({
  99.     autoclose: true,
  100.     minuteStep: 1,
  101.     showSeconds: true,
  102.     showMeridian: false
  103. });
  104.  
  105. //timepicker end
  106.  
  107. //colorpicker start
  108.  
  109. /*$('.colorpicker-default').colorpicker({
  110.     format: 'hex'
  111. });
  112. $('.colorpicker-rgba').colorpicker();*/
  113.  
  114. //colorpicker end
  115.  
  116. //multiselect start
  117.  
  118.  
  119. $('#my_multi_select1').multiSelect();
  120. $('#my_multi_select2').multiSelect({
  121.     selectableOptgroup: true
  122. });
  123.  
  124. $('#my_multi_select3').multiSelect({
  125.     selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
  126.     selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
  127.     afterInit: function (ms) {
  128.         var that = this,
  129.             $selectableSearch = that.$selectableUl.prev(),
  130.             $selectionSearch = that.$selectionUl.prev(),
  131.             selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
  132.             selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
  133.  
  134.         that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
  135.             .on('keydown', function (e) {
  136.                 if (e.which === 40) {
  137.                     that.$selectableUl.focus();
  138.                     return false;
  139.                 }
  140.             });
  141.  
  142.         that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
  143.             .on('keydown', function (e) {
  144.                 if (e.which == 40) {
  145.                     that.$selectionUl.focus();
  146.                     return false;
  147.                 }
  148.             });
  149.     },
  150.     afterSelect: function () {
  151.         this.qs1.cache();
  152.         this.qs2.cache();
  153.     },
  154.     afterDeselect: function () {
  155.         this.qs1.cache();
  156.         this.qs2.cache();
  157.     }
  158. });
  159.  
  160.  
  161. //multiselect end
  162.  
  163.  
  164. //spinner start
  165. $('#spinner1').spinner();
  166. $('#spinner2').spinner({disabled: true});
  167. $('#spinner3').spinner({value:0, min: 0, max: 10});
  168. $('#spinner4').spinner({value:0, step: 5, min: 0, max: 200});
  169. //spinner end
  170.  
  171.  
  172.  
  173. //wysihtml5 start
  174.  
  175. $('.wysihtml5').wysihtml5();
  176.  
  177. //wysihtml5 end
  178.  
  179.  
  180. //tag input
  181.  
  182. function onAddTag(tag) {
  183.     alert("Added a tag: " + tag);
  184. }
  185. function onRemoveTag(tag) {
  186.     alert("Removed a tag: " + tag);
  187. }
  188.  
  189. function onChangeTag(input,tag) {
  190.     alert("Changed a tag: " + tag);
  191. }
  192.  
  193. $(function() {
  194.  
  195.     $('#tags_1').tagsInput({width:'auto'});
  196.     $('#tags_2').tagsInput({
  197.         width: '250',
  198.         onChange: function(elem, elem_tags)
  199.         {
  200.             var languages = ['php','ruby','javascript'];
  201.             $('.tag', elem_tags).each(function()
  202.             {
  203.                 if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
  204.                     $(this).css('background-color', 'yellow');
  205.             });
  206.         }
  207.     });
  208.  
  209.     // Uncomment this line to see the callback functions in action
  210.     //                  $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});
  211.  
  212.     // Uncomment this line to see an input with no interface for adding new tags.
  213.     //                  $('input.tags').tagsInput({interactive:false});
  214. });

Raw Paste


Login or Register to edit or fork this paste. It's free.