onchange date is not working

Question

I want to display only current week days remaining dates I made disable, and today date deafault should selectable, it is working but suppose I want to change the date means it is not changing, default current date only taking how can resolve this?

<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());
});

Possible duplicate of [JQuery Datepicker onchange event help!](https://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-help) — Milan Chheda, May 30 '17 at 10:21

score 1 · Answer 1 · answered May 31 '17 at 05:13

Would you like to try this

if you need to change the date it should be updated to datepicker.Here i used a checkbox for that

$(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;
  }
  });
});

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

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

I click the Run code snipet nothing is happening ,stacksnippets.net’s server DNS address could not be found — subikshan M, May 31 '17 at 07:43

onchange date is not working

1 Answers1