From the below code if i click on check-in date as june 17th 2014 and calendar will directly popup the check-out calendar as may 18th 2014 but i need that calendar popup to show june 17th 2014. Can anyone help me and below is my code.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
var nowTemp = new Date();
var now = (nowTemp.getMonth()+1)+'-'+ nowTemp.getDate()+'-'+ nowTemp.getFullYear();
$('#sandbox-container .input-append.date').datepicker({
orientation: "auto",
autoclose: true,
todayHighlight: true,
startDate:now
}).on('changeDate', function(ev) {
$('#sandbox-container1 span').trigger('click');
$('.input-append.date.span12').css({display:'block'}).show();
});
var nowTemp1 = new Date();
var now1 = (nowTemp1.getMonth()+1)+'-'+ (nowTemp1.getDate()+1)+'-'+ nowTemp1.getFullYear();
$('#sandbox-container1 .input-append.date').datepicker({
orientation: "auto",
autoclose: true,
startDate:now1
});
});
</script>
<div id="sandbox-container" class="book_arriv_input f-left">
<div data-date-format="mm-dd-yyyy" data-date="12-12-2013" id="dp1" class="input-append date" >
<input type="text" id="check_in" name="checkin_date_avail" class="span6"/>
<span>
<div class="add-on calender" style="margin-left: -5px;">
<i class="icon-th"></i>
</div>
</span>
</div>
</div>
<div id="sandbox-container1" class="book_arriv_input f-left">
<div data-date-format="mm-dd-yyyy" data-date="12-13-2013" id="dp2" class="input-append date">
<input type="text" id="check_out" name="checkout_date_avail" class="span6"><span class="add-on calender" style="margin-left: -5px;"><i class="icon-th"></i></span>
</div>
</div>
the second date is disabled on the 17th because now1 starts from one day after.
you can use now instead of now1.
Edit:
you can set the date on the checkout picker based on the checkin picker like this:
picker1 = $('#sandbox-container1 .input-append.date').datepicker()
picker1.data('datepicker').setDate(pickedDate);
fiddle: http://jsfiddle.net/tp2MP/
Related
I'm using a jquery datepicker link in that i need to subtract 7 days from the current date. I've tried some code but its not working ie, days are not subtracting still showing current date itself. This is the code that i've tried yet. Any help is appreciable.
Demo fiddle
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-dd'));
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-dd'));
$startDate.on('change', function () {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker
As per the setDate this datePicker documentation - You are not using momentJS format date function correctly. You need to convert a date from YYYY-MM-DD to a date object like for example: Wed Sep 17 2020 00:00:00 GMT+1000 (Australian Eastern Standard Time)
For that you can use toDate() function of momentJS - Your code is working now as expected.
$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());
Or you can also use native Javascript new Date method like this below:
$startDate.datepicker("setDate", new Date(moment().subtract(7, 'd')));
You can also do this using just native JavaScript date function like this below instead of using moment library
var sub7Days = new Date();
sub7Days.setDate(sub7Days.getDate() - 7);
$startDate.datepicker("setDate", sub7Days);
Live Working Demo:
$(function() {
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({
autoHide: true,
format: 'yyyy-mm-dd'
});
$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().toDate());
$startDate.on('change', function() {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
});
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
<input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>
$(function() {
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});
console.log(moment().subtract(7,'days').format('yyyy-mm-D'));
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-D'));
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-D'));
$startDate.on('change', function () {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker
});
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
<input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>
Changed moment().subtract(7,'d').format('yyyy-mm-dd') to moment().subtract(7,'d').format('yyyy-mm-D')
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");
});
});
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>
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 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,
});