CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatetimepickereonasdan-datetimepicker
Dobby
Dobby

Reputation: 5

Updating minDate with dropdown on a bootstrap DateTimePicker

I have a date time picker in my project and need the min date to update whenever I select a different option on a drop down. Currently I have:

<div id="howManydays"></div>
<select id="ago">
    <option value="7">week</option>
    <option value="31">month</option>
    <option value="365">year</option>
</select>

for my drop down and my date time picker is:

<div class='input-group date' id='startDateTimeDiv'>       
    <input id="startDateTimeSelection" type='text' class="form-control" name="startDateTimeSelection" style="width: 250px;" /> 
    <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div> 
<!-- bootstrap date time pickers --> 
<script type="text/javascript">
    $(function() {
        $('#startDateTimeDiv').datetimepicker({
            format : 'YYYY-MM-DD HH:mm:ss',
            minDate : moment().subtract(document.getElementById("ago").value, 'd').format( 'YYYY-MM-DD'),
            maxDate : moment().add(1, 'd').format('YYYY-MM-DD'),
            widgetPositioning : 
            {
                horizontal : 'right',
                vertical : 'bottom'
            }
        });
    });
</script>

When I change the value of the drop down then the picker is still locked to the last 7 days. Any help appreciated.

Upvotes: 0

Views: 942

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

If you are using boostrap 3 you can use .options():

$('#ago').selectpicker().on('change', function(e) {
     var x = this.value;
     $('#startDateTimeDiv').data("DateTimePicker").options({
         minDate : moment().subtract(x, 'd'),
         maxDate : moment().add(1, 'd')
     });
 });

Note: you don't need to use .format('YYYY-MM-DD') because you are using a moment object.

$('#ago').selectpicker().on('change', function(e) {
    var x = this.value;
    $('#startDateTimeDiv').data("DateTimePicker").options({
        minDate : moment().subtract(x, 'd'),
        maxDate : moment().add(1, 'd')
    });
});
$('#startDateTimeDiv').datetimepicker({
    format : 'YYYY-MM-DD HH:mm:ss',
    minDate : moment().subtract(document.getElementById("ago").value, 'd'),
    maxDate : moment().add(1, 'd'),
    widgetPositioning :
    {
        horizontal : 'right',
        vertical : 'bottom'
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<div class="container">
    <div class="row">
        <div class='col-sm-3'>
        <div class="form-group">
                <select id="ago">
                    <option value="7">week</option>
                    <option value="31">month</option>
                    <option value="365">year</option>
                </select>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='startDateTimeDiv'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions