日期和时间组件文档2:

这次内容相对较多,所以改为两篇进行发表,

8.trigger - 自定义弹出控件的事件

(类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click)
日期和时间组件文档2

9.show - 默认显示 (类型:Boolean,默认值:false)

如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件,如:

日期和时间组件文档2

10.position - 定位方式 (类型:String,默认值:absolute)

用于设定控件的定位方式,有以下三种可选值:

日期和时间组件文档2

下面是一个直接嵌套显示的例子:

日期和时间组件文档2

11.zIndex - 层叠顺序 (类型:Number,默认值:66666666)

一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时,该参数无效。

日期和时间组件文档2

12.showBottom - 是否显示底部栏 (类型:Boolean,默认值:true)

如果设置 false,将不会显示控件的底部栏区域

日期和时间组件文档2

13.btns - 工具按钮 (类型:Array,默认值:[‘clear’, ‘now’, ‘confirm’])

右下角显示的按钮,会按照数组顺序排列,内置可识别的值有:clear、now、confirm
日期和时间组件文档2

  1. lang - 语言 (类型:String,默认值:cn)

内置了两种语言版本:cn(中文版)、en(国际版,即英文版)。这里并没有开放自定义文字。
日期和时间组件文档2

15.theme - 主题 (类型:String,默认值:default)

内置了多种主题,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
日期和时间组件文档2

另外,你还可以传入其它字符,如:theme: ‘xxx’,那么控件将会多出一个 class=“laydate-theme-xxx” 的CSS类。

16.calendar - 是否显示公历节日 (类型:Boolean,默认值:false)

内置了一些我国通用的公历重要节日,通过设置 true 来开启。国际版不会显示。

日期和时间组件文档2

  1. mark - 标注重要日子 (类型:Object,默认值:无)

calendar 参数所代表的公历节日更多情况下是一个摆设。因此,还需要自定义标注重要日子,比如结婚纪念日?日程等?它分为以下两种:

日期和时间组件文档2

可同时设定多个,如:

日期和时间组件文档2

3.回调

1.控件初始打开的回调

控件在打开时触发,回调返回一个参数:初始的日期时间对象

日期和时间组件文档2

  1. 日期时间被切换后的回调

年月日时间被切换时都会触发。回调返回三个参数,分别代表:生成的值、日期时间对象、结束的日期时间对象
日期和时间组件文档2

  1. 控件选择完毕后的回调

点击日期、清空、现在、确定均会触发。回调返回三个参数,分别代表:生成的值、日期时间对象、结束的日期时间对象

日期和时间组件文档2

4.弹出控件提示

事实上,执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法,比如:hint方法
日期和时间组件文档2

  1. 配置基础路径

如果你不是采用 layui 或者普通 script 标签方式加载的 laydate.js,而是采用 requirejs 等其它方式引用 laydate,那么你需要设置基础路径,以便 laydate.css 完成加载。

日期和时间组件文档2

最后提供一种参考方法:
日期和时间组件文档2

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-07-11
  • 2022-12-23
  • 2022-03-01
  • 2022-01-10
猜你喜欢
  • 2021-05-18
  • 2021-07-13
  • 2022-12-23
  • 2022-02-04
  • 2021-11-21
  • 2022-02-20
  • 2022-12-23
相关资源
相似解决方案