glyphicon-calendar Start and End Date

Question

I have this piece of aspx code:

<div class="col-xs-2">
    <label for="txtDateActioned" style="cursor: pointer;">Date Actioned</label>
    <div id="sandbox-container">
        <div class="input-group date">
            <input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
    </div>
</div>

From my understanding (and I'm not a web developer, just struggling with maintenance) this is a bootstrap datetime picker.

My humble wish is to set the 'end date' (or 'max date') to 'Today', or any other date. I tried doing this using JS (in the $(document).ready(function()...) section):

$('#txtDateActioned').daterangepicker(
    {
        maxDate: "01-09-2016"
    }
);

However, I can't find a way to make it work. The user can still select a future date, which is exactly what I want to prevent. I also tried different date format such as '2016-09-01', and also tried '$('#txtDateActioned').datetimepicker()'. However, nothing worked for me.

Any help is most appreciated.

Elad

Answer 1

My solution:

1) I added an id for the div contains the 'input-group date' class.

<div id="dateActionedDP" class="input-group date">
    <input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

2) In js code (the $(document).ready(function ()...) I added the following:

$("#dateActionedDP").datepicker("setEndDate", '+0d');

This worked for me. Thanks everybody for helping.

Elad