I have 2 datepickers, one is a fromDate and one is a toDate. I can highlight the range from the fromDate to the toDate successfully in beforeShowDay(), but I need it to highlight when new values are selected. This triggers the onSelect statement. Is there a way to either:
1) trigger the beforeShowDay again? or
2) get all the dates of the new range and apply a css class to them?
beforeShowDay: function(date){
if (date >= initialFromDate && date <= initialToDate) {
return [true, 'ui-individual-date', ''];
}
else {
return [true, '', ''];
}
},
onSelect: function (dateText, obj) {
var fromDate = new Date(dateText);
var toDate = $(".dateDiv2").datepicker('getDate');
**get individual dates?
if (individualdate >= fromDate && individualDate <= toDate)
apply css class or formatting to individualDate**
},
I have done this successfully with a datepicker for a from date and a datepicker for a to date, so I modified it for one datepicker. Here is the code:
$(function () {
var today = new Date();
var thisYear = (today).getFullYear();
var fromDate = '1/1/2000' //this is the initial from date to set the datepicker range
var toDate = '1/7/2000' // this is the initial to date to set the datepicker range
//... initialize datepicker....
},
beforeShowDay: function(date){
//if the date is in range
if (date >= fromDate && date <= toDate) {
return [true, 'ui-individual-date', '']; //applies a css class to the range
}
else {
return [true, '', ''];
}
},
onSelect: function (dateText, obj) {
//sets the new range to be loaded on refresh call, assumes last click is the toDate
fromDate = toDate;
toDate = new Date(dateText);
$(".classDp1").datepicker("refresh");
$(".classDp2").datepicker("refresh");
},
Every time you refresh the beforeShowDay function is called with the new fromDate and toDate range. Having the variables outside the function and modifying them within enables the highlighting from the css to be applied on each click.
Link on jsFiddle
HTML:
<div id="dateFrom"></div>
<div id="dateTo"></div>
CSS:
div#dateFrom, div#dateTo { display: inline-block; }
.ui-individual-date { background: yellow; }
JS:
$( function() {
$( "#dateFrom, #dateTo" ).datepicker( {
beforeShowDay: function( date ){
var initialFromDate, initialToDate;
initialFromDate = $("#dateFrom").datepicker('getDate');
initialToDate = $("#dateTo").datepicker('getDate');
if ( date >= initialFromDate && date <= initialToDate ) {
return [ true, 'ui-individual-date', '' ];
} else {
return [ true, '', '' ];
}
},
onSelect: function ( dateText, obj ) {
$( "#dateFrom" ).datepicker( "refresh" );
$( "#dateTo" ).datepicker( "refresh" );
}
} );
} );
Just in beforeShowDay change initialFromDate and initialToDate to $("#dateFrom").datepicker('getDate') and $("#dateTo").datepicker('getDate').
And in onSelect use $( "#dateFrom" ).datepicker( "refresh" ); and $( "#dateTo" ).datepicker( "refresh" );.
Related
I have 2 datepickers. #datepicker0 and #datepicker1 and the following code to check if the date_from is after date_to:
$('#datepicker0').datepicker({
dateFormat: 'yy-mm-dd'
});
var valeDate = {
dateFormat: 'yy-mm-dd',
onSelect: function() {
if ($('#datepicker0').val() > $(this).val()) {
alert("Date problem");
$(this).val(null)
}
$(this).change();
}
}
$("#datepicker1").datepicker(valeDate).on("change", function() {
display("Change event");
I would like to remove the parameter #datepicker0 from the onSelect function in order to make the function reusable.
Could anyone show me how to make it?
function validateDate(datepicker, value) {
if (value > datepicker.val()) {
alert("Date problem")
datepicker.val(null)
}
datepicker.change()
}
var valeDate = {
dateFormat: 'yy-mm-dd',
onSelect: function() {
validateDate($(this), $('#datepicker0').val())
}
}
Next time, please address questions like this (everything works but code require modifications) to code review (https://codereview.stackexchange.com/)
finally i used this code:
function datepickerValidator(startDate,endDate) {
var datepickerFrom = startDate;
var datepickerTo = endDate;
// returns the millisecond obtained from the string 'dd-mm-yy'
function getTimeMillis(dateString) {
var splittedFrom = dateString.split("-");
var day = splittedFrom[0];
var month = splittedFrom[1];
var year = splittedFrom[2];
var dateTmp = new Date(year + "-" + month + "-" + day);
var timeMillis = dateTmp.getTime();
return timeMillis;
}
var validateDatePickerOption = {dateFormat: 'dd-mm-yy',
onSelect: function() {
from = getTimeMillis(datepickerFrom.val());
to = getTimeMillis($(datepickerTo).val());
if ( from > to ) {
alert("Date problem: value 'To' must be after 'From'");
$(this).val(null)
}
}
}
return validateDatePickerOption;
}
and for each datepicker:
var from = $("#From");
var to = $("#To");
var datepickerOption = datepickerValidator(from,to);
from.datepicker(datepickerOption);
to.datepicker(datepickerOption);
Here is a javascript made by materialize, and I am trying to disable specific dates. But I tried a lot of code here but could not get any result from this.
<script>
var dateToday = new Date();
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
format: "yyyy-mm-dd",
min: dateToday,
max: new Date(2030, 11, 31),
closeOnSelect: true,
onOpen: function () {
this.clear();
},
onSet: function () {
var x,y,year,date,month;
x = $('.datepicker1').pickadate().val().toString();
y = x.split(/[ ,]+/);
date = y[0];
month = y[1];
year = y[2];
console.log(y[0]+" "+ y[1]+ " "+ y[2]);
if(date && month && year){
this.close();
}
}
});
$("#mcDateFrom").click(function(event) {
event.stopPropagation();
$("#mcDateFrom").first().pickadate("picker").open();
});
$("#mcDateTo").click(function(event) {
event.stopPropagation();
$("#mcDateTo").first().pickadate("picker").open();
});
</script>
I am also trying the below code also.
var array = ["2018-06-28","2013-03-15","2013-03-16"]
$('.datepicker').pickadate({
beforeShowDay: function(date){
var string = jQuery.pickadate.formatDate('yyyy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
But no result after trying a lot of things as well as this code. I need help. Thanks in advance.
I got a calendar range on a page, consisting of two inputs, #from-date and #to-date. If I select from date, I want the to date to be shown automatically.
HTML markup:
<div class="calendar-range">
<div class="filter-first date-from">
<input type="text" id="from-date" class="form-control form-control-main calendar-from datepicker">
<i class="fa fa-calendar"></i>
</div>
<div class="filter date-to">
<input type="text" id="to-date" class="form-control form-control-main calendar-to datepicker">
<i class="fa fa-calendar"></i>
</div>
</div>
This is the jQuery code:
body.find(".calendar-range").each(function (index, callback) {
var selectedToElement = $(this).find('.calendar-to');
var selectedToDay = selectedToElement.datepicker('getDate');
var selectedFromElement = $(this).find('.calendar-from');
var selectedFromDay = selectedFromElement.datepicker('getDate');
var numberOfMonths = 2;
if (body.width() < 768) {
numberOfMonths = 1;
}
var settings = {
changeMonth: false,
numberOfMonths: numberOfMonths,
dateFormat: dateFormat,
minDate: new Date(Date.now()),
maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
onSelect: function (dateText, object) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
selectedToElement.change();
selectedFromElement.change();
if ($(this).hasClass('calendar-from')) {
to.datepicker("option", "minDate", getDate(this.value));
} else if ($(this).hasClass('calendar-to')) {
from.datepicker("option", "maxDate", getDate(this.value));
}
},
beforeShow: function (input, inst) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
},
beforeShowDay: function (date) {
var d = date.getTime();
var cssClass = 'selected-date-range';
var defaultClass = '';
if (selectedToDay != null && d == selectedToDay.getTime()) {
cssClass = cssClass + ' selected-date-range-last';
defaultClass = defaultClass + ' selected-date-range-last';
} else if (selectedFromDay != null && d == selectedFromDay.getTime()) {
cssClass = cssClass + ' selected-date-range-first';
defaultClass = defaultClass + ' selected-date-range-first';
}
if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) {
return [true, cssClass, ''];
}
return [true, defaultClass, ''];
},
onClose: function (input, object) {
if (object.id === "from-date") {
to.datepicker("show");
}
}
};
var from = selectedFromElement.datepicker(settings);
var to = selectedToElement.datepicker(settings);
});
I tried solving it with onClose, but this seems to iterate twice, and close the opened #to-date too. Is it possible to implement it without separating the two datepickers? (also something really weird happens with hiding/showing the datepickers)
Help appreciated, thx.
There are a number of improvements you can make. Here is a working example:
https://jsfiddle.net/Twisty/mcqra47o/
JavaScript
$(function() {
var body = $("body");
var dateFormat = "mm/dd/yy";
$(".calendar-range").each(function(index, callback) {
var selectedToElement = $(this).find('.calendar-to');
var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date;
var selectedFromElement = $(this).find('.calendar-from');
var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date;
var numberOfMonths = 2;
if (body.width() < 768) {
numberOfMonths = 1;
}
var settings = {
changeMonth: false,
numberOfMonths: numberOfMonths,
dateFormat: dateFormat,
minDate: 0,
maxDate: "+1y",
onSelect: function(dateText, object) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
/*
selectedToElement.change();
selectedFromElement.change();
*/
if ($(this).hasClass('calendar-from')) {
selectedToElement.datepicker("option", "minDate", dateText);
} else if ($(this).hasClass('calendar-to')) {
selectedFromElement.datepicker("option", "maxDate", dateText);
}
},
beforeShow: function(input, inst) {
selectedToDay = selectedToElement.datepicker('getDate');
selectedFromDay = selectedFromElement.datepicker('getDate');
},
beforeShowDay: function(date) {
var d = date.getTime();
var cssClass = 'selected-date-range';
var defaultClass = '';
if (selectedToDay != null && d == selectedToDay.getTime()) {
cssClass = cssClass + ' selected-date-range-last';
defaultClass = defaultClass + ' selected-date-range-last';
} else if (selectedFromDay != null && d == selectedFromDay.getTime()) {
cssClass = cssClass + ' selected-date-range-first';
defaultClass = defaultClass + ' selected-date-range-first';
}
if (selectedFromDay != null && selectedToDay != null && d <= selectedToDay.getTime() && d >= selectedFromDay.getTime()) {
return [true, cssClass, ''];
}
return [true, defaultClass, ''];
},
/*
onClose: function(input, object) {
if (object.id === "from-date") {
to.datepicker("show");
}
}
*/
};
var from = selectedFromElement.datepicker(settings);
var to = selectedToElement.datepicker(settings);
});
});
First, we should not call .datepicker() to getDate before it's been initialized. So to set the following variables early, we can do this:
var selectedToDay = selectedToElement.val().length ? selectedToElement.datepicker('getDate') : new Date;
var selectedFromDay = selectedFromElement.val().length ? selectedFromElement.datepicker('getDate') : new Date;
For minDate and maxDate, we can check the API and see:
Multiple types supported:
Date: A date object containing the minimum date.
Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday.
String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.
I suggest using relative date formats if possible. For today, I used 0, and for 1 year, I used "+1y".
When a selection is made change is fired anyway, so I commented this out. If it is needed for something else, I would suggest looking at .tragger("change").
The onSelect option passes dateText in, so we can use that to set the new minDate and maxDate as needed.
Hopefully that addresses everything and works as you'd desired.
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
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
};
}