jQuery ui Datepicker

Ich habe zwei Fragen in Bezug auf diesen Code.jQuery ui Datepicker

Ich würde gerne wissen, wie das aktuelle Intervall der Woche standardmäßig nicht nur bei der Auswahl eines Datums.

Dann fragte ich mich, ob es möglich war, jeden Tag, der dieses Datumsintervall zusammensetzt, einfach anzuzeigen.

Zum Beispiel:

Woche: 2017.08.13 - 08/19/2017

Montag, 14.

Donnerstag, 15.

...

Ich danke im voraus

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
 
    <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.8.14/jquery-ui.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> 
 
<script type="text/javascript"> 
 
$(function() { 
 
    var startDate; 
 
    var endDate; 
 
    
 
    var selectCurrentWeek = function() { 
 
     window.setTimeout(function() { 
 
      $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active') 
 
     }, 1); 
 
    } 
 
    
 
    $('.week-picker').datepicker({ 
 
     showOtherMonths: true, 
 
     selectOtherMonths: true, 
 
     onSelect: function(dateText, inst) { 
 
      var date = $(this).datepicker('getDate'); 
 
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
 
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
 
      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
 
      $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
 
      $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings)); 
 
      
 
      selectCurrentWeek(); 
 
     }, 
 
     beforeShowDay: function(date) { 
 
      var cssClass = ''; 
 
      if(date >= startDate && date <= endDate) 
 
       cssClass = 'ui-datepicker-current-day'; 
 
      return [true, cssClass]; 
 
     }, 
 
     onChangeMonthYear: function(year, month, inst) { 
 
      selectCurrentWeek(); 
 
     } 
 
    }); 
 
    
 
    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); 
 
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    <div class="week-picker"></div> 
 
    <br /><br /> 
 
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span> 
 
</body> 
 
</html>

Quelle

2017-08-14 Lydia Ra

Versuchen Sie diesen Code

for (var newDate = new Date(startDate); newDate <= endDate; newDate.setDate(newDate.getDate() + 1)) { 
    var currDay=days[newDate.getDay()]; 
    var currDate=newDate.getDate(); 
    $(".days").append('<label>'+currDay+' :'+currDate+'</label><br>'); 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 
<script type="text/javascript"> 
 
$(function() { 
 
    var startDate; 
 
    var endDate; 
 
    
 
    var selectCurrentWeek = function() { 
 
     window.setTimeout(function() { 
 
      $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active') 
 
     }, 1); 
 
    } 
 
    
 
    $('.week-picker').datepicker({ 
 
     showOtherMonths: true, 
 
     selectOtherMonths: true, 
 
     onSelect: function(dateText, inst) { 
 
      var date = $(this).datepicker('getDate'); 
 
      var days=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; 
 
      startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
 
      endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
 
      var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat; 
 
      $('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings)); 
 
      $('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings)); 
 
      $(".days").empty(); 
 
      for (var newDate = new Date(startDate); newDate <= endDate;     newDate.setDate(newDate.getDate() + 1)) { 
 
       var currDay=days[newDate.getDay()]; 
 
       var currDate=newDate.getDate(); 
 
       $(".days").append('<label>'+currDay+' :'+currDate+'</label><br>'); 
 
      } 
 
      selectCurrentWeek(); 
 
     }, 
 
     beforeShowDay: function(date) { 
 
      var cssClass = ''; 
 
      if(date >= startDate && date <= endDate) 
 
       cssClass = 'ui-datepicker-current-day'; 
 
      return [true, cssClass]; 
 
     }, 
 
     onChangeMonthYear: function(year, month, inst) { 
 
      selectCurrentWeek(); 
 
     } 
 
    }); 
 
    
 
    $('.week-picker .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); }); 
 
    $('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); }); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    <div class="week-picker"></div> 
 
    <br /><br /> 
 
    <label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span> 
 
    <div class="days"></div> 
 
</body> 
 
</html>

this helps

Quelle

2017-08-14 16:27:12 Amal

jQuery ui Datepicker

Antwort

Verwandte Themen