jQuery ui datepicker

私はこのコードに関して2つの質問があります。jQuery ui datepicker

日付を選択するときだけでなく、現在の週の間隔をどのようにデフォルトにするかを知りたいと思います。

私は、この日付間隔を構成する各日を単純に表示できるかどうか疑問に思いました。例えば

：

ウィーク：2017年8月13日 - 2017年8月19日

月曜日14

木曜日15

...

私はあなたに感謝事前に

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

出典

2017-08-14 Lydia Ra

これは

を役に立てば幸い

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>

このコードを試してみてください

出典

2017-08-14 16:27:12 Amal

答えて

関連する問題