``` `locale-data` 可以用来设置一些自定义配置，比如设置中文。 **注意** - 这里有个 bug，如果星期的名称太长，比如星期一这样，会导致日历挤出 dropdown 的包裹，建议星期名称只设置一个字 - 这个 bug 暂时不会修复 ```html ``` ### update 获取选择时间不使用 `v-model` 指令，也可以通过 update 函数来获取日期选择器选择的时间, 默认获取的时间是 GMT 时间，格式需要自己定义函数来修改 ```html ``` ### 最小和最大时间限制设置 `min-date` 和 `max-date` prop 可以限制日期选择器的时间选择范围，超出这个范围的时间是无法选择的，且日历上也无法联动现实超出这个范围的时间 ```html ``` ## 渲染输入框的一些设置 ### prepend 和 append `prepend` 和 `append` prop 可以设置前后显示文字，渲染成类似 icon 的效果 ```html ``` 也可以使用 `prepend-html` 和 `append-html` prop 来设置输入框前后显示的内容。由于是 html 字符串，请谨慎使用 ```html ``` 还可以使用 `prepend` 和 `append` 插槽插入其他嵌套元素 ```html ``` ### 控制大小 `nly-form-daterangepicker` 提供一个 `size` prop 来控制默认渲染的输入框大小，可选 `sm`, `md`, `lg`。 ```html ``` ### valid 验证提示 `nly-form-daterangepicker` 提供一个 `valid` 和 `invalid-feedback` , `valid-feedback`, `waring-feedback` 来显示验证信息 ```html ``` ## 日历的一些设置 - 使用 `opens` prop 来设置日历的位置, 可选 `center`, `left`, `right`, `inline` - 使用 `single-date-picker` prop 来选择日期选择器的选择模式，分为单个日期选择和范围日期选择，设置 `single-date-picker` prop 为 `true` 为范围日期选择， `false` 为单个日期选择 - 设置 `show-week-numbers` prop 为 `true` 来显示日历上的周数，设置为 `false` 不显示 - 设置 `time-picker` prop 为 `true` 来显示时间选择器 - 设置 `time-picker24-hour` prop 为 `true` 来显示 24 小时制时间显示器，必须设置 `time-picker` prop 为 `true` 才有效 - 设置 `show-dropdowns` prop 为 `true` 来显示月份选择下拉框和年份快速输入 - 设置 `auto-apply` prop 为 `true` 来设置自动提交选择的时间 - 设置 `ranges` prop 为 `true` 来显示左侧快速选择时间 - 设置 `always-show-calendars` prop 为 `true` 来显示日历 - 设置 `append-to-body` prop 为 `true` 来把日历渲染到 body 尾部，不然渲染在输入框下面, **注意 `append-to-body` 为 `false` 时可能会影响布局，如果影响布局，请设置 `append-to-body` 为 `true`** - 设置 `close-on-esc` prop 为 `true` 来支持键盘按键 ESC 退出日历 - 设置 `linked-calendars` prop 为 `true` 来使得两个日历联动 ```html ``` ## 禁用日期选择器使用 `disabled` prop 可以禁用日历选择时间，这时候点击并不会显示日期选择器 ```html ``` 可以使用 `date-format` prop 接受有个函数来设置禁止选择日期。给 `date-format` 函数的第一个参数 classes 添加一个 disabled 属性 ```html ``` ## 使用插槽 ### input 插槽我们可以使用 input 插槽来使默认渲染的 input 输入框变成其他想渲染的任何组件。 **注意** - 如果影响布局，请设置 `append-to-body` 为 `true` - 需要给渲染的组件绑定 `click` 事件为 `clickPicker` ```html ``` ### header 插槽我们可以使用 header 插槽来给日期选择器添加 header ```html ``` ### ranges 插槽我们可以使用 ranges 插槽来自定义 ranges 的内容 ```html ``` ### footer 插槽我们可以使用 footer 插槽来自定义 foorer 的内容 ```html ``` ## 可以在其他任何地方打开日期选择器使用 `this.$refs.pickerRefName.togglePicker(true/false)` 可以在其他元素上点击打开日期选择器 ## 完整 demo 这是一个完整的 demo ，差不多包括所有 prop 值的切换 ```html ```

Calendar header