I have to date pickers and I need both to have the same options and set of dates. I have a .each to do this, but the minDate option is not set. I've had a look around and seen that the way to set this when using beforeShowDay is to add the option after the control has initialized, but that doesn't seem to be working.
Here's the code:
// Defines and manipulates the datepickers
job.dateControl = function() {
var datepickers = $(".js-datepicker");
datepickers.each(function () {
var dateToday = new Date();
$(this).datepicker({
defaultDate: "+1w",
changeMonth: false,
numberOfMonths: 2,
dateFormat: "dd/mm/yy",
beforeShowDay: function (d) {
var dmy = "";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate();
dmy += "/";
if (d.getMonth() < 9) dmy += "0";
dmy += (d.getMonth() + 1);
dmy += "/";
dmy += d.getFullYear();
console.log(dmy + ' : ' + ($.inArray(dmy, job.unavailableDates)));
if ($.inArray(dmy, job.unavailableDates) !== -1) {
return [false, "", "Unavailable"];
} else {
return [true, "", "Available"];
}
},
minDate: dateToday
});
$(this).datepicker("option", "minDate", dateToday);
});
}
The 'job.unavailableDates' array containan array of UK bank holidays in the string format "dd/mm/yyyy".
Related
I'm wondering if it's possible to show only 3 days a year in the datepicker?
This is what I got so far:
JS:
var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +
date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$('#date').datepicker({ beforeShowDay: available });
css:
.ui-datepicker-unselectable {display: none;}
jsfiddle link
Dear you forgot defaultDate, please try this:
var availableDates = ["28-12-2017","29-12-2017","30-12-2017"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
$('#date').datepicker({ beforeShowDay: available, defaultDate: "12/28/2017" });
Please use this fiddle http://jsfiddle.net/szYYY/50/
I would suggest you to remove the hardcoded date and make the code more generic:
JS:
var availableDates = ["28-12-2017", "29-12-2017", "30-12-2017"];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) !== -1) {
return [true, "", "Available"];
} else {
return [false, "", "unAvailable"];
}
}
$('#date').datepicker({
beforeShowDay: available,
dateFormat: "dd-mm-yy",
minDate: availableDates[0],
maxDate: availableDates[2]
});
No CSS required.
Displaying the full month with disabled dates gives clarity to the user rather than hiding the dates.
Demo: http://jsfiddle.net/szYYY/52/
I am trying to pickup dates. I have JavaScript code and I don't know where I am doing wrong. There is a start date and a end date in the code below.
I need to pick up date from the form which is based on JavaScript. The two functions and details are given below. Please have a look at the code and let me know where could the issue be.
function valuation_date_from(maxDate) {
var d = new Date();
var startDate = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
var datepicker1 = {
singleDatePicker: true,
calender_style: "picker_3",
timePicker: true,
startDate: startDate,
timePicker24Hour: true,
minDate: startDate,
timePickerIncrement: 5,
format: 'DD/MM/YYYY h:mm a',
onSelect:function(){
alert();
}
};
if (maxDate != '') {
datepicker1.maxDate =PrevDay(maxDate);
}
$('#valuation_date_from').daterangepicker(datepicker1, function(start, end, label) {
// console.log(start.format('DD/MM/YYYY h:mm a'));
valuation_date_to(start.format('DD/MM/YYYY h:mm a'),$('#pricing_date_from').val());
if($('#valuation_date_to').val()==""){
pricing_date_from('',start.format('DD/MM/YYYY h:mm a'));
}
if($('#pricing_date_from').val()==""){
pricing_date_to(start.format('DD/MM/YYYY h:mm a'));
}
});
}
and date to:
function valuation_date_to(minDate,maxDate) {
var d = new Date();
var startDate = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
var datepicker2 = {
singleDatePicker: true,
minDate: startDate,
startDate: nextDay(minDate),
calender_style: "picker_3",
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 5,
format: 'DD/MM/YYYY h:mm a'
};
if (minDate != '') {
datepicker2.minDate = nextDay(minDate);
}
if (maxDate != '') {
datepicker2.maxDate = PrevDay(maxDate);
}
$('#valuation_date_to').daterangepicker(datepicker2, function(start, end, label) {
valuation_date_from(start.format('DD/MM/YYYY h:mm a'));
pricing_date_from($('#pricing_date_to').val(),start.format('DD/MM/YYYY h:mm a'));
if($('#pricing_date_from').val()==""){
pricing_date_to(start.format('DD/MM/YYYY h:mm a'));
}
});
}
Any help is appreciated. Thanks.
In a Car Rental Website Reservation System, i am using jquery ui calendar as a date range picker for "From Date" and "To Date" selection.
I want to show dynamic rates for different dates as shown in figure. Please let me know how i can do that ?
<input type="text" id="booking-from" name="booking-from" />
<input type="text" id="booking-to" name="booking-to" />
$( "#booking-from" ).datepicker({
defaultDate: "+1w",
minDate: 0,
firstDay: 0,
dateFormat: 'dd-mm-yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
/*var day1 = $("#booking-from").datepicker('getDate').getDate() + 1;
var month1 = $("#booking-from").datepicker('getDate').getMonth();
var year1 = $("#booking-from").datepicker('getDate').getFullYear();
year1 = year1.toString().substr(2,2);
var fullDate = day1 + "-" + month1 + "-" + year1;*/
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#booking-to" ).datepicker( "option", "minDate", newMin );
}
});
$( "#booking-to" ).datepicker({
defaultDate: "+1w",
minDate: '+2d',
changeMonth: true,
firstDay: 0,
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
var maxDate = $(this).datepicker('getDate');
var newMax = new Date(maxDate.setDate(maxDate.getDate() - 1));
$( "#booking-from" ).datepicker( "option", "maxDate", newMax);
}
});
$("#booking-from").datepicker('setDate', '+1');
$("#booking-to").datepicker('setDate', '+8');
Fiddle
I have manage it using jQuery Datepicker by Keith Wood library
$('#startPicker,#endPicker').datepick({
onSelect: customRange, onDate: showDayOfYear, showTrigger: '#calImg'
});
function customRange(dates) {
if (this.id === 'startPicker') {
console.log(dates[0]);
$('#endPicker').datepick('option', 'minDate', dates[0] || null);
}
else {
$('#startPicker').datepick('option', 'maxDate', dates[0] || null);
}
}
function pad(n) {
return n < 10 ? '0' + n : n
}
var specificPrices = {"2016-06-12": "$300", "2016-06-26": "$63", "2016-07-26": "$63", "2016-07-15": "$63", "2016-08-16": "$63"}
function showDayOfYear(date) {
var checkDate = date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()); //2015-12-04
var specificPrice;
if (specificPrices[checkDate]) {
specificPrice = specificPrices[checkDate];
} else {
specificPrice = '';
}
return {
content: date.getDate() + '<br><sub>' + specificPrice + '</sub>', dateClass: 'showDoY'
}
HTML
<p><span class="demoLabel">Date range with separate fields:</span></p>
<input type="text" id="startPicker"> to
<input type="text" id="endPicker">
jsfiddle Link
I want to have the dateformat in this format: 2015-08-04T00:00:00Z.
so first year, month, day.
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date, "getDate")
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length != 0];
},
onSelect: function (dateText, inst) {
var dt = $.datepicker.formatDate('yy-mm-dd', dateText, "getDate")
alert(dt);
var hallo = $("#form_inp1").val() + 'T00:00:00Z';
alert(dateText);
alert(hallo);
//$("#form_inp1").datepicker("getDate");
//alert($("#form_inp1").formatDate('yy-mm-dd', dateText, "getDate")
},
But If I do an alert(dateText) I see the format as: 4-8-2015 and it has to be: 2015-08-04.
Thank you
If I try it like this:
onSelect: function (dateText, inst) {
dateText = dateText.split("-");
dateText = new Date('' + dateText[2] + '-' + dateText[1] + '-' + dateText[0] + '');
alert(dateText);
}
I get invalid date
So this var hallo = $("#form_inp1").val() + 'T00:00:00Z';
returns: 4-8-2015T00:00:00Z . But it has to be:2015-08-04T00:00:00Z.
Thank you
Quick fix is to change the date format using plain Javascript. This can be achieved by following script.
dt= dt.split("-");
dt = new Date('' + dt[2] + '-' + dt[1] + '-' + dt[0] + '');
to add zero in case the day, month and year is below 10, use following method.
function AddTrailingZero(i) {
if (i < 10) { i = "0" + i }; // add zero in front of numbers < 10
return i;
}
Let me know if you have any question related to the code snippet above.
I have a datepicker that highlights a selected week. It is using an ajax request. Which is where I am having a problem. When I select a week i.e. 29/08/11 and the page refreshes the highlighted week is no longer highlighted.
Datepicker.js
$(function()
{
var startDate;
var endDate;
var selectCurrentWeek = function()
{
window.setTimeout(function () { $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')}, 1000);
}
function check(d) {
if(d.length() == 2) {
dd = d;
return dd;
} else {
dd = "0" + myDateParts[0];
return dd;
}
}
var selectedWeek;//remember which week the user selected here
$('.week-picker').datepicker( {
beforeShowDay: $.datepicker.noWeekends,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = 'yy-mm-dd'
var newDate = $('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
var oldDate = document.getElementById('startDate');
var date_textnode = oldDate.firstChild;
var date_text = date_textnode.data;
myDateParts = date_text.split("-");
var dd = myDateParts[2];
var mm = myDateParts[1];
var yy = myDateParts[0];
selectCurrentWeek();
window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd; <<
At this point above this is where the window is refreshed and it GETs the URL. So that when I select a date it outputs like the following http://0.0.0.0:3000/timesheet?week_commencing=2011-09-05
},
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'); });
});
index.html.erb
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}
Note
The window.onload URL function gets the week commencing from the url
Jsfiddle - Including datepicker
http://jsfiddle.net/YQ2Zw/12/
Update
You can use the defaultDate to set the initial date selected on the datepicker, and simulate a click event on the calendar to highlight the week:
var selectDate = '09/29/2011';
$('.week-picker').datepicker({
defaultDate: selectDate
}).click(function(event) {
// highlight the TR
$(".ui-datepicker-current-day").parent().addClass('highlight');
// highlight the TD > A
$(".ui-datepicker-current-day:eq(0)").siblings().find('a').addClass('white');
}).click();
Example: http://jsfiddle.net/william/YQ2Zw/15/
Update
Assuming Datepicker.js is loaded in timesheet, you should be able to do that with two more lines:
window.onload = function getURL(){
var url = document.location.href;
urlSplit = url.split("/timesheet");
if(urlSplit[1]== "")
{
var d = getMonday(new Date());
dd = zeroPad(d.getDate(),2);
mm = zeroPad(d.getMonth()+1,2);
yy = d.getFullYear();
document.getElementById('startDate').innerHTML = yy + "-" + mm + "-" + dd;
//window.location.href = "/timesheet?week_commencing=" + yy + "-" + mm + "-" + dd;
$('.week-picker').datepicker({
defaultDate: mm + '/' + dd + '/' + yy
}).click();
}
else
{
week = url.split("week_commencing=");
//return week[1];
document.getElementById('startDate').innerHTML = week[1];
}
}