set end Date after select start date - javascript

JSFIDDLE
How can I set end date which must be 1 day after than start date?
$("#beginDate").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'mm/dd/yy',
onClose: function (selectedDate, instance) {
if (selectedDate != '') {
$("#endDate").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setMonth(date.getMonth() + 3);
console.log(selectedDate, date);
$("#endDate").datepicker("option", "minDate", selectedDate);
$("#endDate").datepicker("option", "maxDate", date);
}
}
});

Just update one line in your code onclose event of beginDatePicker
use this line
var minDate2 = new Date(selectedDate);
minDate2.setDate(minDate2.getDate() + 1);
$("#endDate").datepicker("option", "minDate", minDate2);
instead of
$("#endDate").datepicker("option", "minDate", selectedDate);
fiddle

For example, in this sample code, startDatePicker is selected as 2014-3-18, change event of startDatePicker sets the minDate of endDatePicker 2014-3-19. It locks the cells before this date. I hope it helps...
$("#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);
$("endDatePicker").datepicker("option", "minDate", endDate);
$("endDatePicker").datepicker("option", "maxDate", '+2y');
}
});
$("endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});

Issue is that datepicker i expecting a date datatype.
var date = new Date(selectedDate);
date.setDate(date.getDate() +1);
console.log(selectedDate, date);
$("#endDate").datepicker("option", "minDate", date);
$("#endDate").datepicker("option", "maxDate", date);
Updated jsFiddle

Make a date difference. It will invisible the date.
$(function() {
$( "#beginDate, #endDate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
onSelect: function( selectedDate ) {
if(this.id == 'beginDate'){
var dateMin = $('#beginDate').datepicker("getDate");
var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1);
$('#endDate').datepicker("option","minDate",rMin);
$('#endDate').datepicker('setDate', rMin);
}
}
});

Related

JQuery UI two datepickers with from and to fields. Disable 5 days from selected date

I am using two date pickers (From and To). Based on a condition I want to disable 5 days in 2nd datepicker(To) after selecting a date in 1st datepicker(from).
I tried the following codes...
<script type="text/javascript">
var pkg = "<?php echo $package ?>";
$(function() {
if(pkg=="Ordinary"){
var dateFormat = "mm/dd/yy",
from = $("#date")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate: 0
})
.on("change", function() {
var fdate = getDate(this);
to.datepicker("option", "minDate", getDate(this)+5);
}),
to = $("#delivery_date")
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
minDate: 0
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
}
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
});
</script>
But this code disabling all the date before Jan, 2027.enter code here
I fixed it this way -
enter code here
function getDate(element) {
var date;
if(pkg=="Ordinary"){
try {
date = $.datepicker.parseDate(dateFormat, element.value);
date.setDate(date.getDate() + 6);
} catch (error) {
date = null;
}
return date;
}

Jquery Datepicker Limited to the month and year of another datepicker

I have an issue. I need a datepicker which will limit the user to choose the date.
So it goes like this:
1) First input, I should be able to pick whatever day, month, and year I want.
2) Second input, I should be able to pick a day if it is greater than First Input's day, from the same month/year of the First Input. Else alert an error.
EDIT - code:
http://jsfiddle.net/wc6jcpka/
var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
var option = this.id == $("input[id$='startDate']")[0].id ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
Below will work as per your requirement:
var txtTranDate = $("#startDate");
var txtTranDateTo = $("#endDate");
txtTranDate.datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
dateFormat: dateFormat,
maxDate: 0,
numberOfMonths: 1
}).on("change", function () {
var dcal = getDate(this);
if (txtTranDate.val() !== '' && dcal === null) {
txtTranDate.prop("value", "");
txtTranDateTo.prop("value", "");
} else {
txtTranDateTo.datepicker("option", "minDate", getDate(this));
}
});
txtTranDateTo.datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
maxDate: 0,
dateFormat: dateFormat,
numberOfMonths: 1
}).on("change", function () {
var dcal = getDate(this);
if (txtTranDateTo.val() !== '' && dcal === null) {
txtTranDate.prop("value", "");
txtTranDateTo.prop("value", "");
} else {
txtTranDate.datepicker("option", "maxDate", getDate(this));
}
});
UPDATE Method to check if valid date is entered
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = null;
}
return date;
}
#Gaurav P gave me a hint, but I had to do some modifications so that the code works.
Here is the code:
var txtTranDate = $("input[id$='startDate']");
var txtTranDateTo = $("input[id$='endDate']");
txtTranDate.datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
}).on("change", function () {
var date = this.value;
var values = date.split("/");
var lastDate = new Date(values[2], values[1] - 1, daysInMonth(values[1], values[2]));
var formatted = $.datepicker.formatDate("dd/mm/yy", lastDate);
txtTranDateTo.datepicker("option", "minDate", getDate(this));
txtTranDateTo.datepicker("option", "maxDate", formatted);
});
txtTranDateTo.datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
numberOfMonths: 1
}).on("change", function() {
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate('dd/mm/yy', element.value);
} catch (error) {
date = null;
}
return date;
}
This will also work, just edited some of your code.
http://jsfiddle.net/wc6jcpka/2/
$(function(){
var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
var endDateInput = $("#endDate").val();
var startDateInput = $("#startDate").val();
if(endDateInput != '' && startDateInput != ''){
var endDate = new Date();
endDate.setMonth (parseInt(endDateInput.substr(3, 6), 10) - 1);
endDate.setDate (parseInt(endDateInput.substr(0, 3), 10));
endDate.setYear (parseInt(endDateInput.substr(6, 10), 10));
var startDate = new Date();
startDate.setMonth (parseInt(startDateInput.substr(3, 6), 10) - 1);
startDate.setDate (parseInt(startDateInput.substr(0, 3), 10));
startDate.setYear (parseInt(startDateInput.substr(6, 10), 10));
if(startDate.getDate() >= endDate.getDate() || startDate.getMonth() != endDate.getMonth() || startDate.getYear() != endDate.getYear()){
alert("Error");
}
}
}
});
});

