onchange日期不起作用

Question

我想只显示当前星期天剩余的日期，我做了禁用，今天的日期deafault应该可选，它正在工作，但假设我想改变日期意味着它不会改变，只有当前的默认日期考虑如何解决这个问题？

<div class="form-group mt-lg"> 
    <label class="col-sm-1 control-label"></label> 
    <div class="col-sm-10"> 
     <input type="text" id="datepicker" class="form-control bhj" size="3" name="date" placeholder="Enter Date" required="" data-msg-required="Please Select Date" readonly=""> 
    </div> 
    <label class="col-sm-1 control-label"></label> 
</div> 

$(function() { 
    $(".bhj").datepicker({ 
    //In Datepicker set the Calendar display start with Monday 
    firstDay: 1, 
    //Before Populating the Calendar set the Enabled & Disabled Dates using beforeShowDay(Date) function 
    beforeShowDay: function (date) { 
     //var monday = new Date("June 1, 2013 00:00:00"); 
     //Get today's date 
     var monday = new Date(); 
     //Set the time of today's date to 00:00:00 
     monday.setHours(0,0,0,0); 
     //alert(monday.getDay() + ' : ' + monday.getDate() + ' : ' + (monday.getDay() || 7) + ' : ' + monday); 
     /* 
     Below Line sets the Date to Monday (Start of that Week) 
     (monday.getDay() || 7) returns the value of getDay() 
     ie., [ 1 - Mon, 2 - Tue, 3 - Wed, 4 - Thu, 5 - Fri, 6 - Sat ] 
     except for Sunday where it returns 7. 
     The return value is used to calculate the Date of that Week's Monday 
     */ 
     monday.setDate(monday.getDate() + 1 - (monday.getDay() || 7)); 
     //Set the Date to Monday 
     var sunday = new Date(monday); 
     //Now add 6 to Monday to get the Date of Sunday (End of that Week) 
     sunday.setDate(monday.getDate() + 5); 
     //Now return the enabled and disabled dates to datepicker 
     return [(date >= monday && date <= sunday), '']; 
    } 
    }); 
    //Set the date format to dd/mm/yy ie., 30/10/1989 
    $(".bhj").datepicker({dateFormat:"yy/mm/dd"}).datepicker("setDate",new Date()); 
}); 

Answer 1

你想，如果你需要改变，应更新为datepicker。这里我用一个复选框为

$(function() { 
 
    var startDate; 
 
    var endDate; 
 
    var changeDate; 
 
    function updateWeekStartEnd() { 
 
     var date = $(".bhj").datepicker('getDate') || new Date(); 
 
     startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()); 
 
     endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6); 
 
    } 
 
    updateWeekStartEnd(); 
 
    $(".bhj").datepicker({ 
 
     showOtherMonths: true, 
 
     selectOtherMonths: true, 
 
     onSelect: function (dateText, inst) { 
 
      updateWeekStartEnd(); 
 
     }, 
 
     beforeShowDay: function (date) { 
 
      if (date >= startDate && date <= endDate){ 
 
      return [true, 'ui-datepicker-current-day']; 
 
      } 
 
      else if(changeDate==true){ 
 
       return [true, ""]; 
 
      } 
 
      else{ 
 
       return [false, "disabled_week"]; 
 
      } 
 
     } 
 
    }); 
 

 
$(".bhj").datepicker().datepicker("setDate",new Date()); 
 
$('input.chkWeek').on('click', function(){ 
 
\t if($(this).is(':checked')){ 
 
\t \t changeDate=true; 
 
\t }else{ 
 
\t changeDate=false; 
 
    } 
 
\t \t }); 
 
});

.ui-datepicker-current-day a { 
 
     background-color: #fff !important; 
 
     background-image: none !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<div class="form-group mt-lg"> 
 
    <label class="col-sm-1 control-label"></label> 
 
    <div class="col-sm-10"> 
 
     <input type="text" id="datepicker" class="form-control bhj" size="" name="date" placeholder="Enter Date" required="" data-msg-required="Please Select Date" readonly=""> 
 
    </div> 
 
    <label class="col-sm-1 control-label"></label> 
 

 
\t \t  <label><input type="checkbox" value="wednesday" class="chkWeek" name="condition-aplicable-day" data-value="3">Change date</label> 
 
\t \t 
 
</div>

日起尝试这种