Question

嗨我在选择日期月份上有日期选择器＆amp;它将显示该Moth中的所有日期，它工作正常

现在我想添加一个Slider On，以便在添加Curasol Date picker Stopped Working后使用Owl Curasol。

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 Only

如何过来这个？

Answer 1

希望这有帮助！

您应该使用轮播中的<?php // Pre PHP 7 code use some\namespace\ClassA; use some\namespace\ClassB; use some\namespace\ClassC as C; ... // PHP 7+ code use some\namespace\{ClassA, ClassB, ClassC as C}; use function some\namespace\{fn_a, fn_b, fn_c}; use const some\namespace\{ConstA, ConstB, ConstC};方法在carousel中附加项目。也可以在追加后使用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;
}

Owl Curasol我的约会选择器

1 个答案: