Vuejs：如何实现响应式禁用日期选择器

Posted 2023-02-16

【中文标题】Vuejs：如何实现响应式禁用日期选择器

【英文标题】：Vuejs: how to implement reactively disable datepicker

【发布时间】：2020-12-26 10:22:13

【问题描述】：

我是新手。我想根据现有的 api 控制自动禁用日期选择器。我使用vuejs-datepicker 库。我已经看过文档并设法静态地实现它，但是在被动地实现它时遇到了问题。

这是我之前的看法：

<datepicker 
    :disabled-dates="state.disabledDates">
</datepicker>

还有，我之前的 datepicker 静态值，尤其是当天：

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: '',        
    
,

现在，我的观点是：

<datepicker 
    :disabled-dates="disabledDates">
</datepicker>

控制台输出：

我的脚本：

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

谢谢。

【问题讨论】：

那么......它在做什么呢？你能补充一些细节吗？怎么了？

我希望“days: [day]”的日期值动态变化

【参考方案1】：

我很确定你唯一的问题是计算属性的语法是错误的。它们应该是函数，因为它们需要运行。它们的依赖关系由 Vue 自动确定，当它们发生变化时，函数会重新运行。所以，试试这个：

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;
  

【讨论】：

我要更正，我要禁用的disableDate函数是days: [this.day] not from: this.day

@Fenz 我的错。我已经更新了。单元素数组，对吗？

提前谢谢，我已经按照您的建议进行了更改，但是周日和周一仍然启用，如图所示img-link

但是在我用静态值 0,1 替换它之后，它可以被禁用

你将day设置成什么？ 字符串 "0,1"?