So erstellen Sie einen neuen Eule-Folie mit Bedingung mithilfe von Jquery?

Ich will erstellen Sie eine neue Folie, die auf der Grundlage von Daten. Zum Beispiel, jeden Montag, Neue Folie erstellen sollte . Ich bin erfolgreich, bekam die Daten und das setup auf die html. Ich möchte Nun aber, um die Bedingung in Bezug auf diese.

Ich bin versucht, ein date-slider, verwenden können wählen Sie das Datum und die Zeit. Ich bin generieren die Wochentage und mit Hilfe von datepicker-und Anhängen in html ul.

Jetzt alles ist in Ordnung, aber jetzt will ich, um die Bedingung hinzuzufügen.

Wenn Sie es finden, Montag, neue Folie (ich bin mit Eule Karussell)

Hier ist ein code

$(document).ready(function() {
    $('#txtDate').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'MM yy',
      minDate:0,

      
      
      onClose: function() {
         var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
         var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
         $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
         var my_month=(parseInt(iMonth) + 1);
        
     
          $('.test').empty();  
          var date = new Date();
          var month = date.getMonth();
          var current_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
          //console.log(current_date);
          date.setDate(1);
          var all_days = [];
          var week=[];
          // while (date.getMonth() == month) {
          //   // if (date.getDay() === 0){
          //   //   continue; }
          //     var d = date.getFullYear() + '-' + my_month.toString().padStart(2, '') + '-' + date.getDate().toString().padStart(2, '0');
          //     all_days.push(d);

         
          //     date.setDate(date.getDate() + 1);

          //     //$('.test').append(all_days);
          // }

function getDaysInMonthWithExclude(month, year, excludeweekdays) {
   month--;
 var date = new Date(Date.UTC(year, month, 1));
 
  var days = [];
  while (date.getMonth() === month) {
      if (excludeweekdays.indexOf(date.getDay()) === -1) {
          days.push(new Date(date));
      }
      
      date.setDate(date.getDate() + 1);

  }
  return days;
}

var a=iYear;
var b=my_month;


var dateString=getDaysInMonthWithExclude(b, a, [0]); //b-1 means, dicreaseing by 1 month and [0] means sunday
//console.log(dateString);


var res=[];
$.each(dateString,function(key,val){

   var res = String(val).substr(0, 4);
   var res_count= res.length;
  // console.log(res_count);

      
});






var last_date_month= dateString.length;




// console.log(getDaysInMonthWithExclude(b, a, [0]));
// console.log(days);


        // console.log(all_days);
  /********************************Days  */      
          var first=dateString.slice(0,6)
          var second=dateString.slice(6,12)
          var third=dateString.slice(12,18)
          var fourth=dateString.slice(18,24)
          var fifth=dateString.slice(24,last_date_month)
         
          $('.mydate').empty();  
          $.each(first, function(key,val) {
           $('.mydate').append("<li><b>"+val+"</b></li>");
        });
        $('.mydate2').empty();  
        $.each(second, function(key,val) {
          $('.mydate2').append("<li><b>"+val+"</b></li>");
       });
       $('.mydate3').empty();  
       $.each(third, function(key,val) {
        $('.mydate3').append("<li><b>"+val+"</b></li>");
     });
     $('.mydate4').empty();  
     $.each(fourth, function(key,val) {
      $('.mydate4').append("<li><b>"+val+"</b></li>");
   });
   $('.mydate5').empty();  
   $.each(fifth, function(key,val) {
    $('.mydate5').append("<li><b>"+val+"</b></li>");
 });

//  console.log(third);
//  console.log(current_date);
//  if(jQuery.inArray(current_date, third) !== -1)
//  {
//   // console.log("found");
//  }
//  else
//  {
   
//    console.log("Not found");
//  }

 //*************************Week days */
 var week1=dateString.slice(0,6)
 var week2=dateString.slice(6,12)
 var week3=dateString.slice(12,18)
 var week4=dateString.slice(18,24)
 var week5=dateString.slice(24,last_date_month)
//console.log(week1);  
 $('.weekdays').empty();  
 $.each(week1, function(key,val) {

   var res = String(val).substr(0, 4);
   var res_count= res.length;

  $('.weekdays').append("<li><b>"+res+"</b></li>");
});
$('.weekdays2').empty();  
$.each(week2, function(key,val) {

   var res = String(val).substr(0, 4);
   var res_count= res.length;

 $('.weekdays2').append("<li><b>"+res+"</b></li>");
});
$('.weekdays3').empty();  
$.each(week3, function(key,val) {

   var res = String(val).substr(0, 4);
   var res_count= res.length;

$('.weekdays3').append("<li><b>"+res+"</b></li>");
});
$('.weekdays4').empty();  
$.each(week4, function(key,val) {

   var res = String(val).substr(0, 4);
   var res_count= res.length;

$('.weekdays4').append("<li><b>"+res+"</b></li>");
});
$('.weekdays5').empty();  
$.each(week5, function(key,val) {

   var res = String(val).substr(0, 4);
   var res_count= res.length;

$('.weekdays5').append("<li><b>"+res+"</b></li>");
});
      
   //*************************Week days */      
    
            
      },
        
      beforeShow: function() {
        if ((selDate = $(this).val()).length > 0) 
        {
           iYear = selDate.substring(selDate.length - 4, selDate.length);
           iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames'));
           $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
        }

       
       
     },

     

    
     
   });
   var li=$(".days li").click(function() {
      //alert($(this).html());
      console.log($(this).html());
     li.removeClass('selected');
      $(this).addClass('selected');
   });



   $("#click").click(function(e) {
      e.preventDefault(); //-- prevent form submit
      $('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><img src="http://placehold.it/140x100" alt=""></div>'])
          .trigger('refresh.owl.carousel');
  });
  
 });
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}

