CODEWITHSUNDEEP
javascriptjqueryhtml
Learning
Learning

Reputation: 75

carousel set starting position

I am using below script for Date picker and carousel it working fine

My problem is if i select Sep

I want to set starting position as 10

but i can't able to set

How to set starting position

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

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

this is trigger the carousel script i am using that 

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');

How to solve this problem in this carousel?

I am using owl carousel

Upvotes: 0

Views: 1654

Answers (1)

Learning
Learning

Reputation: 75

I got answer 

var cDate = new Date();
        var toIndex = cDate.getDate()-1;
        $(".owl-demo").trigger("to.owl.carousel", [toIndex, 1, true]);

for this i set start possition

Upvotes: 1

Related Questions