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");
}
}
}
});
});
Related
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;
}
I've jquery ui datepicker and I want to make my datepicker position fixed that's why I want to show datepicker in a div on responsive or mobile devices because when I scroll my page down on mobile with safari browser datepicker dissapears that's why I want to show my datepicker in a div as booking.com datepicker (please check this lin on mobile)
function datePicker() {
var dateFormat = "DD/MM/YY",
from = $("#checkin,.checkin").datepicker({
numberOfMonths: 2,
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
$(this).attr("disabled", false);
},
onSelect: function(selectedDate) {
window.setTimeout($.proxy(function() {
$(this).parents(".book-holiday").find("#checkout,.checkout").focus();
}, this), 10);
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 500000));
$("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
$("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
},
beforeShowDay: function(date) {
var selectedDate = $(this).datepicker('getDate'),
fromDate = from.datepicker('getDate');
if (!fromDate || !selectedDate) {
return [true]
}
var dateClass = '';
var dateClass = '';
if (date > fromDate && date < selectedDate) {
dateClass = 'start';
} else if (+date == +selectedDate) {
dateClass = 'stop';
}
return [true, dateClass];
},
beforeShow: function(input, inst) {
$(this).attr("disabled", true);
$(this).datepicker("widget").addClass("main-datepicker");
}
});
$("#checkout,.checkout").datepicker({
numberOfMonths: 2,
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
$(this).attr("disabled", false);
},
onSelect: function(selectedDate) {
$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
},
beforeShowDay: function(date) {
var selectedDate = $(this).datepicker('getDate'),
fromDate = from.datepicker('getDate');
if (!fromDate || !selectedDate) {
return [true]
}
var dateClass = '';
if (date > fromDate && date < selectedDate) {
dateClass = 'start';
} else if (+date == +selectedDate) {
dateClass = 'stop';
}
return [true, dateClass];
},
beforeShow: function(input, inst) {
$(this).attr("disabled", true);
$(this).datepicker("widget").addClass("main-datepicker");
}
});
}
datePicker();
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
From : <input type="text" class="checkin">
To: <input type="text" class="checkout">
<div id="checkin_div"></div>
<div id="checkout_div"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Codepen Demo
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');
}
});
}
}
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);
}
}
});
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 + '';
});
}
});
});