I have two daterangepicker, I want to set plus two year as the maxdate for the second daterangepicker based on the value from first daterangepicker. For example if I set the value to "2019-10-10" on the first daterangepicker then the maxdate should be set to the second datepicker as "2021-10-10".
This is what I have tried but not seems to be working
$('.date-select').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
}).on("input change", function (e) {
$("#end_date").daterangepicker({ singleDatePicker: true, minDate: -0,dateFormat: 'YYYY-MM-DD', maxDate: "+0D+0M+2Y" });
});
$('#end_date').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
});
}
});
It shows invalid date. Help is much appreciated. Thanks.
I don't see you referencing the first date input at all. Try fetching it's value, convert it to a Date object, add two years and set it as the new maxDate of the #end_date input like so:
$('#start_date').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
}).on("input change", function (e) {
let d = new Date( $('#start_date').val() );
d.setFullYear(d.getFullYear() + 2);
$('#end_date').daterangepicker({
singleDatePicker: true, locale: {format: 'YYYY-MM-DD'}, maxDate: d
});
});
$('#end_date').daterangepicker({
singleDatePicker: true, locale: {format: 'YYYY-MM-DD'},
});
See this JS Bin for a demo.
By the way: you might have your reasons to choose otherwise, but it would be much easier if you don't use two seperate inputs and define maxSpan option. That way, you don't have to deal with events at all and the library does the work for you.
You can also use 'OnSelect' event of Datepicker for the same...
$("#From_Date").datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateStr) {
var d = $.datepicker.parseDate('dd/mm/yy', dateStr);
var years = parseInt(2);
d.setFullYear(d.getFullYear() + years);
$('#To_Date').datepicker('setDate', d);
}
});
$("#To_Date").datepicker({
dateFormat: 'dd/mm/yy'
});
this is html for it.
<input id="From_Date" />
<input id="To_Date" />
I am using two datetimepicker Bootstrap, the first is startDate, and the second is enddate, The problem is that i should pick the startdate, and in the enddate automaticlly to be minimum date(the date i select in startdate). And in the datatimepicker of enddate maximum of date to be +7 days. Can you help me please?
I tried to get the date in the first datatimepicker called datatimepicker6 , and i did it but i dont know how to use in the enddate datatimepicker called datatimepicker7. Below is the code:
//these part is to pick the date and it work
$("#datetimepicker6").on("dp.change", function(e) {
var drr = $('#datetimepicker6').data('date')
alert(drr);
});
$('#datetimepicker6').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
keyBinds: {'delete': null}
});
//I want to use that result as the minimum of this datatimepicker and to add +7 days as maximum
$('#datetimepicker7').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
//useCurrent: false,
//maxDate: drr,
keyBinds: {'delete': null},
useCurrent: false //Important! See issue #1075
});
add this in your onchange event it will works
e.date.add(7, 'day');
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
$('#datetimepicker7').data("DateTimePicker").date(e.date);
full code for onchange
$("#datetimepicker6").on("dp.change", function (e) {
//var val = $('#datetimepicker6').data('date');
e.date.add(7, 'day');
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
$('#datetimepicker7').data("DateTimePicker").date(e.date);
});
});
check the demo here
No need to carry variable into another function, you can just declare a variable inside the event, working Fiddle.
$(function () {
$('#datetimepicker6').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
keyBinds: {'delete': null}
});
$('#datetimepicker7').datetimepicker({
format: 'DD.MM.YYYY HH:mm:ss',
useCurrent: false,
keyBinds: {'delete': null},
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function(e) {
var drr = $('#datetimepicker6').data('date');
var endDate = new Date(e.date);
endDate.setDate(endDate.getDate()+7);
$('#datetimepicker7').data("DateTimePicker").minDate(drr);
$('#datetimepicker7').data("DateTimePicker").maxDate(endDate);
});
});
I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.
Heres what I have so far:
$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what #Victor mentioned..I hope it helps...Regards...Ozlem.
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
//Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
$("#endDatePicker").datepicker( "option", "minDate", endDate );
$("#endDatePicker").datepicker( "option", "maxDate", '+2y' );
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});
Update:
The approach above set the minDate only on creation time.
I used the onSelect event to change the minDate option of the second datepicker like this:
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
$("#txtEndDate").datepicker(); //it is not working with out this line
try this man:
$("#dateTo").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
}).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(){
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
}
}).datepicker("setDate", new Date());
$('#start_date').datepicker({
endDate: new Date(),
autoclose: true,
}).on("changeDate", function (e) {
$('#end_date').datepicker('setStartDate', e.date);
});
$('#end_date').datepicker({
autoclose: true,
});
From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.
If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.
Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:
$("#txtEndDate").datepicker({
showOn: "both",
minDate: $("#txtStartDate").datepicker("getDate")
});
Use This Code:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday'
});
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: $("#txtStartDate").datepicker("getDate") });
});
</script>
Hi everyone going to show what works with me in this case:
2 Datepickers ( DateFrom and DateTo)
HTML:
<!-- Datapicker dateFrom -->
<label for="dateFrom"> Date from: </label>
<div>
<input type="text" id="dateFrom" class="form-control" autocomplete="off"
th:placeholder="Enter a date From.."/>
</div>
<!-- Datapicker dateTo-->
<label for="dateTo"> Date to: </label>
<div>
<input type="text" id="dateTo" class="form-control" autocomplete="off"
th:placeholder="Enter a date to..."/>
</div>
Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)
$("#dateFrom").datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
$('#dateTo').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.
$("body").on("change", "#dateFrom", function() {
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});
$("body").on("change", "#dateTo", function() {
$('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});
This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.
$startDateCtrl.change(function () {
setMinEndDateValue($startDateCtrl, $endDateCtrl);
});
$endDateCtrl.datepicker();
I have two Date picker start and end.
End Date min and max date we are setting based on the selection from start.
Min start date for End date picker is start date from start picker selection.
Max end date for end date picker is selected start date from start date picker + 7 days.
function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
var $maxSchedulingDate = new Date(#MaxDate.Year, #MaxDate.Month -1, #MaxDate.Day );
var $startDate = $startDateCtrl.val();
var $selectedStartDate = new Date($startDate);
$selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
var $maxEndDate = new Date();
if ($selectedStartDate > $maxSchedulingDate) {
$maxEndDate = $maxSchedulingDate;
}
else {
$maxEndDate = $selectedStartDate;
}
$endDateCtrl.datepicker("option", "minDate", $startDate);
$endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
}
Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:
// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);
// To
$("#datepickerTo").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);
function limitToDateSpan(currentFromDate) {
$("#datepickerTo").datepicker("option", "minDate", currentFromDate);
var maxDate = new Date(currentFromDate.getTime());
maxDate.setFullYear(maxDate.getFullYear() + 1);
$("#datepickerTo").datepicker("option", "maxDate", maxDate);
}
limitToDateSpan(defaultFromDate);
// From
$("#datepickerFrom").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: "2013-01-01",
maxDate: "+1Y",
onSelect: function (dateText) {
limitToDateSpan(new Date(dateText));
}
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
$("#<%=txtFromDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
}
});
$("#<%=txtToDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
}
});
All other attributes like format ,autoclose etc are working, but maxDate/minDate is not working.
Any help would be appreciated.
I am using bootstrap-datetimepicker
$(function() {
$("#fdate").datetimepicker({
format: 'yyyy-mm-dd',
pickTime: false,
startView: 'month',
minView: 'month',
autoclose: true,
maxDate: '0'
});
});
Isn't it suppose to be a date value. And also it seems you forgot to use the option in it.
$("#datepicker").datepicker('option', {minDate: <some date>, maxDate: <some date>});
Please have a look here.
-> At first see that have you imported the correct path for bootstrap-datetimepicker
$('#date').datepicker('option', { minDate: new Date(startDate), maxDate: new Date(endDate) });
Thanks to Nargis ,Rajesh & sibeesh for your Quick replies..
I Solved the problem ..
The problem was maxDate and minDate are attributes used in some other plugin (i think jquery datatime picker) . as I am using an old Bootstrap plugin ,The valid attributes are startDate and endDate
The worked code is below
$(function() {
$( "#fdate" ).datetimepicker(
{
format: 'yyyy-mm-dd',
pickTime: false,
startView: 'month',
minView: 'month',
autoclose: true,
startDate: '-1d',//previous date
endDate: new Date()//current date
});
});
How can I get data of a datapicker in jQuery ui?
I've the next code but only get default value. (I use only years)
$('#datePickerTempe').datepicker( {
changeMonth: false,
changeYear: false,
dateFormat: 'MM yy',
//To hide months:
stepMonths: 12,
monthNames: ["","","","","","","","","","","",""],
//Range
minDate: '-4y', //'M'-> month | 'w'-> week | 'd'-> day
maxDate: '0y',
buttonImageOnly: true
});
$('#datePickerTempe').on('click', function(){
console.log('año: '+$('#datePickerTempe').val()); });
Get current date from datepicker (or null if nothing selected):
var selectedDate = $('#datePickerTempe').datepicker("getDate");
You can also add onSelect handler to datepicker:
$('#datePickerTempe').datepicker( {
onSelect: function (dateText, inst) {
console.log(dateText);
}
});
Refer to datepicker getDate method and datepicker onSelect option
<input type="text" id="date" name="date" value=""/>
<script>
var date_fields = $('#date');
date_fields.datepicker({
format: 'mm/dd/yyyy'
}).on('changeDate', function(ev){
date_fields.datepicker('hide');
date_fields.blur();
});
</script>
The added scripts http://www.eyecon.ro/bootstrap-datepicker/
$("#datepicker").change(function() {
alert($(this).val());
});
Works perfectly fine here.