Question

我正在使用Owl curasol日期选择器。我给下面的代码工作正常。

但如果我在下个月选择它将显示2 4 6 8然后下个月将显示日期。

我不知道如何解决这个问题是什么？

<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>
<style type="text/css">
    .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none;
}
.ui-datepicker-calendar {
    display: none;
    }
</style>
<script type="text/javascript">
    $(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()];*/
                date = inst.selectedYear+'-'+zeroPad(parseInt(inst.selectedMonth)+1)+'-'+zeroPad(i);
                d = new Date(inst.selectedYear+'-'+zeroPad(parseInt(inst.selectedMonth)+1)+'-'+zeroPad(i));
                console.log(inst.selectedYear+'-'+zeroPad(parseInt(inst.selectedMonth)+1)+'-'+zeroPad(i));
                n = weekday[d.getDay()];
               owl
                .trigger('add.owl.carousel', ['<form id="'+date+'" method="post" action="#" onsubmit="event.preventDefault()" ><input type="hidden" id="customerId" name="customer_id" value="<?php echo $block->getId();?>"><button name="date" class="datediv" id="'+date+'">'+zeroPad(i)+'<br>'+n+'</button></form>'])
                .trigger('refresh.owl.carousel');


            }
            $(".datediv").click(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
      });

  });

    function zeroPad(number){
    return ('0' + String(number)).slice(-2);
}
</script>

如何解决此问题？

如果我添加此代码

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

它将显示2 4 6然后选择的蛾所有日期将显示如果我删除此代码上一个选定月份和当前蛾选择也显示

我不知道这是什么问题？如何解决这个问题

＆＃13;

$(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
      });

  });

＆＃13;

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

＆＃13;

<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>

＆＃13;

owl curasol date picker show 2 4 6 8

0 个答案: