[发明专利]一种基于DOM的H5时间选择器的组件统一实现方法

摘要

一种基于DOM的H5时间选择器的组件统一实现方法，步骤1：以事件代理的形式为整个HTML页面BODY绑定CLICK事件；步骤2：触发到与DOM元素绑定的CLICK事件后，读取该DOM元素的禁用属性值和只读属性值；步骤3：从触发CLICK事件的DOM元素中读取3个属性值；步骤4：获取触发click事件的DOM元素属性的时间配置格式，形成与时间格式相一致的时间范围；步骤5：渲染触发click事件的DOM元素；步骤6：为时间列表中每列时间备选区域绑定能实现内容滚动的插件至此时间选择器成型；步骤7：为时间选择器绑定“选择确定”和“选择取消”。本发明能够解决市面上多元化时间选择器组件接口不统一的问题。

主权项

1.一种基于DOM的H5时间选择器的组件统一实现方法，其特征在于，包括如下步骤：步骤1：以事件代理的形式为整个HTML页面BODY绑定CLICK事件，使Html页面内包含指定事件对象的元素在遇到用户点击时，能都触发已绑定的CLICK事件；所述事件对象为包含[_type＝datatime]或[_type＝date]属性的DOM元素；步骤2：当用户点击时，触发到与DOM元素绑定的CLICK事件后，读取该DOM元素的禁用属性值(disable)和只读属性值(readOnly)，仅当两个属性值都为“否”时，表现形式为false，则进行步骤3；步骤3：从触发CLICK事件的DOM元素中读取3个属性值，分别为(1)当前显示的时间，属性名为value，从方便处理的角度考虑,采用的格式为年‑月‑日‑时‑分‑秒；(2)最大可选日期，格式为年‑月‑日‑时‑分‑秒，属性名为maxDate；(3)最小可选日期，属性名为minDate，格式为年‑月‑日‑时‑分‑秒；步骤4：获取触发click事件的DOM元素属性[_type＝datatime]或[_type＝date]的时间配置格式，并按照两个不同的时间格式重新记录value属性值、maxDate属性值、minDate属性值，形成与时间格式相一致的时间范围；步骤5：渲染触发click事件的DOM元素，按照步骤4中形成的时间范围，在HTML页面上自动呈现出静止状态的时间列表，时间列表中将基于步骤3中形成的时间范围，记录着从最大可选时间到最小可选时间这一区间内的所有时间；时间列表根据步骤4中[_type＝date]或[_type＝datatime]的时间格式，以列为单位，有针对性地形成“年”、“月”、“日”、“时”、“分”的时间备选区域；步骤6：为时间列表中每列时间备选区域绑定能实现内容滚动的插件，使时间列表内各时间备选区域具备滚动选择功能，至此时间选择器成型；同时，根据步骤5中经过时间格式规范化的当前显示时间，将时间列表内各时间备选区域滚动至与当前显示时间保持一致；步骤7：为时间选择器绑定“选择确定”和“选择取消”事件，如果是“选择确定”，当前时间选择器中各时间备选区域中时间选项被存储，并将时间传至DOM元素保存和显示；如果是“选择取消”，当前时间选择器中各时间备选区域中时间选项返回至初始状态的当前显示时间。