We Keep Coding

v-calendar does not highlight dates inside props when selected

I'm trying to highlight my vue calendar based on start and end dates that I select. I am following the documentation but it doesn't seem to provide much detail on how to select dates https://vcalendar.io/attributes.html
currently I am able to select dates and store them into my state using the dayClicked method but when I use the dates prop inside attributes to set the highlighted days nothing happens. I have noticed that if I just
replace
dates: { start: new Date(year, month, this.selectedDay.day), end: new Date(year, month, this.endDate.day)},
with
dates: { start: new Date(year, month, 12), end: new Date(year, month, 14)},
it works fine, but I have checked to make sure the values being passed are integers so I'm assuming it just doesn't have access to data() for some reason... I'm hoping someone can help me find a way around this problem and pass my days to the calendar component somehow
Any help is appreciated :)
<template>
<div id="calendarContainer">
<DatePicker is-range :attributes='attributes'
#dayclick='dayClicked'
/>
<button class="arrowBtnsLeft" #click="monthBack"><</button>
<button class="arrowBtnsRight" #click="monthForward">></button>
</div>
</template>
<script>
import DatePicker from 'v-calendar/lib/components/calendar.umd'
export default {
name: 'calendar',
components:{
DatePicker,
},
data() {
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
return {
selectedDay: {day: 14},
endDate: {day: 17},
attributes: [
// This is a single attribute
{
key: 'today',
highlight:{
start: {fillMode: 'outline'},
end: {fillMode: 'outline'},
color:'red',
fillMod:'light'
},
dates: { start: new Date(year, month, this.selectedDay.day), end: new Date(year, month, this.endDate.day)},
}
]
}
},
onMounted(){
console.log(this.range)
},
methods: {
dayClicked(day) {
if(this.selectedDay == null){
this.selectedDay = day;
//change days styles to be blue
}else if(this.selectedDay!== null && this.endDate == null){
this.endDate = day;
//change days styles to be blue
//change days days inbetween to be outlined
console.log('start',this.selectedDay, 'end', this.endDate)
this.selectedDay.classes.push('start')
this.endDate.classes.push('end')
}else{
//remove classes for start and end
this.selectedDay.classes.pop()
this.endDate.classes.pop()
this.selectedDay = day;
this.endDate = null;
}
},
monthForward(){
let newtime = this.context.selectedYMD.split('-')
var timestring = ''
newtime[1] = parseInt(newtime[1])+1
newtime[1] = newtime[1].toString()
for( let i = 0; i < 3; i ++){
console.log(newtime[i])
if(i < 2){
timestring+=newtime[i]+'-'
}else{
timestring+=newtime[i]
}
}
this.value = timestring
},
monthBack(){
let newtime = this.context.selectedYMD.split('-')
var timestring = ''
newtime[1] = parseInt(newtime[1])-1
newtime[1] = newtime[1].toString()
for( let i = 0; i < 3; i ++){
console.log(newtime[i])
if(i < 2){
timestring+=newtime[i]+'-'
}else{
timestring+=newtime[i]
}
}
this.value = timestring
}
}
}
</script>
<style>
#calendarContainer{
position: relative;
z-index: 1;
width: 50%;
height: 50%;
}
.inTrip{
border-top:1px solid gray;
border-bottom:1px solid gray;
}
.start{
border-radius: 20px;
border-left:1px solid gray;
border-right:none;
background-color:#2E9CFF;
color:white;
}
.end{
border-radius: 20px;
border-right:1px solid gray;
border-left:none;
background-color:#2E9CFF;
color:white;
}
.arrowBtnsLeft{
position:absolute;
top:.8em;
left:12em;
background-color:#afd7f78e;
color:#2E9CFF;
border: none;
margin-left: .5em;
margin-right: .5em;
border-radius:5px;
text-align: center;
}
.arrowBtnsRight{
position:absolute;
top:.8em;
left:14em;
background-color:#afd7f78e;
color:#2E9CFF;
border: none;
margin-left: .5em;
margin-right: .5em;
border-radius:5px;
text-align: center;
}
</style>

