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。我在这里使用了一个复选框

＆＃13;

$(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(){
	if($(this).is(':checked')){
		changeDate=true;
	}else{
	changeDate=false;
  }
		});
});

＆＃13;

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

＆＃13;

<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>

		    <label><input type="checkbox" value="wednesday" class="chkWeek" name="condition-aplicable-day" data-value="3">Change date</label>
		
</div>

＆＃13;

onchange日期不起作用

1 个答案: