I am using Bootstrap 3 DateTimePicker and I am trying example 8 (Linked datetimepicker).
$('#dpStart').datetimepicker({
pickDate: true, //en/disables the date picker
pickTime: false,
format: "DD-MM-YYYY",
useMinutes: false, //en/disables the minutes picker
useSeconds: false
});
$('#dpEnd').datetimepicker({
pickDate: true, //en/disables the date picker
pickTime: false,
format: "DD-MM-YYYY",
useMinutes: false, //en/disables the minutes picker
useSeconds: false
});
$("#dpStart").on("dp.change", function(e) {
alert('hey');
$('#dpEnd').data("DateTimePicker").setMinDate(e.date);
});
$("#dpEnd").on("dp.change", function(e) {
$('#dpStart').data("DateTimePicker").setMaxDate(e.date);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…