Vuejs: how to implement reactively disable datepicker

Question

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.

So... what is it doing instead? Could you add a few more details? What's going wrong? — matthew-e-brown
– matthew-e-brown, Commented Sep 8, 2020 at 5:24
I want the value of the day of "days: [day]" to change dynamically — Fenz
– Fenz, Commented Sep 8, 2020 at 6:20

matthew-e-brown · Accepted Answer · 2020-09-08 06:52:03Z

2

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;
  }
}

edited Sep 8, 2020 at 6:52

answered Sep 8, 2020 at 6:29

matthew-e-brown

3,1171 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Fenz Over a year ago

I want to correct, the disableDate function that I want to disable is days: [this.day] not from: this.day

matthew-e-brown Over a year ago

@Fenz My mistake. I've updated that. A single-element array, correct?

Fenz Over a year ago

thanks in advance, I've changed it as you suggested, but Sunday and Monday are still enabled as shown img-link

Fenz Over a year ago

but after I replace it with a static value of 0,1 it can be disabled

matthew-e-brown Over a year ago

What are you setting day to? The string "0,1"?

|

Collectives™ on Stack Overflow

Vuejs: how to implement reactively disable datepicker

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related