Highlight daterange in jQuery UI datepicker on hover

I'm having some trouble with my jQuery UI Datepicker.
I've managed to make it highlight my daterange when I select a start and end date (e.g. 2015/12/02 - 2015/12/08) - then the dates between is highlighted in a green color.
My question is now - can I highligt a daterange BEFORE I select an end date?
Here's an example:
http://stephencelis.github.io/timeframe/#example_information
When I select a startdate, it highlights the daterange until I select my desired end-date. I'm not sure if it's something that can be done in jQuery UI Datepicker - and if not, then I have to find something else - but it's worth a try asking in here :)
Here is my code so far:
$(function() {
var disabledDate = ["13-12-2015", "14-12-2015", "15-12-2015"];
$.datepicker.setDefaults($.datepicker.regional["da"]);
$("#datepicker").datepicker({
minDate: 0,
/* numberOfMonths: [4,2], */
numberOfMonths: 2,
firstDay: 1,
inline: true,
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
if(disabledDate.indexOf(string) == -1) {
} else {
return[false, 'disabled-dates'];
};
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "selected-dates" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
if (!date1 || date2) {
$("#chooseDateFrom").val(dateText);
$("#chooseDateTo").val("");
$(this).datepicker("option", "minDate", dateText);
} else if( selectedDate < date1 ) {
$("#chooseDateTo").val( $("#chooseDateFrom").val() );
$("#chooseDateFrom").val( dateText );
$(this).datepicker("option", "minDate", dateText);
} else {
$("#chooseDateTo").val(dateText);
$(this).datepicker("option", "minDate", null);
}
}
});
});
I hope someone can help me a bit :) I'm kinda stuck here :/
This would help you....
$(document).ready(function(){
var disabledDate = ["13-12-2015", "14-12-2015", "15-12-2015"];
$("#datepicker").datepicker({
minDate: 0,
/* numberOfMonths: [4,2], */
numberOfMonths: 2,
firstDay: 1,
inline: true,
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
if(disabledDate.indexOf(string) == -1) {
} else {
return[false, 'disabled-dates'];
};
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "selected-dates" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateFrom").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#chooseDateTo").val());
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
if (!date1 || date2) {
$("#chooseDateFrom").val(dateText);
$("#chooseDateTo").val("");
$(this).datepicker("option", "minDate", dateText);
} else if( selectedDate < date1 ) {
$("#chooseDateTo").val( $("#chooseDateFrom").val() );
$("#chooseDateFrom").val( dateText );
$(this).datepicker("option", "minDate", dateText);
} else {
$("#chooseDateTo").val(dateText);
$(this).datepicker("option", "minDate", null);
}
setTimeout("$('a.ui-state-default').attr('onmouseover','setBackColor(this)');",1000);
}
});
$('a.ui-state-default').attr('onmouseover','setBackColor(this)');
});
function setBackColor(object){
var day1=parseInt($(object).html());
var month1=parseInt($(object).parents("td").attr("data-month"));
var year1=parseInt($(object).parents("td").attr("data-year"));
var date1=new Date(year1,month1, day1);
//$("#chooseDateFrom").val(date1);
if(Date.parse(document.getElementById('chooseDateFrom').value)){
$("a.ui-state-default").each(function(){
var obj = this;
var day=parseInt($(obj).html());
var month=parseInt($(obj).parents("td").attr("data-month"));
var year=parseInt($(obj).parents("td").attr("data-year"));
var date=new Date(year,month, day);
if(new Date($("#chooseDateFrom").val())<=date && date<=date1){
$(obj).css("background-color","#78F764");
}else{
$(obj).css("background-color",'#e6e6e6');
}
});
}
}

