set datetimepicker's minimum date to another datetimepicker's selected date

set datetimepicker's minimum date to another datetimepicker's selected date - javascript

I have two textboxes: txtETCdatefrom and txtETCdateto having classes datetimepicker1 and datetimepicker2 respectively:
<asp:TextBox ID="txtETCdatefrom" runat="server" CssClass="form-control datetimepicker1 col-md-6"></asp:TextBox>
<asp:TextBox ID="txtETCdateto" runat="server" CssClass="col-md-6 datetimepicker2 form-control"></asp:TextBox>
I am using datetimepicker with date only format on both classes(It is working fine if i set minDate to any specific date or moment()).
I want to set minimum date of datetimepicker2 to selected value of datetimepicker1 or value of txtETCdatefrom.
My datetimepicker code is:
$('.datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
});
$('.datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
//minDate: moment(),
});
I searched about this and found answer for datepicker(using onSelect() function):
$('.datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
onSelect: function (date) {
var date1 = $('.datetimepicker1').datetimepicker('getDate');
var date = new Date(Date.parse(date1));
date.setDate(date.getDate() + 1);
var newDate = date.toDateString();
newDate = new Date(Date.parse(newDate));
$('.datetimepicker2').datetimepicker("option", "minDate", newDate);
}
});
$('.datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
//minDate: moment(),
});
but it is not working for datetimepicker.
I also tried beforeShow() function like:
$('.datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
});
$('.datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
//minDate: moment(),
beforeShow: function () {
$(".datetimepicker2").datetimepicker("option", {
minDate: $(".datetimepicker1").datetimepicker('getDate')
});
}
});
but all vain. Also tried onSelectDate() and onShow() functions as suggested in
Set max and min datetime in jquery datetimepicker
don't know what m doing wrong.
After including these functions in code the datetimepicker doesn't show up.
All help will be appreciated. Thank you.

I follow the docs in datepicker official website.
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment(),
});
$('#datetimepicker2').datetimepicker({
format: 'DD/MM/YYYY',
});
$("#datetimepicker1").on("dp.change", function (e) {
var oldDate = new Date(e.date);
var newDate = new Date();
newDate.setDate(oldDate.getDate() + 1);
$('#datetimepicker2').data("DateTimePicker").minDate(newDate);
});
});
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

Related

Couldn't update start and end date based on monthly & yearly selection

