Develop Reference

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");
});
});

Start time and End time Validation

Here is my Html for selecting from time and to time.
Select Date Tab
<div class="elementbox">
<label class="form-label">Select Date</label>
<div class="controls">
<div class="half-container"><div class="left"><span>From</span> <div class="icongroup"><input type="text" id="from" name="from"/><i class="fa fa-calendar"></i></div></div></div>
<div class="half-container"><div class="left"><span class="text-center">To</span> <div class="icongroup"><input type="text" id="to" name="to"/> <i class="fa fa-calendar"></i></div> </div></div>
</div>
</div>
Select time tab
<div class="elementbox">
<label class="form-label">Select Time</label>
<div class="controls">
<div class="half-container"><div class="left"><span>From</span> <div class="icongroup"><input type="text" id="from_t" name="from_t"/> <i class="fa fa-calendar"></i></div></div></div>
<div class="half-container"><div class="left"><span class="text-center">To</span> <div class="icongroup"><input type="text" id="to_t" name="to_t"/> <i class="fa fa-calendar"></i></div></div></div>
</div>
</div>
I want to show that if date is today then Start time is selected of 03:00 AM then to time should be greater than 03:00 AM or else it should allow to select the time instead of disabling the time.
How can I achieve this?
Here is my jquery code:
From date and to date
$("#from").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect:function(){
if($(this).hasClass('error')){
$(this).trigger('keyup')
}
},
onClose: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
});
$("#to").datepicker({
dateFormat: 'dd/mm/yy',
minDate: new Date(),
onSelect:function(){
if($(this).hasClass('error')){
$(this).trigger('keyup')
}
},
onClose: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
});
From time and To time
$('#from_t').timepicker({ 'timeFormat': 'h:i A' });
$('#to_t').timepicker({ 'timeFormat': 'h:i A' });
I am using jquery timepicker js to achieve this.

You can use minTime: '11:00' inside timepicker parameters
Referrence: DateTimePicker

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

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>

how to get default end date in non-editable textbox using jquery

How to get Start Date and End Date using jquery.
For an example:
I need to get output:
Start date - 22/08/2016(should not be greater than today date and should not be auto-selected)
If a person select start date like today date ,end date should be filled automatically after one year date.
End date: 22/08/2017(by default in non-editable text box)
This my HTML code
<div class="form-group">
<label class="control-label">Start Date</label>
<div id="fromdatetimepicker" class="input-group">
<input type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>
This my js code
jQuery("#fromdatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
"minDate": moment()
});
jQuery("#todatetimepicker").datetimepicker({
widgetPositioning: {
horizontal: 'left',
vertical: 'bottom'
},
allowInputToggle : true,
format: 'DD/MM/YYYY',
});
Please, help me! How to do this and thanks in advance.

Try this
jQuery("#fromdatetimepicker").on("dp.change", function (e) {
var start_date = e.date
var end_date = start_date.setFullYear(date.getFullYear() + 1);
var todatetimepicker = jQuery('#todatetimepicker').data("DateTimePicker");
todatetimepicker.date(end_date)
});

Please modify "jQuery("#fromdatetimepicker").datetimepicker" event listener with below code and remove "jQuery("#todatetimepicker").datetimepicker" event listener as such it is redundant.
Please check below snppet.
$( function() {
$( "#fromdatetimepicker" ).datepicker({
dateFormat : 'dd/mm/yy',
onSelect: function(dateText) {
var dateText = dateText.split('/');
var to_date = dateText[0]+'/'+dateText[1]+'/'+(parseInt(dateText[2])+1);
jQuery("#todatetimepicker").val(to_date);
}
});
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="form-group">
<label class="control-label">Start Date</label>
<div class="input-group">
<input id="fromdatetimepicker" type="text" class="form-control col-sm-5" placeholder="Select a Start Date" />
<a id="calIcon" class="input-group-addon btn btn-danger">
<span class="glyphicon glyphicon-calendar"></span>
</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="travelInputName">End Date</label>
<input readonly type="text" class="form-control" id="todatetimepicker">
</div>

can u try this
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
// var op = New date calculation Here
$('#datehidden').val(op);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true,
});

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) {});