We Keep Coding

How to update a Jquery calendar with a JS variable

I am trying to implement this jQuery Calendar into my website. I've got the calendar running, and everything works.
I want to be able to alter the date in the calendar when a user pushes one of four buttons:
1 hour
Tomorrow
1 week
2 weeks
When a user pushes a button I would like the calendar to change the date accordingly. The calendar has the option called startDate that I can use for the purpose - but I can't seem to trigger it.
The content of val = f.x. 2020-03-07 10:02
$.datetimepicker.setLocale('da');
$('#datetimepicker').datetimepicker({
dayOfWeekStart: 1,
lang: 'da',
inline: true,
scrollMonth: false,
timepicker: false,
startDate: new Date(document.getElementById('timeForAlert').value),
onSelectDate: function() {
userHasChosen();
},
onSelectTime: function() {
userHasChosen();
}
});
$('#datetimepicker4').datetimepicker({
format: 'Y-d-m'
});
$('.some_class').datetimepicker();
function makeReadable(val) {
var mydate = new Date(val);
var hour = document.getElementById('hour').value;
var minute = document.getElementById('minutes').value;
var str = mydate.getFullYear() + '-' + ("0" + (mydate.getMonth() + 1)).slice(-2) + '-' + ("0" + mydate.getDate()).slice(-2) + ' ' + hour + ':' + minute + ':00';
return str;
}
function oneday(val) {
document.getElementById('datetimepicker').value = val;
document.getElementById('timeForAlert').value = makeReadable(val);
$.datetimepicker();
stopReload();
}

Found the solution asking in another forum.
The documentation for this script is terrible !
Here is what we found:
$(function() {
$('#dt').datetimepicker({
dayOfWeekStart: 1,
lang: 'da',
inline: true,
scrollMonth: false,
timepicker: false,
startDate: new Date()
});
});
$('#btn').click(function() {
$('#dt').datetimepicker({
value: new Date('2020-01-01T00:00:00Z')
});
});
Run this from a button with id = btn and you're set

jQuery UI DatePicker - only show 3 days of entire year

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/

Not able to get the date values from the datepicker in JavaScript

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.

Showing dynamic rates for all dates using jquery ui calendar

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

Unexpected Identifier Syntax Error in Javascript

I get an Unxepected Identifier editor with the following code. I've been troubleshooting it all day, and nothing. Hoping a fresh pair of eyes can spot my error. I'm trying to use jQuery UI to set up a date-picker and then get and manipulate the date. Changing the date on the picker should change an image on the page associated with that date via ajax.
$(document).ready(function(){
// Datepicker
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
minDate: new Date(2012, 06 - 1, 1),
maxDate:new Date(2012, 09 - 1, 31),
onSelect: function(){
var day1 = ($("#datepicker").datepicker('getDate').getDate()).toString().replace(/(^.$)/,"0$1");
var month1 = ($("#datepicker").datepicker('getDate').getMonth() + 1).toString().replace(/(^.$)/,"0$1");
var year1 = $("#datepicker").datepicker('getDate').getFullYear();
var fullDate = year1 + "/" + month1 + "/" + day1;
var dashDate = year1 + "-" + month1 + "-" + day1;
var str_output = "<a id=\"single_image\" href=\"http://www.lasalle.edu/150/dayinhistory/" + fullDate + ".jpg\" title=\"\"><img src=\"http://www.lasalle.edu/scripts/timthumb/timthumb.php?src=http://www.lasalle.edu/150/dayinhistory/" + fullDate + ".jpg&w=560&h=350&zc=1&a=t\">";
$('#this-day-photo-archive').html(str_output);
var data = 'day=' + dashDate;
$.ajax({
url: 'http://www.lasalle.edu/150/content/day_grab.php',
type: "GET",
data: data,
cache: false,
success: function(html) {
$('#this-day-info').html(html);
console.log (html);
$(".left").click(function() {
$('#datepicker').datepicker( "setDate" , -1d );
});
$(".right").click(function() {
$('#datepicker').datepicker( "setDate" , +1d );
});
}
});
}
});
});

You should replace
$('#datepicker').datepicker( "setDate" , -1d );
with
$('#datepicker').datepicker( "setDate" , "-1d" );
(and the same for +1d)
A link to some examples for confirmation