CODEWITHSUNDEEP
javascripttwitter-bootstrap
phourxx
phourxx

Reputation: 621

setMinDate and minDate function in Bootstrap 3 DatetimePicker not working

Javascript:

$('#dpStart').datetimepicker({
        pickDate: true,                 
        pickTime: false,
        format: "DD-MM-YYYY",
        useMinutes: false,               
        useSeconds: false
    });
    $('#dpEnd').datetimepicker({
        pickDate: true,                 
        pickTime: false,
        format: "DD-MM-YYYY",
        useMinutes: false,               
        useSeconds: false
    });

    $("#dpStart").on("change.dp", function(e) {
        alert('hey');
        $('#dpEnd').data("DateTimePicker").setMinDate(e.date);
    });

HTML:

<div class="row">
    <div class="col-md-6 col-sm-6 form-group">
        <label for="txtStartDate">
            Start Date-Time</label>
        <div class="input-group date" id="dpStart" data-date-format="DD-MM-YYYY">
            <asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control"></asp:TextBox>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 form-group">
        <label for="txtEndDate">
            End Date-Time</label>
        <div class="input-group date" id="dpEnd" data-date-format="DD-MM-YYYY">
            <asp:TextBox ID="txtEndDate" runat="server" CssClass="form-control"></asp:TextBox>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

Now, everything works pretty well except .setMinDate(e.date) which returns $(...).data(...).setMinDate is not a function in the console. I tried changing the function to .minDate(e.date) and then i get $(...).data(...).minDate is not a function. Please is there somewhere am getting things wrong? because my scripts are loaded in this order

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap-datetimepicker.css' %}" />
<script src="{% static 'bootstrap3_datetime/js/moment.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datetimepicker.js' %}"></script>

Thanks!

Upvotes: 0

Views: 2322

Answers (2)

Shiwangi
Shiwangi

Reputation: 193

  1. There are two bootstrap-datetimepicker with subtle difference (eyecon or eonasdan). One can check this in comments of the js file.

  2. It seems that either of the following could work.

    • minDate, maxDate
    • setMinDate, setMaxDate
    • setMinValue, setMaxValue

    The command which your js file support could be searched by typing following in your javascript file:

    $(document).ready(function(){    
    console.log($('#dpEnd').data("DateTimePicker"))
});

    This command would return the object in console of web browser (Ctrl+Shift+J) whose function you can check for the above combination.

  3. There is some conflict as to which approach works ("change.dp" vs "dp.change"). So, one can try both

    $("#dpStart").on("change.dp", function(e) {
        alert('1st works');
        $('#dpEnd').data("DateTimePicker").minDate(new Date());
    });
$("#dpStart").on("dp.change", function(e) {
        alert('2nd works');
        $('#dpEnd').data("DateTimePicker").minDate(new Date());
    });

    For me, "dp.change" works on Mozilla Firefox.

(Here, I found one working example on jsfiddle :Source Unknown)

Upvotes: 1

Ruby
Ruby

Reputation: 153

According to the Bootstrap 3 Datepicker doc you should use something like this:

$('#dpEnd').data("DateTimePicker").minDate(e.date);

Upvotes: 0

Related Questions