if anyone is curious I found a solution, I used the computed properties to return 2 sets of days
<template>
<div id="calendarContainer">
<Calendar :attributes='attr' #dayclick='onDayClick' />
<button class="arrowBtnsLeft" #click="monthBack"><</button>
<button class="arrowBtnsRight" #click="monthForward">></button>
</div>
</template>
<script>
import Calendar from 'v-calendar/lib/components/calendar.umd'
export default {
name: 'calendar',
components:{
Calendar
},
data() {
return {
days : [],
counter: 0
};
},
computed:{
dates() {
return this.days.map(day => day.date);
},
attr() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();
return [this.dates.map(date => ({
highlight:{class:'start'},
dates: date,
})),
{
highlight:'blue',
dates: {
start: new Date(year, month, 1), end:new Date(year, month, 1)
}
}
];
},
},
methods: {
onDayClick(day) {
const idx = this.days.findIndex(d => d.id === day.id);
if(this.counter > 1 || this.days.length > 2){
this.days = []
this.counter = 0
}
this.counter+=1
if (idx >= 0) {
this.days.splice(idx, 1);
} else {
this.days.push({
id: day.id,
date: day.date,
})
if(this.days.length == 2){
this.attr[1].dates.start = this.days[0].date
this.attr[1].dates.end = day.date
}
}
console.log(this.days,'count',this.counter,'attributes',this.attr[1].dates,'days.length',this.days.length)
}
}
</script>

I know. it is a component that was written without regard to vueJS best practices or standards, I had to write a bunch of hacks like this to, just do ordinary things like hide the calendar.

Why my focus is not working properly?

I have data.json file is being loaded after I focus but after I focus then my datepicker is not showing why I didn't understand. but if I focus second time I can see.. where is my mistake ?
function flattenFieldsArray(arr) {
return arr.map(function(item) {
return item.field
})
}
$(function() {
var focused = false;
$(document.body).one("focus", '#checkin,#checkout', function() {
if (!focused) {
$.getJSON('data.json', function(data) {
// use ajax data mapped to same structure as original variables
var firstDate = flattenFieldsArray(data.firstDate);
var lastDate = flattenFieldsArray(data.lastDate);
var availabledays = flattenFieldsArray(data.availabledays);
var booked = flattenFieldsArray(data.booked);;
var ssdays = [];
// nothing was changed below
var dateFormat = "mm/dd/yy",
from = $("#checkin").datepicker({
changeMonth: true,
numberOfMonths: 2,
firstDay: 1,
minDate: new Date(firstDate),
maxDate: new Date(lastDate),
onSelect: function(selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-bos"];
} else {
return [true];
}
},
isTo1: true,
}).on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 2,
minDate: new Date(firstDate),
maxDate: new Date(lastDate),
onSelect: function(selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, ssdays) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
}
}).on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
})
focused = true;
}
});
});
.form{
width:960px;
margin:120px auto;
}
.form input{
width:250px;
padding:10px;
}
.ui-highlight .ui-state-default{background: red !important;border-color: red !important;color: white !important; cursor:no-drop;}
.ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;}
.ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
.ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;}
.ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; }
.ui-testtarih .ui-state-default{
background:black !important;
color:#FFF !important;
}
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<div class="form">
<input type="text" id="checkin" />
<input type="text" id="checkout" />
<input type="submit" value="Search" />
</div>
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
footnote: I couldn't add my json data to stackoverflow snippet that's why I add plunker demo in plunker demo works
Click to see plunker demo

$.getJSON has a done() function in which you can write you logic after data is loaded. You can trigger the datepicker manually inside the done function
Here's a working fork

It is because, on the first focus, the datepickers are applied on the elements and NOT triggered. Mind the difference between binding an event and triggering it.
On the first time focus, datepicker will be applied and NOT triggered as it is not already bound to the element. But on any subsequent focus, it would trigger the datepicker and open it since it is already bound to the element.
As a solution,you can try adding $("#checkin").datepicker('show'); and $("#checkout").datepicker('show'); after the end for $("#checkin").datepicker({}) and $("#checkout").datepicker({}), respectively.

