フクロウCurasolは、それが働いている蛾のすべての日付が表示されます、私は選択日付月&年の日付ピッカーを持っている私の日付ピッカー

Question

こんにちはで動作していないファイン

今、私は私が使用したように、その上でスライダーを追加したいですカラソル日付ピッカーを追加した後のOwl Curasol Stopped Working。

My Full code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" href="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.css"> 

<script type="text/javascript"> 
var weekday = new Array(7); 
     weekday[0] = "Sunday"; 
     weekday[1] = "Monday"; 
     weekday[2] = "Tuesday"; 
     weekday[3] = "Wednesday"; 
     weekday[4] = "Thursday"; 
     weekday[5] = "Friday"; 
     weekday[6] = "Saturday"; 
$(function() { 
    $('.date-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy', 
     minDate: 0, 
     onClose: function(dateText, inst) { 
      $d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate(); 
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); 
      html=''; 
      for(i=1;i<=$d;i++){ 
       console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i); 
       d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i); 
       console.log(d); 
       n = weekday[d.getDay()]; 
       html += '<div class="datediv">div-'+i+'<br>'+n+'</div>'; 
      } 
      $('#datecontent').html(html); 
     } 
    }); 
$(document).ready(function() { 
    $(document).live('click', '.datediv', function() { alert("hello"); });}); 
}); 
</script> 

のHTMLコード

<label for="startDate">Date :</label> 
    <input name="startDate" id="startDate" class="date-picker" /> 
    <div id="datecontent" id="owl-demo"> 
    </div> 

Owl Script

<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/assets/js/jquery-1.9.1.min.js"></script> 
<script src="http://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/owl-carousel/owl.carousel.js"></script> 


<script type="text/javascript"> 


    $(document).ready(function() { 

     $("#owl-demo").owlCarousel({ 
      items : 10, //10 items above 1000px browser width 
      itemsDesktop : [1000,5], //5 items between 1000px and 901px 
      itemsDesktopSmall : [900,3], // betweem 900px and 601px 
      itemsTablet: [600,2], //2 items between 600 and 0; 
      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option 
     }); 

    }); 

</script> 

このエラーが発生しましたTypeError: $(...).datepicker is not a function

この問題を解決する方法。私はJquery Conflictのためだと思う。

どうやってこれをやり遂げるの？

Answer 1

希望します。

カルーセルにaddメソッドを使用して、カルーセル内にアイテムを追加する必要があります。また、追加後にスライダーを実行するにはrefreshを使用してください。

owl.trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']).trigger('refresh.owl.carousel'); 

新しいアイテムを追加する前にカルーセルからアイテムを削除するためにremoveメソッドを使用します。

for (var i =0; i< $('.owl-item').length; i++) { 
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel'); 
} 

$(document).ready(function() { 
 
var weekday = new Array(7); 
 
     weekday[0] = "Sunday"; 
 
     weekday[1] = "Monday"; 
 
     weekday[2] = "Tuesday"; 
 
     weekday[3] = "Wednesday"; 
 
     weekday[4] = "Thursday"; 
 
     weekday[5] = "Friday"; 
 
     weekday[6] = "Saturday"; 
 
    $('.date-picker').datepicker({ 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     showButtonPanel: true, 
 
     dateFormat: 'MM yy', 
 
     minDate: 0, 
 
     onClose: function(dateText, inst) { 
 
      $d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate(); 
 
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); 
 
      for (var i =0; i< $('.owl-item').length; i++) { 
 
owl.trigger('remove.owl.carousel', [i]).trigger('refresh.owl.carousel'); 
 
} 
 
      for(i=1;i<=$d;i++){ 
 
       console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i); 
 
       d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i); 
 
       console.log(d); 
 
       n = weekday[d.getDay()]; 
 
       owl 
 
    .trigger('add.owl.carousel', ['<div class="datediv">div-'+i+'<br>'+n+'</div>']) 
 
    .trigger('refresh.owl.carousel'); 
 
      } 
 
     } 
 
    }); 
 

 
    $(document).on('click', '.datediv', function() { alert("hello"); }); 
 
    var owl = $(".owl-demo"); 
 
    owl.owlCarousel({ 
 
      margin: 20, 
 
      items : 10, //10 items above 1000px browser width 
 
      itemsDesktop : [1000,5], //5 items between 1000px and 901px 
 
      itemsDesktopSmall : [900,3], // betweem 900px and 601px 
 
      itemsTablet: [600,2], //2 items between 600 and 0; 
 
      itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option 
 
     }); 
 

 
    });

.owl-item { 
 
    -webkit-tap-highlight-color: transparent; 
 
    position: relative; 
 
    min-height: 1px; 
 
    float: left; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-touch-callout: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/> 
 
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/> 
 
<label for="startDate">Date :</label> 
 
<input name="startDate" id="startDate" class="date-picker" /> 
 
<div id="datecontent" class="owl-demo"> 
 
</div>