1

In the given fiddle here

There are two date inputs 'from' and 'to'

In which I want to disable future date in 'From' only but when i apply endDate code in applies to both 'from' and 'to' date.

I want to apply 'endDate' that is I want to disable future date in 'from' field only and not in 'to' date field.

I picked this datepicker from thiss site

<div class="input-daterange input-group" id="datepicker">
   <span class="input-group-addon">from</span>
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

$('.input-daterange').datepicker({
    autoclose: true,
    endDate: '+0d'
   });

For any query please comment below

1

4 Answers 4

1
+50

Since you're using the date range functionality and you can't initialize the date pickers separately, you can utilize the built-in setEndDate method to set the endDate property of a specific input element.

$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');

In your case, you would initialize the date range picker on both input fields (like you were already doing) and then target the specific input element by its attribute and use the setEndDate method:

Updated Example

$('.input-daterange').datepicker({
  autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');

Full Snippet:

$('.input-daterange').datepicker({
  autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
  <span class="input-group-addon">from</span>
  <input type="text" class="input-sm form-control" name="start" />
  <span class="input-group-addon">to</span>
  <input type="text" class="input-sm form-control" name="end" />
</div>

0

Assign an id to each input field:

Then instead of $('.input-daterange') use $('#startdate') and $('#enddate') and only include endDate: '+0d' where you need it.

4
  • 1
    By applying this I will kill inbuilt range functionality applied by class 'input-daterange'
    – R K
    Feb 24, 2017 at 21:46
  • I'm not sure what you are referring to. Using this instead of $('.input-daterange') will result in 2 separate datepickers, one with no limit and one with future dates blocked. If you have any CSS on input-daterange that will still be active. Feb 24, 2017 at 21:51
  • By kill range functionality I mean not only the css part but also where when 'To' date is smaller than 'From' date it automatically changes 'From' Date accordingly where it is not more that 'To' date ,by applying this '.input-daterange' class
    – R K
    Feb 24, 2017 at 21:55
  • I don't see how this would affect that functionality. But I don't see any code fro that functionality so I can't say for sure. Feb 26, 2017 at 0:48
0

You can use the input name attribute as a selector, and set the attributes for each instance of the datepicker.

// HTML
<div class="input-daterange input-group" id="datepicker">
   <span class="input-group-addon">from</span>
    <input type="text" class="input-sm form-control" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" class="input-sm form-control" name="end" />
</div>

// JS
$('input[name=start]').datepicker({
  autoclose: true,
  endDate: '+0d'
});

$('input[name=end]').datepicker({
  autoclose: true
});
0

Try this:

$(".datepicker").datepicker({maxDate: '0'});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.