You should load your data prior to the first focus event on your datepickers.
Here's an example :
plunkr
$( document ).ready(function() {
var data;
$.getJSON('data.json', function (d) {
data = d;
console.log('data', d);
setupDatepickers();
});
function setupDatepickers() {
// use ajax data mapped to same structure as original variables
var firstDate = flattenFieldsArray(data.firstDate);
var lastDate = flattenFieldsArray(data.lastDate);
var availabledays = flattenFieldsArray(data.availabledays);
var booked = flattenFieldsArray(data.booked);;
var ssdays = [];
// nothing was changed below
var dateFormat = "mm/dd/yy",
from = $("#checkin")
.datepicker({
beforeShowDay : function (date) {
var y = date
.getFullYear()
.toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date
.getDate()
.toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-bos"];
} else {
return [true];
}
},
changeMonth : true,
firstDay : 1,
isTo1 : true,
maxDate : new Date(lastDate),
minDate : new Date(firstDate),
numberOfMonths: 2,
onSelect : function (selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
}
})
.on("change", function () {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout")
.datepicker({
beforeShowDay : function (date) {
var y = date
.getFullYear()
.toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date
.getDate()
.toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, booked) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, availabledays) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, ssdays) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
},
changeMonth : true,
changeYear : true,
firstDay : 1,
maxDate : new Date(lastDate),
minDate : new Date(firstDate),
numberOfMonths: 2,
onSelect : function (selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
}
})
.on("change", function () {
from.datepicker("option", "maxDate", getDate(this));
});
}
});

How to change datepicker cell style when it is not non accessible?

I have found similar questions on stackoverflow, but all the solution provided change style while it is not accessible like here(jsfiddle)
how to apply style when it is clickable
$("#setDateTo").datepicker({
defaultDate: date,
minDate: "-0d",
dateFormat: 'dd MM yy',
beforeShowDay: changestyle
});
function changestyle(){
var day = date.getDay();
if(date.getDate() == 12 || date.getDate() == 22)
return[true, 'mystyle', 'changed'];
else return[true, ''];
}
Any help would be appreciated !

