Vuejs-datepicker配置求助：默认当前日期、禁用过往日期等

嘿，我来帮你搞定这个vuejs-datepicker的配置和样式问题，咱们一步步来解决你的需求：

1. 实现默认当前日期、禁止过往日期、切换组件语言 #

先给你一份完整的可运行代码示例，然后逐个解释每个配置的作用：

<template>
  <form>
    <datepicker
      v-model="selectedDate"
      :bootstrap-styling="true"
      :disabled-dates="disabledDates"
      :locale="locale"
      class="form-control custom-datepicker"
    ></datepicker>
  </form>
</template>

<script>
import Datepicker from 'vuejs-datepicker'
// 导入目标语言包，这里以中文为例，你可以换成需要的语言（比如en、ja等）
import targetLocale from 'vuejs-datepicker/dist/locale/zh-cn'

export default {
  components: {
    Datepicker
  },
  data() {
    return {
      // 绑定当前日期作为默认值
      selectedDate: new Date(),
      // 配置禁用规则：禁止选择昨天及更早的日期
      disabledDates: {
        to: new Date(Date.now() - 86400000) // 86400000是一天的毫秒数，减去后得到昨天的时间
      },
      // 设置组件语言
      locale: targetLocale
    }
  }
}
</script>

逐个需求拆解： #

• 默认显示当前日期：通过v-model绑定selectedDate变量，初始化时直接赋值new Date()，组件加载后就会默认选中今天。
• 禁止选择过往日期：利用disabled-dates属性的to字段，设置为昨天的日期，这样所有早于今天的日期都会被灰化禁用。如果你想连今天也禁用，直接把to的值改成new Date()即可。
• 修改组件语言：从组件的dist/locale目录导入对应语言的文件，然后通过locale属性绑定，就能切换日历的文字语言了。

2. 解决组件样式无法自定义的问题 #

你提到添加form-control样式不生效，主要是因为Vue的scoped样式会限制样式作用域，无法穿透到组件内部元素。这里给你两个可行的解决方案：

方案一：使用深度选择器（推荐） #

如果你的样式是写在带scoped的<style>标签里，用深度选择器就能穿透组件作用域，修改内部元素样式：

<style scoped>
/* Vue 2 用 ::v-deep 或 /deep/，Vue 3 推荐用 :deep() */
:deep(.custom-datepicker input) {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #ced4da;
  width: 100%;
}

/* 自定义日历弹出面板的样式 */
:deep(.datepicker-dropdown) {
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style>

方案二：全局样式（临时应急） #

如果不想用深度选择器，可以把样式写在不带scoped的<style>标签里，这样样式会全局生效，但要注意避免和其他组件样式冲突：

<style>
.custom-datepicker input {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px solid #ced4da;
  width: 100%;
}
</style>

另外你已经开启了:bootstrap-styling="true"，如果项目里已经引入了Bootstrap，组件会自动继承Bootstrap表单控件的样式，结合上面的自定义方法，就能完美适配你的表单样式了。

内容的提问来源于stack exchange，提问作者Felipe