/* Month header */
.month {
  padding: 70px 25px;
  width: 100%%;
  background: #1abc9c;
  text-align: center;
}

/* Month list */
.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

/* Previous button inside month header */
.month .prev {
  float: left;
  padding-top: 10px;
}

/* Next button */
.month .next {
  float: right;
  padding-top: 10px;
}

/* Weekdays (Mon-Sun) */
.weekdays, .weekdays2, .weekdays3, .weekdays4, .weekdays5 {
  margin: 0;
  padding: 10px 0;
  background-color:#ddd;
}

.weekdays li, .weekdays2 li, .weekdays3 li, .weekdays4 li, .weekdays5 li  {
  display: inline-block;
  width: 13.6%%;
  color: #666;
  text-align: center;
}
li.selected {
  padding: 5px;
  background: #1abc9c;
  color: white !important;
}

/* Days (1-31) */
.days {
  padding: 10px 0;
  background: #eee;
  margin: 0;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

/* Highlight the "current" day */
.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}


/* Days (1-31) */
.mydate, .mydate2, .mydate3, .mydate4 , .mydate5 {
  padding: 10px 0;
  background: #eee;
  margin: 0;
}

.mydate li, .mydate2  li , .mydate3  li, .mydate4  li, .mydate5  li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

/* Weekdays (Mon-Sun)
.weekdays2, .weekdays3, .weekdays4, .weekdays5 {
  margin: 0;
  padding: 10px 0;
  background-color:#ddd;
}

.weekdays2 li, .weekdays3 li, .weekdays4 li, .weekdays5 li {
  display: inline-block;
  width: 13.6%%;
  color: #666;
  text-align: center;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="style2.css">
    <style>
    body
{
    font-family:Arial;
    font-size : 10pt;
    padding:15px;
}

.ui-datepicker-calendar {
    display: none;
}

    </style>

   
    <title>yes</title>
</head>
<body>

<form action="process.php" method="post"> 
Select Date : <input type='text' id='txtDate' name="mydate" />
<input type="hidden" name="ak" id="ak">
</form>

<div class="test"></div>
<div id="owl-demo" class="owl-carousel owl-theme">



 <div class="item">
  
 <ul class="weekdays">
</ul>
<ul class="mydate">

</ul>

<ul class="days">  
<li>11:45 AM</li> 
 
  <li>01:45 AM</li>
  <li>02:45 AM</li>
  <li>03:45 AM</li>
  <li>04:45 AM</li>
  <li>05:45 AM</li>
  <li>06:45 AM</li>
  <li>07:45 AM</li>
  <li>07:45 AM</li>
  <li>08:45 AM</li>
  <li>09:45 AM</li>
  <li>010:45 AM</li>
  <li>22:45 AM</li>

</ul>

    </div>


<div class="item">

<ul class="weekdays2">
</ul>

<ul class="mydate2">

</ul>

<ul class="days">  
<li>11:45 AM</li> 
 
  <li>01:45 AM</li>
  <li>02:45 AM</li>
  <li>03:45 AM</li>
  <li>04:45 AM</li>
  <li>05:45 AM</li>
  <li>06:45 AM</li>
  <li>07:45 AM</li>
  <li>07:45 AM</li>
  <li>08:45 AM</li>
  <li>09:45 AM</li>
  <li>010:45 AM</li>
  <li>22:45 AM</li>

</ul>

    </div>


<div class="item">
    
<ul class="weekdays3">
</ul>

<ul class="mydate3">

</ul>

<ul class="days">  
<li>11:45 AM</li> 
 
  <li>01:45 AM</li>
  <li>02:45 AM</li>
  <li>03:45 AM</li>
  <li>04:45 AM</li>
  <li>05:45 AM</li>
  <li>06:45 AM</li>
  <li>07:45 AM</li>
  <li>07:45 AM</li>
  <li>08:45 AM</li>
  <li>09:45 AM</li>
  <li>010:45 AM</li>
  <li>22:45 AM</li>


</ul>
     </div>

 

<div class="item">
<ul class="weekdays4">
</ul>

<ul class="mydate4">

</ul>


<ul class="days">  
<li>11:45 AM</li> 
 
  <li>01:45 AM</li>
  <li>02:45 AM</li>
  <li>03:45 AM</li>
  <li>04:45 AM</li>
  <li>05:45 AM</li>
  <li>06:45 AM</li>
  <li>07:45 AM</li>
  <li>07:45 AM</li>
  <li>08:45 AM</li>
  <li>09:45 AM</li>
  <li>010:45 AM</li>
  <li>22:45 AM</li>


</ul>
    </div>


 

<div class="item">

<ul class="weekdays5">
 
</ul>

<ul class="mydate5">

</ul>


<ul class="days">  
 <li>11:45 AM</li> 
 
  <li>01:45 AM</li>
  <li>02:45 AM</li>
  <li>03:45 AM</li>
  <li>04:45 AM</li>
  <li>05:45 AM</li>
  <li>06:45 AM</li>
  <li>07:45 AM</li>
  <li>07:45 AM</li>
  <li>08:45 AM</li>
  <li>09:45 AM</li>
  <li>010:45 AM</li>
  <li>22:45 AM</li>



</ul>
    </div>

</div>
<script>

$(document).ready(function() {
 
 $("#owl-demo").owlCarousel({

     navigation : true, // Show next and prev buttons

     slideSpeed : 300,
     paginationSpeed : 400,

     items : 1, 
     itemsDesktop : false,
     itemsDesktopSmall : false,
     itemsTablet: false,
     itemsMobile : false

 });

});
</script>
</body>
</html>

0
2019-09-19 16:14:08
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an