Change range datepicker (jquery)

I have a question regarding jquery.ui datepicker.
I have a project where the week starts on Friday.
That I have no problem with that.
The thing is datepicker not find the way to make the select that I have for weeks, beginning with Friday and also select default Thursday click anywhere for that week.
In summary:
Week Starts Thursday.
The Selection of the week begins Thursday (range)
OnSelect Automatically switches to the selected week Thursday.
Can you help?
My code:
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 5,
dateFormat: "dd/mm/yy",
maxDate : "+0",
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
//window.location = '<?php echo HTTP_URI; ?>ranking/week?day=' + dateText + '';
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
Yeep! I find my own solution.
My code
$(function() {
var selectCurrentWeek = function(callback) {
window.setTimeout(function () {
$(".week-picker").find("a.ui-state-active").parents("tr").find("a.ui-state-default").each(function(key, node) {
$(this).addClass("ui-state-active");
});
callback();
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
firstDay: 5,
dateFormat: "dd/mm/yy",
maxDate : "+0",
onSelect: function(dateText, inst) {
selectCurrentWeek(function() {
var startDayy = $(".week-picker").find("a.ui-state-active").eq(0);
var EndDayy = $(".week-picker").find("a.ui-state-active").eq(6);
var startDay = startDayy.text();
var EndDay= EndDayy.text();
var monthStart = startDayy.parent().attr('data-month');
var monthEnd= EndDayy.parent().attr('data-month');
var yearStart = startDayy.parent().attr('data-year');
var yearEnd = EndDayy.parent().attr('data-year');
if(monthStart < 10){ monthStart = '0'+monthStart; }
if(monthEnd < 10){ monthEnd = '0'+monthEnd; }
var CompleteStartDay = startDay +'/'+ monthStart +'/'+yearStart;
var CompleteEndDay = EndDay +'/'+ monthEnd +'/'+yearEnd;
$('#startDate').text(CompleteStartDay);
$('#endDate').text(CompleteEndDay);
//window.location = '<?php echo HTTP_URI; ?>ranking/week?day=' + CompleteStartDay + '';
});
}
});
});

jQuery UI datepicker range selector issue

Created date picker with range selector with help from this answer
When we select date from "1st May" and to "1st Aug", user not able to change "from" date previous than 1st May.
Is there any solution in this case that instead of not allowing user browse the date than min date. User should be allowed to go prev. date but with alert or notification that they have selected wrong date range.
Code snippet : credit
$(function() {
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'TO' minDate
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
// Set 'TO' maxDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() + 3);
if(dt < Date.now()) {
$("#to-datepicker").datepicker("option", "maxDate", dt);
}
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'FROM' maxDate
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
// Set 'FROM' minDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() - 3);
if(dt < Date.now()) {
$("#from-datepicker").datepicker("option", "minDate", dt);
}
}
});
});
http://jsfiddle.net/4Ln0cxpq/
Try this in JsFiddle
$(function() {
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
onClose: function (selectedDate) {
var dt = new Date($(this).datepicker("getDate"));
var dtTo = new Date($("#to-datepicker").datepicker("getDate"));
if($("#to-datepicker").val()!="" && dt > dtTo) {
$("#from-datepicker").val("");
alert("selected date greater than 'To' date");
}
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
onClose: function (selectedDate) {
var dt = new Date($(this).datepicker("getDate"));
var dtFrom = new Date($("#from-datepicker").datepicker("getDate"));
if($("#from-datepicker").val()!="" && dt<dtFrom){
$("#to-datepicker").val("");
alert("selected date less than 'From' date");
}
}
});
});
Your code set -3,+3 month from selected one.
Try this fiddle: JSFiddle
you can remove this:
// Set 'TO' minDate
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
and this:
// Set 'FROM' maxDate
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
Then add your check if FROM is greater than TO, if True, show your custom notification
DEMO

Categories