jQuery UI datepicker range selector issue - javascript

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

Related

jquery UI datpicker highlight the week instead of day

I have this code for jquery UI datepicker modified to select a complete week, i want to highlight the current selected week, right now the activate date which is today is highlighted but i want it should the entire week starting from sunday
the code is already selecting the week when i clik on any row, but the only issue is on load it does not select the current week, it just select the todays date
Here is the code i am using
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
$(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,
changeMonth: true,
changeYear: true,
selectOtherMonths: true,
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();
},
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').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
any idea how can i do this
html is
<div class="week-picker"></div>
here is the fiddle
https://jsfiddle.net/6mbp3Lgn/
i want that today is 3rd nov, it should keep the first row selected because 3rd falls in first week and like that

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

Stuck trying to get datepicker to play nice with a set date for second date picker

Question is I have two date pickers what called leave_start the other leave_end. I have some custom things going on to block out weekends and set a minDate as today and also block out custom holidays. I however cant seem to figure out why I cant grab the val date from the first date picker(leave_start) and set it as a minDate in my second datepicker(leave_end). Everything else works great just cant seem to get this to work. Any help would be greatly appreciated!
Side note this is a ruby on rails app
Using jquery datepicker.
Here is my Application.js
$(document).ready(function() {
var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
var start = $("#leave_start").val();
$('#leave_start').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_end').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: start,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
}):
You can set a change event handler on the first datepicker to update minDate of the second.
Simple Example:
$('#date1').datepicker();
$('#date2').datepicker();
$('#date1').change(function() {
$( "#date2" ).datepicker( "option", "minDate", $('#date1').val() );
});
See working demo: http://jsfiddle.net/ddan/jon3xt3e/1/
EDIT
Example using your settings and javascript:
$(document).ready(function() {
var penn = ["2015-01-01", "2015-04-03", "2015-05-25", "2015-07-03", "2015-09-07", "2015-11-26", "2015-12-25", "2016-01-01"];
var start = $("#leave_start").val();
$('#leave_start').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: 0,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_end').datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate: start,
beforeShowDay: function(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
});
$('#leave_start').change(function() {
$( "#leave_end" ).datepicker( "option", "minDate", $('#leave_start').val() );
});
});
Working example: http://jsfiddle.net/ddan/jon3xt3e/2/
Use the onSelect method of the first to change the option of the second. your current attempt will only get the value of the input on page load so it requires binding to events to make the changes as well as using the API to change options
function beforeShow(date) {
var weekend = $.datepicker.noWeekends(date);
if (weekend[0]) {
var holidays = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [penn.indexOf(holidays) == -1];
} else {
return weekend;
}
}
$(function() {
var start = $("#leave_start").val();
$('#leave_start').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function(date, ui) {
$leave.datepicker('option', {'minDate': date});
},
beforeShowDay: beforeShow
});
var $leave = $('#leave_end').datepicker({
minDate: start,
dateFormat: "yy-mm-dd",
onSelect: function(d, ui) {
//do something when leave selected
},
beforeShowDay: beforeShow
});
});
Also note that you have beforeShowDay property twice in your plugin definition objects
DEMO

set end Date after select start date

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

DatePicker Problem

I have to set the startdate/Mindate in jquery datapicked calender. i am using datepicker v1.7.2. and using mindate and max date prpperty but its not working fine.
Try this code. In this the end date is 1 day after start date.
$('#enddate').datepicker({
dateFormat: "dd M yy",
beforeShow: customRange,
//Your other configurations.
});
function customRange(input) {
if (input.id == "enddate")
{
dateMin = new Date();
if ($("#startdate").datepicker("getDate") != null)
{
dateMin = $("#startdate").datepicker("getDate");
dateMin.setDate(dateMin.getDate() + 1); //here we are adding 1 day to start date/
}
}
return {
minDate: dateMin
};
}​

Categories