how to apply style when it is clickable....
You can set the color attribute to all anchor elements in table cell not having the class ui-datepicker-unselectable
td:not(.ui-datepicker-unselectable) a {
color: blue !important;
}
$('input').datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
maxDate: "+90d",
firstDay: 0,
beforeShowDay: noWeekendsOrHolidaysOrBlockedDates,
beforeShow: function (inp, inst) {
var a = this; // ui-datepicker-unselectable
}
});
function noWeekendsOrHolidaysOrBlockedDates(date) {
//var noWeekend = jQuery.datepicker.noWeekends(date);
return setHoliDays(date);
}
// set holidays function which is configured in beforeShowDay
function setHoliDays(date) {
var day = date.getDay();
if (day == 5 || day == 6)
return [false, ''];
if (date.getDate() == 11 || date.getDate() == 23)
return [false, 'holiday red', 'Red!'];
if (date.getDate() == 12 || date.getDate() == 22)
return [false, 'holiday green', 'Green!'];
return [true, ''];
}
.wrapper {
padding: 10px;
}
td.red span.ui-state-default {
color: #f00;
}
td.green span.ui-state-default {
color: #0f0;
}
td:not(.ui-datepicker-unselectable) a {
color: yellow !important;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="wrapper">
<input>
</div>

I understood that you want to apply some style when date changes and matches your value.
Check this.
On change event, foo() is called. Make your modifications inside that.

jquery ui date range 15 day between two date

How can be a possible with jquery ui I need 15 days between two input..how can I choose just 15 day between two date ? my mind went black and I can't do that that why I'm ashamed
if you want to details please click here
$(function() {
var ilktarih = ['2017-03-23'];
var sontarih = ['2017-04-10']
var bostarihler = ['2017-03-15', '2017-03-16', '2017-03-17', '2017-03-18', '2017-03-19', '2017-03-20', '2017-03-21', '2017-03-22', '2017-03-23', '2017-03-24', '2017-03-25', '2017-03-26', '2017-03-27', '2017-03-28', '2017-03-29', '2017-03-30'];
var dolutarihler = ['2017-02-22', '2017-02-23', '2017-02-24', '2017-02-25', '2017-02-26', '2017-02-27', '2017-02-28', '2017-03-01', '2017-03-02', '2017-03-03', '2017-03-04', '2017-03-05', '2017-03-06', '2017-03-07', '2017-03-08', '2017-03-09', '2017-03-10', '2017-03-11', '2017-03-12', '2017-03-13', '2017-03-14'];
var sstarihler = [];
var dateFormat = "mm/dd/yy",
from = $("#checkin").datepicker({
changeMonth: true,
numberOfMonths: 2,
firstDay: 1,
minDate: new Date(ilktarih),
maxDate: new Date(sontarih),
onSelect: function(selectedDate) {
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
date.setTime(date.getTime() + (1000 * 60 * 60 * 24))
$("#checkout").datepicker("option", "minDate", date);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, dolutarihler) >= 0) {
return [false, "ui-highlight"];
}
if (jQuery.inArray(currDate, bostarihler) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, sstarihler) >= 0) {
return [false, "ui-ss"];
} else {
return [true];
}
},
isTo1: true,
}).on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#checkout").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
numberOfMonths: 2,
minDate: new Date(ilktarih),
maxDate: new Date(sontarih),
onSelect: function(selectedDate) {
$("#checkin").datepicker("option", "maxDate", selectedDate);
},
beforeShowDay: function(date) {
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if (m.length == 1) {
m = '0' + m;
} // append zero(0) if single digit
if (d.length == 1) {
d = '0' + d;
} // append zero(0) if single digit
var currDate = y + '-' + m + '-' + d;
if (jQuery.inArray(currDate, dolutarihler) >= 0) {
return [true, "ui-highlight-donus"];
}
if (jQuery.inArray(currDate, bostarihler) >= 0) {
return [true, "ui-bos"];
}
if (jQuery.inArray(currDate, sstarihler) >= 0) {
return [true, "ui-ss-donus"];
} else {
return [true];
}
}
}).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;
}
});
.form {
width: 960px;
margin: 120px auto;
}
.form input {
width: 250px;
padding: 10px;
}
.ui-highlight .ui-state-default {
background: red !important;
border-color: red !important;
color: white !important;
cursor: no-drop;
}
.ui-bos .ui-state-default {
background: green !important;
border-color: green !important;
color: white !important;
}
.ui-ss .ui-state-default {
background: yellow !important;
border-color: yellow !important;
color: gray !important;
cursor: help;
}
.ui-ss-donus .ui-state-default {
background: yellow !important;
border-color: yellow !important;
color: gray !important;
cursor: help;
}
.ui-highlight-donus .ui-state-default {
background: red !important;
border-color: red !important;
color: white !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div class="form">
<input type="text" id="checkin" />
<input type="text" id="checkout" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Maybe you want something like this?.
$(function () {
$("#txtFrom").datepicker({
onSelect: function(selectedDate) {
//$("#cal4").datepicker("setDate", selectedDate);
var date = $(this).datepicker("getDate");
date.setDate(date.getDate() + 15);
$("#txtTo").datepicker("setDate", date);
$("#txtTo").datepicker("option", "minDate", selectedDate);
$("#txtTo").datepicker("option", "maxDate", date);
}
});
$("#txtTo").datepicker({
changeMonth: true,
changeYear: true
})
});
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" id="txtFrom" />
<input type="text" id="txtTo" />

You should use moment.js for any complicated enough date related javascript task

error with tooltip in datepicker bootstrap

Just have a question about my tooltip in the datepicker.
The calendar numbers are moving to the right if I add the tooltip to the datepicker.
I can not reproduce the error with jsfiddle but following is the code and a picture. If I have a look at the tooltip it produces style="left:135.208px"?
html
<div id="datepicker99"></div>
javascript
var datesGreen = ['3/12/2015', '4/12/2015'];
var datesYellow = ['16/12/2015', '17/12/2015', '18/12/2015'];
var datesRed = ['24/12/2015', '25/12/2015'];
$("#datepicker99").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
todayHighlight: true,
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, datesGreen) != -1){
return {
tooltip: 'text',
classes: 'highlight-green'
};
}
if ($.inArray(formattedDate, datesYellow) != -1){
return {
classes: 'highlight-yellow'
};
}
if ($.inArray(formattedDate, datesRed) != -1){
return {
classes: 'highlight-red'
};
}
return;
}
});
$('.highlight-green').tooltip({placement : 'top'});
css
.ui-widget{
font-size: 0.7em;
}
td.highlight {
}
td.highlight-green {
background: green!important;
color: #fff!important;
}
td.highlight-yellow {
background: yellow!important;
color: #000!important;
}
td.highlight-red {
background: red!important;
color: #fff!important;
}
and jsfiddle:
jsfiddle

It works fine if you apply the below change:
$('.highlight-green').tooltip({placement : 'top', container: 'body'});