I need to disable some dates. My attempt is as below.
<v-date-picker
v-model="dates3"
:max-date="today">
</v-date-picker>
data() {
return {
today: '2021-06-04',
dates3: '2021-06-02'
}
}
But it will not disable all the dates after 2021-06-04. Where I was get wrong and how can I fix it.
Took Docs as reference its just max not max-date
<v-date-picker
v-model="date3"
max="today"
/>
Should solve it :)
Related
I am working on a housing application that currently uses a datetime field for move in date and move in time. I don't really like how the datetime format looks on the frontend, but I want to keep it in my SQL database, so my idea on how to execute this was:
1: When page is loaded, split the datetime field into seperate date and time fields.
2: If the user make changes to the date or time and clicks "update", then the fields will be merged back into the datetime field.
I thought it would be simple, but when I try to do this, I get the error "Cannot set properties of null (setting '0')"
Here is a simplified version of my code. I am using Vue Bootstrap for this application.
<template>
<b-form-row>
<b-col lg="6">
<b-form-group :label="$t('Date and time')">
<date-time-picker
v-model="tenancy.moveInDate"
:format="format"
:show-second="false"
type="datetime"
/>
</b-form-group>
</b-col>
</b-form-row>
<b-form-row>
<b-col lg="6">
<b-form-group :label="$t('Move in date')">
<b-date-picker v-model="tenancy.date"/>
</b-form-group>
</b-col>
</b-form-row>
<b-form-row>
<b-col lg="6">
<b-form-group :label="$t('Move in time')">
<b-time-picker v-model="tenancy.time" />
</b-form-group>
</b-col>
</b-form-row>
</template>
export default {
data() {
return {
tenancy: {
moveInDate: moment('DD/MM/YYYY HH:mm'),
date: moment('DD/MM/YYYY'),
time: moment('HH:mm'),
}
}
},
computed: {
format() {
return localeOptions[this.$i18n.locale].datepicker.format + ' LT';
}
},
methods: {
update(){
this.tenancy.moveInDate[0] = this.tenancy.date;
this.tenancy.moveInDate[1] = this.tenancy.time;
}
},
created() {
this.tenancy.date = tenancy.moveInDate.split('')[0]
this.tenancy.time = tenancy.moveInDate.split('')[1]
}
}
Dates are never going to be simple, sorry. You're off to a bad start attacking them with string methods. Moment is deprecated, and you should be able to do without it. This is doesn't directly fix your problem, but I really recomend you set yourself some rules for date handling. Mine would be: dates should be date objects in your model, formatted at the last moment for display. On the wire, they should be ISO UTC date strings. In the database, they should be UTC datetimes. If you then need to split a datetime into date and time, the date object has all the methods you need: toLocaleTimeString(), toLocaleString(), toLocaleDateString() etc.
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
I've been using the Vue Formulate library (which is awesome).
I need the user to only be able to pick a date from today (included) onwards.
I am using the "after" default for validation, but today (the current date) is not valid. In other words the validation kicks in when choosing todays date, and the form cannot be submitted.
What is the best way to get around this?
https://codesandbox.io/s/vue-formulate-reproduction-template-forked-kmpgq?fontsize=14&hidenavigation=1&theme=dark
A little workaround by giving the after attribute a Date value before today:
<template>
<FormulateInput
name="date"
label="Date:"
:validation="
'bail|required|after:' + new Date(Date.now() - 24 * 60 * 60 * 1000)
"
:validation-messages="{ after: 'The date has to be today or later' }"
type="date"
/>
</template>
https://codesandbox.io/s/vue-formulate-reproduction-template-forked-ky1hu?fontsize=14&hidenavigation=1&theme=dark
EDIT: In fact you can do it also with a computed property by returning the date before today.
After validation should defined by a Date. Here is the solution by calculating today by a computed property. Codesandbox
<template>
<FormulateInput
name="date"
label="Date:"
:validation="'bail|required|after:' + today"
:validation-messages="{ after: 'The date has to be today or later' }"
type="date"
/>
</template>
<script>
export default {
computed: {
today() {
return new Date().toLocaleDateString();
},
},
};
</script>
I use vuetify datepicker and moment js
I want to disable sunday on datepicker
My code like this :
<v-date-picker
v-model="date"
:allowed-dates="allowedDates"
class="mt-4"
:min="currentDate"
#update:picker-date="pickerUpdate($event)"
></v-date-picker>
My full code and codepen like this : https://codepen.io/positivethinking639/pen/qBBjaJr?editors=1010
How can I do it?
So I want to disable all Sundays in October, November and December
One obvious solution is to check the day of week before pushing the date to available dates:
if (moment(date).day() !== 0)
availableDates.push(date)
https://codepen.io/leopsidom/pen/poowNjJ?editors=1011
I would just do simple check which day it is with either dayjs or moment
allowedDates(val) {
return dayjs(val).day() !== 0;
},
I am using bsDaterangepicker when clicked it shows current month and next in the popup. All date ranges in my application are in the past, so I need to show current and previous month. How can I configure that?
You use this workaround to solve it:
In HTML:
<input
formControlName="dateRange"
type="text"
bsDaterangepicker
#rangePicker="bsDaterangepicker"
(onShown)="onDateRangePickerShow()"/>
</div>
In component:
export class Component {
#ViewChild('rangePicker') rangePicker;
onDateRangePickerShow() {
// This is a workaround to show previous month
const prevMonth = new Date(moment().subtract(1, 'month'));
this.rangePicker._datepicker.instance.monthSelectHandler({ date: prevMonth });
}