I tried to add start and expire date on monthly & yearly basis for each button. If the monthly is selected, in start date field, current year, date & month should be shown and in the expire date, next month should be shown. If the yearly is selected, in start date field, current year, date & month should be shown and in the expire date, next year should be shown.
The code i have written works only for months. That too in first button only not on every button click. If i change the monthly to yearly, the year is not updating. Please help me to fix this. Thanks in advance.
$(function() {
$(".upgred-frm").on('shown.bs.modal', function() {
if ($("#payment-frequency").val() == "monthly") {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'YYYY/MM/DD HH:mm:ss'
});
$('#datetimepicker2').datetimepicker({
defaultDate: moment().subtract(-1, "months"),
format: 'YYYY/MM/DD HH:mm:ss',
});
}
$("#payment-frequency").on("change", function() {
if ($(this).val() == "monthly") {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'YYYY/MM/DD HH:mm:ss'
});
$('#datetimepicker2').datetimepicker({
defaultDate: moment().subtract(-1, "months"),
format: 'YYYY/MM/DD HH:mm:ss',
});
} else if ($(this).val() == "yearly") {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'YYYY/MM/DD HH:mm:ss'
});
$('#datetimepicker2').datetimepicker({
defaultDate: moment().subtract(-1, "years"),
format: 'YYYY/MM/DD HH:mm:ss',
});
} else {
return false;
}
})
});
$(".upgred-frm").on('hide.bs.modal', function() {
$(this).find("form").trigger("reset");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js?ver=1"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.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/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<button class="btn btn-md btn-default form-control" data-toggle="modal" data-target=".upgred-frm" data-backdrop="static">Upgrade</button>
<button class="btn btn-md btn-default form-control" data-toggle="modal" data-target=".upgred-frm" data-backdrop="static">Upgrade</button>
<button class="btn btn-md btn-default form-control" data-toggle="modal" data-target=".upgred-frm" data-backdrop="static">Upgrade</button>
</div>
</div>
</div>
<div class="modal fade upgred-frm" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upgrade Membership</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group payment-frequency">
<label for="payment-frequency">Payment Frequency</label>
<select class="form-control" id="payment-frequency">
<option>Please select</option>
<option selected value="monthly">Monthly</option>
<option value="yearly">Yearly</option>
</select>
</div>
<div class="form-group">
<label>Payment / Trial Start Date</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="pull-right"><small class="clr-ccc">The date format should be YYYY-MM-DD 00:00:00</small></div>
</div>
<div class="form-group">
<label for="expire-on">Will expire on</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class="pull-right"><small class="clr-ccc">The date format should be YYYY-MM-DD 00:00:00:00</small></div>
</div>
</form>
</div>
</div>
</div>
</div>

The main problem with your code is that you create new datetimepicker objects instead of changing the options of existing datetimepickers. Every time the onchange event fires, you create a new datetimepicker. You can verify that by placing somthing like console.log('Monthly option selected') inside your corresponding conditional statement. Each time you change the select to 'Monthly' there will be more lines written to your console because there are more datetimepickers created.
You have to create two datetimepickers at the start of your script and then only change their options instead of creating new ones. This code should give you the expected result:
$(function() {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
$(function() {
$(".upgred-frm").on('shown.bs.modal', function() {
if ($("#payment-frequency").val() == "monthly") {
$('#datetimepicker1').data('DateTimePicker').clear();
$('#datetimepicker1').data('DateTimePicker').options({
defaultDate: new Date(),
format: 'YYYY/MM/DD HH:mm:ss'
});
$('#datetimepicker2').data('DateTimePicker').clear();
$('#datetimepicker2').data('DateTimePicker').options({
defaultDate: moment().subtract(-1, "months"),
format: 'YYYY/MM/DD HH:mm:ss',
});
}
});
$("#payment-frequency").on("change", function() {
if ($(this).val() == "monthly") {
$('#datetimepicker1').data('DateTimePicker').clear();
$('#datetimepicker1').data('DateTimePicker').options({
defaultDate: new Date(),
format: 'YYYY/MM/DD HH:mm:ss'
});
$('#datetimepicker2').data('DateTimePicker').clear();
$('#datetimepicker2').data('DateTimePicker').options({
defaultDate: moment().subtract(-1, "months"),
format: 'YYYY/MM/DD HH:mm:ss',
});
} else if ($(this).val() == "yearly") {
$('#datetimepicker1').data('DateTimePicker').clear();
$('#datetimepicker1').data('DateTimePicker').options({
defaultDate: new Date(),
format: 'YYYY/MM/DD HH:mm:ss'
});
$('#datetimepicker2').data('DateTimePicker').clear();
$('#datetimepicker2').data('DateTimePicker').options({
defaultDate: moment().subtract(-1, "years"),
format: 'YYYY/MM/DD HH:mm:ss',
});
} else {
return false;
}
});
$(".upgred-frm").on('hide.bs.modal', function() {
$(this).find("form").trigger("reset");
});
});

Unable to select days and hours when minDate and maxDate are on the same days with Eonasdan datetimepicker

I got an odd behaviour when using bootstrap-datetimepicker v. 4.17.47.
Here is my picker configuration:
format: 'YYYY-MM-DD HH:mm',
showTodayButton: true,
useCurrent: false,
showClear: true,
minDate: moment('{{ ts_beg }}'),
maxDate: moment('{{ ts_end }}')
When setting minDate and maxDate to the same day but with different hours, let's say 2018-2-1 00:00 and 2018-2-1 02:00, I am unable to choose both date and time:
Does anyone has a workaround to solve this issue ?

The problem, if not wrong, is because of the implementation of maxDate you can override this behavior using the functions, this way you will be able to select the date
Here a live example:
const format = 'YYYY-MM-DD HH:mm';
const MaxDate = moment('2018-02-01 02:00', format);
const MinDate = moment('2018-02-01 00:00', format);
$('#myDatepicker').datetimepicker({
format: format,
showTodayButton: true,
useCurrent: false,
showClear: true,
minDate: MinDate,
});
$('#myDatepicker').data("DateTimePicker").maxDate(MaxDate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/25c11d79/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<br/>
<!--Space for the fiddle-->
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

JQuery linked datepickers with condition of start and end dates

I have two datepickers one of them is for a start date and the other is for an end date. My problem is that I want if I select a start date input ,the end date input should be after this date so I should lock the other dates and if I select an end date input, the start date input should be after the end date
the html code
<div class="row">
<div class="col-sm-5">
<div class="form-group">
<label class="control-label col-sm-5" for="date_added">Date
Courrier</label>
<div class="input-group date">
<span class="input-group-addon"><i
class="fa fa-calendar"></i></span><input id="date_added"
type="text" class="form-control" value="03/04/2014">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label class="control-label col-sm-7" for="date_modified">Date
Arrivée</label>
<div class="input-group date">
<span class="input-group-addon"><i
class="fa fa-calendar"></i></span><input id="date_modified"
type="text" class="form-control" value="03/06/2014">
</div>
</div>
</div>
</div>
the javascript code
<script>
$(document).ready(function() {
$('#date_added').datepicker({
todayBtn : "linked",
keyboardNavigation : false,
forceParse : false,
calendarWeeks : true,
autoclose : true
});
$('#date_modified').datepicker({
todayBtn : "linked",
keyboardNavigation : false,
forceParse : false,
calendarWeeks : true,
autoclose : true
});
});
</script>
So what should I add

check out this example
<div class='input-group date' id='time_from' style="width:500px">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='time_to' style="width:500px">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
$('#time_from').datetimepicker({
viewMode: 'days',
minDate: new Date(), //Current
format: 'DD. MMMM YYYY - HH:mm',
});
$('#time_to').datetimepicker({
viewMode: 'days',
maxDate: new Date().setDate(new Date().getDate() + 90),
useCurrent: false,
format: 'DD. MMMM YYYY - HH:mm'
});
$('#time_from').on('dp.change', function (e) {
$('#time_to').data('DateTimePicker').minDate(e.date);
//Use moment.js here
var m = moment(new Date(e.date));
m.add(90, 'days');
$('#time_to').data('DateTimePicker').maxDate(m);
});
check out this fiddle

<script>
$(document).ready(function() {
var start_date=$('#date_added').val();
var end_date=$('#date_modified').val();
$('#date_added').datepicker({
onSelect: function(dateText, inst) {
start_date=$(this).val();
$('#date_modified').datepicker('option', 'minDate', new Date(start_date));
},
todayBtn : "linked",
keyboardNavigation : false,
forceParse : false,
calendarWeeks : true,
autoclose : true
});
$('#date_modified').datepicker({
onSelect: function(dateText, inst) {
end_date=$(this).val();
$('#date_added').datepicker('option', 'minDate', new Date(end_date));
},
todayBtn : "linked",
keyboardNavigation : false,
forceParse : false,
calendarWeeks : true,
autoclose : true
});
});

JQuery UI Date Picker with Angularjs directive getting wrong value

My 2 Date Pickers bind with Angularjs directive. But i validate with java script.
after selecting date it return default date.
Script
<script>
if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
jQuery(function ($) { //on document.ready
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function (date) {
var date2 = $('#start_date').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#end_date').datepicker('setDate', date2);
//sets minDate to start_date date + 1
$('#end_date').datepicker('option', 'minDate', date2);
}
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd',
onClose: function () {
var start_date = $('#start_date').datepicker('getDate');
console.log(start_date);
var end_date = $('#end_date').datepicker('getDate');
if (end_date <= start_date) {
var minDate = $('#end_date').datepicker('option', 'minDate');
$('#end_date').datepicker('setDate', minDate);
}
}
});
});
}
</script>
Html Code
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check in</label>
<input type="date" id="start_date" class="form-control" placeholder="Check in" data-ng-model="departuredate"/>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label name="lblOccup1"> Check out</label>
<input type="date" id="end_date" class="form-control" placeholder="Check Out" data-ng-model="returndate"/>
</div>
</div>
<div class="col-md-2">
<a class="link_button2" ng-href="#Url.Action("Booking", "home")?Rooms={{rooms}}&Destination={{des}}&DepartureDate={{departuredate}}&ReturnDate={{returndate}}"> Search </a>
</div>
After press search button i get null value to mvc controller.
Search Form
Controller
What is wrong with this code?

Bootstrap Datepicker Disable dates not working

I am trying to put a range of .datepicker() selection and Bootstrap Datepicker
I would like to disable some days, however not working,
Lets say, Today is Wednesday (04/05/2016) and I would like to restrict the days before first Friday (06/05/2016). For this, I get day of week info from users. Such as; user selected Saturday. So the calendar should start with the first Saturday even today is Wednesday, user will not be able to select previous days.
Here is my .datepicker() view:
<div class="col-sm-2 col-xs-4">
<div class="form-group">
<div id="date-from" class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="form-group">
<div id="date-to" class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control">
</div>
</div>
</div>
And here is the js code:
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#date-from').datepicker({
//format: 'dd/mm/yy',
datesDisabled: ['05/06/2016', '05/21/2016'], // not working
startDate: '+0d',
weekStart: 1,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function(ev) {
if (ev.date) {
if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf() || !checkout.datepicker("getDate").valueOf()) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate());
checkout.datepicker("update", newDate);
}
} else {
checkout.datepicker("update", "");
}
$('#date-to')[0].focus();
});
var checkout = $('#date-to').datepicker({
format: 'dd/mm/yy',
weekStart: 1,
//endDate: '+2d',
beforeShowDay: function(date) {
if (!checkin.datepicker("getDate").valueOf()) {
return date.valueOf() >= new Date().valueOf();
} else {
return date.valueOf() > checkin.datepicker("getDate").valueOf();
}
},
autoclose: true
}).on('changeDate', function(ev) {});

Develop Reference

JavaScript is the programming language of the Web.

set datetimepicker's minimum date to another datetimepicker's selected date - javascript

Related

Couldn't update start and end date based on monthly & yearly selection

Unable to select days and hours when minDate and maxDate are on the same days with Eonasdan datetimepicker

JQuery linked datepickers with condition of start and end dates

JQuery UI Date Picker with Angularjs directive getting wrong value

Bootstrap Datepicker Disable dates not working

Categories

Resources