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

Subtract date jquery

I've tried to subtract between two dates. Date "a" and Date "b" using this code that I've found here. It works with jsfiddle.net but not with my project.
This is my code :
HTML and JS
$(document).ready(function() {
$("#startdate,#enddate").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy'
});
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end = $('#enddate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#days').val(days);
} else {
alert("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); //end change function
}); //end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<div class="form-group">
<label class="control-label col-md-3">date 1</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="startdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">date 2</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="enddate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">result</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="days">
</div>
</div>
But when I import into the project, it does not work. Like JS file not found the HTML's "id" or else. Can anyone help me ?
This is The JSFIDDLE link to this query.

it's working fine with me did you check in incognito mode? ctrl+shift+N and check in incognito

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>

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?