简介
@beisen-cmps/platform-date-range 是针对于前端开发者的一个 Date Range 日期范围选择器 npm 包，具有良好的稳定性和灵活性。本教程为大家介绍该包如何使用及其特点。
安装与引入
在使用前需要先进行安装，可以使用 npm 或 yarn 进行安装：
--- ------- --------------------------------
或
---- --- --------------------------------
然后在代码里引入即可：
------ ----------------- ---- -----------------------------------
构造函数
PlatformDateRange 最基本的使用方式是调用其构造函数实例化一个日期范围选择器：
--- --------------------------
其中，options 参数为一个对象，包括以下属性：
el（必填）：容器元素，可以是 DOM 元素、元素的 id 字符串或者 jQuery 对象。input（必填）：序列化的字符串、jQuery 对象或者 DOM 元素，选择器将会基于该元素的位置创建层级下拉框。如果实例初始化后，需要更改 input 值，则可以通过 setDate 方法设置。hasTime（可选）：是否需要同时选择时间，默认为 true。attribute（可选）：Object, 配置日期选择器控件中承载信息的属性名称，它包括以下属性：start：一般指起始日期，可以是字符串。默认属性名为data-start-date。end：一般指结束日期，可以是字符串。默认属性名为data-end-date。value：一般指当前选中日期或范围的信息，可以是字符串或 Array。默认属性名为data-selected。
rangeType（可选）：配置日期范围选择类型，可以是normal或shortcut。默认为normal。placeholder（可选）：输入框的 placeholder 文本。默认为 "请选择"。startDate（可选）：默认开始日期。endDate（可选）：默认结束日期。minDate（可选）：可选择的最小日期（含此日期），可为字符串或时间戳。maxDate（可选）：可选择的最大日期（含此日期），可为字符串或时间戳。success（可选）：选择完成后的回调函数。error（可选）：选择过程中错误处理的回调函数。zIndex（可选）：设置弹出层的 z-index 值。
方法
PlatformDateRange 实例的方法如下：
setDate(date)
可以用于设置初始值或者更新当前选中的日期。date 可以是一个 string 类型或者以 Date 实例的形式传入。
-- ----------- ----- --------- - --- ------------------- --- ------------- ------ ------------- ---------- ------------- -------- ------------ --- -- ------ ------------------------------- --------------
setOptions(options)
该方法可以用于动态更新选项，此时它的参数为一个 options 对象。
----- --------- - --- -------------------
--- -------------
------ -------------
---------- -------------
-------- ------------
---
-- ------
----------------------
-------- -------------
-------- -------------
-------- -------- -------- -
------------------------ --------
-
---show()
用于显示时间范围选择控件。默认情况下，单击页面中指定的 input 元素就会显示时间范围选择控件，不需要调用 show() 方法。
----- --------- - --- ------------------- --- ------------- ------ ------------- -------- ----- --- -- ------ -----------------
事件
PlatformDateRange 支持多个事件，自定义事件可以通过实例对象的 on 方法绑定到日期选择器的实例上。
----- --------- - --- ------------------- --- ------------- ------ ------------- ---------- ------------- -------- ------------ --- -- ------- ---------------------- -------- ------ - ------------------------ ------ ---
目前支持的事件有：
change：选择完成后被触发，返回选中的日期范围信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/beisen-cmps-platform-date-range