datePickerOptions: {
disabledDate (date) {
return date > new Date()
},
}
someone know how to disabled the past date? this code can only disabled the future dates, I want to do is disabled the past and future dates and enable only 3 days.
e.g. Jan 2 is the date today, Jan 1, Jan 2, Jan 3 is the enable dates.
For Disabling Future date also use From in disabledates: method
<script>
import Datepicker from "vuejs-datepicker";
export default {
components: {
Datepicker
},
data() {
return {
model: {
date: ""
},
DatePickerFormat: "dd/MM/yyyy",
disabledDates: {
from: new Date(Date.now()),
to: new Date(Date.now()-8640000)
}
};
}
};
</script>
Image
you can try with code sandbox which link in mentioned in above comment
Related
I'd like to disable today's date and all dates after. I managed to disable every day after today so far.
<v-date-picker>
class="date-picker-header"
v-model="dateTo"
#input="menuTo = false"
:disabledDates="date.getDate()"
:max="new Date().toISOString().substr(0, 10)"
I tried :max, :min, and several methods allowing "<=" and ">=" options when returning the date. I'm still only able to disable dates before or after today, but not today.
Just use :min="tomorrow"?
data() {
const today = new Date()
return { tomorrow: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
}
}
Or use the :allowed-date prop to allow everything except for today:
<v-date-picker :allowed-dates="allowedDates" />
methods: {
allowedDates(date) {
return !isToday(date)
}
}
<template>
<v-date-picker v-model="dateTo" :max="maxDateAllowed"></v-date-picker>
</template>
computed: {
maxDateAllowed() {
const d = new Date()
const endDate = new Date(d.getFullYear(), d.getMonth(), d.getDate() - 1);
return endDate.toISOString().slice(0,10)
}
}
im newbie here. I want control the datepicker to be disabled automatically based on the existing api. I using the vuejs-datepicker library. I've seen the documentation and managed to implement it statically, but having problems when implementing it reactively.
This is my previous view:
<datepicker
:disabled-dates="state.disabledDates">
</datepicker>
And, my previous static value of datepicker, especially for the day:
data() {
var year = (new Date()).getFullYear()
var month = (new Date()).getMonth()
var dDate = (new Date()).getDate()
var state = {
disabledDates: {
to: new Date(year, month, dDate), // Disable all dates up to specific date
// from: new Date(2020, 0, 26), // Disable all dates after specific date
days: [0,1], // Disable Saturday's and Sunday's
}
}
return {
state: state,
day: '',
}
},
For now, here my view:
<datepicker
:disabled-dates="disabledDates">
</datepicker>
Console output:
My script:
<script>
data() {
return {
day: '',
year : (new Date()).getFullYear(),
month : (new Date()).getMonth(),
dDate : (new Date()).getDate(),
}
},
computed:{
// reactive
disabledDates: {
to: new Date(year, month, dDate), // Disable all dates up to specific date, 2020,8,8
days: [day], // Disable day, 0,1
}
},
watch: {
'day': function(day){
console.log('day: '+day)
return this.day
},
},
</script>
Thank you.
I'm pretty sure your only problem is that your syntax for computed properties is wrong. They should be functions, since they need to be run. Their dependencies are automatically determined by Vue, and when those change, the function is re-run. So, try this:
data: function() {
return {
day: '',
year: (new Date()).getFullYear(),
month: (new Date()).getMonth(),
dDate: (new Date()).getDate()
};
},
computed: {
// Here. This should be a function.
disabledDates: function() {
return {
// Make sure to use 'this.' when in a component
to: new Date(this.year, this.month, this.dDate),
days: [ this.day ]
};
}
},
watch: {
day: function(day) {
console.log(`Day: ${day}`);
return value;
}
}
I am using https://www.npmjs.com/package/vue-multi-date-picker in my vuejs code
I want to know when I edit the form How to show selected dates in datepicker text.
for example I am using
<m-date-picker
v-model="date"
:lang="lang"
:multi="multi"
:always-display="false"
:format="formatDate"
data-parsley-required="true"
:class="{
'is-invalid':
submitted &&
$v.date.$error
}"
>
</m-date-picker>
export default {
name: "newspaper-result",
components: {
editor: Editor // <- Important part
},
data() {
return {
multi: true,
lang: "en",
date: [],
notClassified: true,
submitted: false
};
},
methods: {
formatDate(date) {
return date.toLocaleDateString();
},
}
Now when I insert the date in
this.date = date come from db gives error that date.toLocaleDateString(); is not a function
You are calling toLocaleDateString() function on a string, but strings don't have such function, this is why you are getting the error.
This function needs a properly constructed date object, not a string, so convert it using new Date():
formatDate(date) {
return new Date(date).toLocaleDateString()
}
data() {
return {
datePickerOptions: {
disabledDate(date) {
// console.log(form.installation_date); // undefined form
return date < this.form.ins_date ? this.form.ins_date : new Date();
},
},
}
This is saying form undefined i can understand can't initiaize form input inside data return how can i achieve this. disable other date if greater than first input date
please guide
As I said in my comment, you can't have a function returning something in your data so you have to shift your logic somewhere else. You can put that function in your methods:
data() {
return {
datePickerOptions: {
disabledDate: this.isDateDisabled
},
// rest of data
...
methods: {
isDateDisabled(date) {
return date < new Date(this.ruleForm.date1);
},
I am having 2 date pickers for startDate and endDate.
In startDate Picker,I want to disabled all dates before endDate and vise versa.
how to disable dates using elemnt-ui.
>
This is an old question but I asked myself the same today. You can achieve this using the disabledDate picker option. Here's an example on how to disable all future dates:
<el-date-picker
:picker-options="datePickerOptions"
</el-date-picker>
Then in your data object:
data () {
return {
datePickerOptions: {
disabledDate (date) {
return date > new Date()
}
}
}
}
fist of all you should define picker options for your end date input.
The main problem is using this keyword inside the disabledDate method of picker options, so you should move exactly method outside the data definition to the methods part
So, complete code should looks something like this:
data () {
return {
task: {
start_at: new Date(),
end_at: new Date()
}
dueDatePickerOptions: {
disabledDate: this.disabledDueDate
}
}
},
methods: {
disabledDueDate (time) {
return time.getTime() < this.task.start_at
},
validateEndDate () {
if (this.task.start_at > this.task.due_at) {
this.task.due_at = this.task.start_at
}
}
}
And HTML part of this example should looks like:
<el-date-picker #input="validateEndDate" v-model="task.start_at" type="date"></el-date-picker>
<el-date-picker v-model="task.end_at" :picker-options="dueDatePickerOptions" type="date"></el-date-picker>
Notice:
validateEndDate method will be triggered after changing startDate and check if endDate before startDate then fix endDate to be equals.
If you want to get between, you can try it:
datePickerOptions: {
disabledDate: this.disabledDueDate
}
and your method:
methods: {
disabledDueDate(date) { // format Date!
return !(date >= this.start && date <= this.end)
},
}
I solved this by putting the picker options inside the computed property, and using the moment.js library to check if the date is in between two dates:
computed: {
inBetweenDatesPickerOptions() {
return {
disabledDate: (time) => {
return !moment(time.getTime()).isBetween(this.form.start_date, this.form.end_date);
}
}
}
}
And in the markup you can set the options by using the :picker-options prop:
<el-date-picker
v-model="form.in_between_date"
:picker-options="inBetweenDatesPickerOptions"
type="date">
</el-date-picker>
An easier solution would be limiting min/max values dynamically. I suggest this:
<input type="date" class="form-control" v-model="dateFrom" :max="dateTo">
<input type="date" class="form-control" v-model="dateTo" :min="dateFrom">
This would limit the date picker to proper date ranges.