I'm using v-calendar, I want to pass the default date to url and use it to set as the default date of the calendar.
The problem I faced with, is that v-calendar always shows the current date by default.
For example today is 30-01-2023 but I want to show the Feb of 2021.
I pass the default date in url query params.
My current code is like this:
<v-calendar
class="custom-calendar max-w-full"
:masks="masks"
:attributes="filteredEvents"
disable-page-swipe
is-expanded
:from-page="new Date(props.occurrence + '-01T:00:00')"
v-bind="{
fromDate: $props.occurrence ? new Date(occurrence+'01T00:00') : null,
}"
v-model="selectedDate"
#update:from-page="navigationHandler($event)"
>
<template v-slot:day-content="{ day, attributes }">
<CalendarDay :day="day" :attributes="attributes" />
</template>
</v-calendar>
If my props.occurrence = '2022-12, still the $event.year and month returns the current year and month.
Related
I want to change "August 2022" to "2022 August" but i can't find anything similar with this attribute in v-date-picker.
How to change format of this header
Vuetify Datepicker
You have a propery header-date-format that you can use to call your own method of formatting the headers
<v-date-picker
v-model="picker"
:header-date-format="customFormatHeader"
></v-date-picker>
customFormatHeader(isoDate) {
const currentDate = new Date(isoDate)
const month = currentDate.toLocaleString('default', {month: 'long' })
const year = currentDate.toLocaleString('default', { year: 'numeric' })
return year + month
}
The image above represents a project I'm working on. Of the 3 fields, only purchase price data is manually entered. I use the following markup and TS code to set the Outstanding mortgage field to a percentage of the previously provided figure:
<input type="number" class="form-control" min='0' id="purchaseValueInput" formControlName="purchase_value" (ngModelChange)='setPercentages()'>
...
setPercentages() {
this.mortgage = this.analysisForm.value.market.purchase_value * 0.75;
}
My challenge is I need to do a similar thing for the mortgage payments field but as a percentage of the outstanding mortgage value. Because that value is not manually provided the ngModelChange strategy is not working.
How can I resolve that last step?
Update
In my setPercentages() function, I have attempted to set a variable for mortgage payments but I get the following error:
The specified value "NaN" cannot be parsed, or is out of range.
I suspect it's because the field is regarded as empty even though visually it has data in it. I used the following code:
setPercentages() {
this.mortgage = this.analysisForm.value.market.purchase_value * 0.75;
this.mortgagePayments = (this.analysisForm.value.market.outstanding_mortgage * 0.03) / 12;
}
<input type="number" class="form-control" min='0' id="mortgagePaymentValueInput" formControlName="mortgage_payments" [value]="mortgagePayments">
You could try to bind the mortgage payments to a member variable and in the setPercentages function of the other input, you also update the model via that variable.
If ngModelChange doesn't work for some reason you can try to set the value attribute of that input:
<input type="text" value="$300"></input>
I was assigning my percentage values to variables and interpolation to assign the variable as the value of my input field. That proved to the the wrong approach.
What does work is using form patchValue as shown below:
this.analysisForm.patchValue({
market: {
outstanding_mortgage: this.analysisForm.value.market.purchase_value * 0.75,
}
});
I am trying to compare dates and based on result i will have to color the text. So i tried this approach in my .vue file
<p class="abc" :class="text-red": date1 > new Date()>
{{ date1 }}
But comparing condition is not working and text remains normal. Need some help on this.
Thanks in advance
Try this. <p :class=" date1 > currentDate ? 'abc text-red' : 'abc'">{{ date1 }}. And create a new variable called currentDate and set it to new Date() in the created() hook. This adds the class text-red when date1 > currentDate is true
So I'm making an attendance tracker with Vuejs and Vuetify, and I want it to look like this:
A Calender made up of v-card components, and a list of absences read in from a database. I have my API set up and am able to retrieve a list of absences without any issues, but when it comes to putting them on the screen I have some issues. What I want to do is this:
The user selects the month and year. Each card then shows one day of this month. I have a function called getAbsDate(date) that returns a list of absences for the date passed to it. I want it to work something like this in each card:
<v-card min-height="170" tile>
<v-card-text class="text-center black--text">
{{i}}
<v-sheet
color="blue"
class="pa-1"
v-for="abs in getAbsDate(i+'.'+monthsNums[selMonth]+'.'+selYear)"
:key="abs['id']"
>{{abs["name"]}}</v-sheet>
</v-card-text>
</v-card>
selMonth is the month the user selected, and selYear is the year the user selected. This doesn't work however. I don't get any errors, the cards are just empty. getAbsDate() returns a list of objects. Any ideas as to why this doesn't work?
Thanks!
EDIT
Here is the declaration of my getAbsDate() function.
getAbsDate: function(date) {
let l = [];
this.absences.forEach(abs => {
if (abs["start"] == date) {
l.push(abs);
}
if (abs["end"] == date) {
l.push(abs);
}
let day_start = moment(abs["start"].replace(".", "/"), "DD/MM/YYYY")
.toDate()
.getTime();
let day_end = moment(abs["end"].replace(".", "/"), "DD/MM/YYYY")
.toDate()
.getTime();
let day_date = moment(date.replace(".", "/"), "DD/MM/YYYY")
.toDate()
.getTime();
if (day_start <= day_date && day_date <= day_end) {
l.push(abs);
}
});
return l;
}
}
The formatting is not quite right at the .toDate() and the .getTime(), but in my file it is, s it is not the issue.
I have a dropdown list with dates, the values are as such:
<select name="DayDate" id="DayDate" data-val-date="The field DayDate must be a date." data-val="true" style="display: inline-block;" class="input-validation-error">
<option value="07/11/2013">donderdag 11 juli 2013</option>
<option value="07/10/2013">woensdag 10 juli 2013</option>
<option value="07/09/2013">dinsdag 9 juli 2013</option>
</select>
#Html.DropDownListFor(m => m.DayDate, Model.Days.Select(r => new SelectListItem
{
Text = r.Date.Value.ToString("D"),
Value = r.Date.Value.ToString("MM/dd/yyyy", CultureInfo.InvariantCulture)
}))
But when I submit I get as a date 7th of November, 7th of October or 7th of September!
The Thread culture is set to NL-nl and this has to remain this way.
So I thought of removing CultureInfo.InvariantCulture but then the model won't accept the date input data-val will be false, with this error: The field DayDate must be a date.
The following is set in the web.config
<globalization culture="nl-NL" uiCulture="nl-NL" />
How can I get the correct dates passed on?
Solved it by adding this piece of Javascript:
$.validator.methods.date = function (value, element) {
return true;
};