Problem in Comparing Start date and End date

Question

If I used date format 'MM/yyyy' like this, then it will work properly, but I wanted to use date format like this 'm/YYYY'. How to compare it?

Below code is working properly, but I wanted to use date format 'm/yyyy' like this.

$('#card_form_plan_start_date').datepicker({
  format: 'MM/yyyy',
  autoclose: true,
  viewMode: 'months', 
  minViewMode: 'months'
});

$('#card_form_plan_start_date').datepicker().on(
      'change',
      function() {
        $('#card_form_plan_end_date').val('');
        $('#card_form_plan_end_date').removeAttr("disabled");
        $('#card_form_plan_end_date').datepicker("destroy");
        var newStart = new Date($(this).val());
alert($(this).val());        
newStart.setDate(newStart.getDate());

        $('#card_form_plan_end_date').datepicker({
            startDate : newStart,
            format: 'MM/yyyy',
              autoclose: true,
              viewMode: 'months', 
              minViewMode: 'months'
        });
});

End month starts from start month, if I use date format like this 'MM/YYYY', how to do it with 'm/YYYY'?

Answer 1

instead of var newStart = new Date($(this).val()); try to use the below code in your js

var comDate = $(this).val().split('/'); 
var newStart = new Date(comDate[1], comDate[0], 1);

$(document).ready(function() {
    $('#card_form_plan_start_date').datepicker({
  format: 'm/yyyy',
  autoclose: true,
  viewMode: 'months', 
  minViewMode: 'months'
});

$('#card_form_plan_start_date').datepicker().on(
      'change',
      function() {
        $('#card_form_plan_end_date').val('');
        $('#card_form_plan_end_date').removeAttr("disabled");
        $('#card_form_plan_end_date').datepicker("destroy");
        //var newStart = new Date($(this).val());  
        //newStart.setDate(newStart.getMonth());
        var comDate = $(this).val().split('/'); 
        var newStart = new Date(comDate[1], comDate[0], 1);
        $('#card_form_plan_end_date').datepicker({
            startDate : newStart,
            format: 'm/yyyy',
              autoclose: true,
              viewMode: 'months', 
              minViewMode: 'months'
        });
});
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

 <div class="container">
	

    <div class="row">
   
        <div class="col-sm-6">
            <div class="input-group date">
      <input type="text" id="card_form_plan_start_date" class="form-control timepicker" name="card_form_plan_start_date"> <input type="text" id="card_form_plan_end_date" class="form-control timepicker" name="card_form_plan_end_date">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>
        </div>
    </div>


</div>