一种基于原生js的WEB周选择组件技术及方法与流程

一种基于原生js的web周选择组件技术及方法
技术领域
1.本发明涉及web前端开发技术领域，具体为一种基于原生js的web周选择组件技术及方法。


背景技术：

2.现有的周组件基本都是一个附属品的存在，被当做一个附带物存在于系统框架里面的时间组件中,如layui、element-ui、ant design等框架，实现方案就是基于juqery、vue等技术上做的二次封装，先选择日，从而判断选的日的对应的周的周期是多少，优点就是使用简单，不用二次引入组件。
3.现有的技术方案缺点大都一致：
4.2.1、功能简单，只能选择自然周，而且都是选择天去判断是哪一周。没法进行自定义选择逻辑，不能直观的看出来当前选的这周是当年的哪一周，无法配置如何非自然周，以及年初非完整周的归属问题；
5.2.2、存在web前端组件库中，无法单独使用；不能因为一个周组件引入一个整个系统框架，组件和框架的耦合性高，增加系统的复杂度和冗余；
6.2.3、大都基于web前端系统框架做的组件封装，当换个技术框架时，之前的开发的组件就无法使用，又得进行二次开发，组件和技术框架强耦合，增加了开发成本和维护成本。
7.基于此，本发明设计了一种基于原生js的web周选择组件技术及方法，以解决上述问题。


技术实现要素：

8.本发明的目的在于提供一种基于原生js的web周选择组件技术及方法，以解决上述背景技术中提出的问题。
9.为实现上述目的，本发明提供如下技术方案：一种基于原生js的web周选择组件技术，其特征在于，提供一个可以配置年初周非完整周的归属规则、自定义周周期的web前端周选择组件，用于解决在填报周报时，如果年末的那一周跨年，属于当年，还是属于下年，本插件提供配置，默认为年初不是完整周归属去年，可以配置值为归属本年；
10.以及有些业务场景一周的时间不是自然周，如周三到周二算一周，默认是自然周，可以通过配置参数来自定一周，并且此组件基于原生js封装的，可以随意在各个web前端系统框架中使用，不依赖于任何组件库。
11.作为本发明的进一步方案，该技术对外提供默认值、是否只读、最大选择的时间(用于只能选择给定时间之前的值)、周区间的起始值(默认周一)、设置每年第一周的处理规则(默认是第一周不是完整周算去年的，值为1标识第一周不是完整周算今年)。
12.一种基于原生js的web周选择方法，该方法具体步骤为：
13.步骤一：配置默认值、是否显示清空按钮、提示语句、是否只读、提交字段、样式，根
据配置信息初始化dom；
14.步骤二：根据配置日期，把日期解析为时间对象，获取年、月、日；
15.步骤三：根据配置日期中的年和配置的周的周期计算出这年的第一天是否周期的起始天，如果是则表明是个完整周，如果不是则是非完整周；
16.步骤四：非完整周要进入年初非完整周归属的判断，如是归属今年，则推算出完整周的第一天当做配置年的第一天；如果归属明年，则去除非完整周天数，把第一个完整周的第一天当做配置年的第一天；
17.步骤五：根据规则1、3、5、7、8、10、12月为31天；4、6、9、11为30天，根据是否是瑞年推算出二月的天数；累加起来减去第四步的获得天数，就可以计算出一年的天数，然后计算出周天；
18.步骤六：根据第二步时间和第五步的周天计算出传参时间是当年的第几周；
19.步骤七：根据最大选择时间的参数，计算出年、月、日；如果年等于当前年，就计算出这时间的当年的第几周，这年后面周置灰不让选择；如果大于当前年，则表示都可以选择；如果小于当前年，全部置灰，表示都不可以选择；
20.步骤八：根据只读参数去控制是否添加切换事件；切换事件是控制切换上一年下一年的；切换之后把年的信息传入步骤二，重新执行逻辑；
21.步骤九：把渲染组件到页面上。
22.与现有技术相比，本发明的有益效果是：
23.1、可配置每年的第一周不是完整周的归属问题、非自然周、只能选择最大时间之前的历史周；
24.2、直观的展示了哪年第几周以及周的区间；
25.3、基于原生js开发的组件，可随意在各个web前端系统框架中使用，独立开发的组件，不基于任何组件库做的二次封装，解决了年初周为非完整周的归属问题，增加了配置自定义周的配置，可以更好的适用于各个应用场景。
附图说明
26.为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
27.图1为本发明一种基于原生js的web周选择方法的流程图。
具体实施方式
28.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
29.请参阅图1，本发明提供一种技术方案：一种基于原生js的web周选择组件技术，其特征在于，提供一个可以配置年初周非完整周的归属规则、自定义周周期的web前端周选择
组件，用于解决在填报周报时，如果年末的那一周跨年，属于当年，还是属于下年，本插件提供配置，默认为年初不是完整周归属去年，可以配置值为归属本年；
30.以及有些业务场景一周的时间不是自然周，如周三到周二算一周，默认是自然周，可以通过配置参数来自定一周，并且此组件基于原生js封装的，可以随意在各个web前端系统框架中使用，不依赖于任何组件库；
31.通过上述技术可配置每年的第一周不是完整周的归属问题、非自然周、只能选择最大时间之前的历史周，并且可以直观的展示了哪年第几周以及周的区间；
32.该技术对外提供默认值、是否只读、最大选择的时间(用于只能选择给定时间之前的值)、周区间的起始值(默认周一)、设置每年第一周的处理规则(默认是第一周不是完整周算去年的，值为1标识第一周不是完整周算今年)。
33.一种基于原生js的web周选择方法，该方法具体步骤为：
34.步骤一：配置默认值、是否显示清空按钮、提示语句、是否只读、提交字段、样式，根据配置信息初始化dom；
35.步骤二：根据配置日期，把日期解析为时间对象，获取年、月、日；
36.步骤三：根据配置日期中的年和配置的周的周期计算出这年的第一天是否周期的起始天，如果是则表明是个完整周，如果不是则是非完整周；
37.步骤四：非完整周要进入年初非完整周归属的判断，如是归属今年，则推算出完整周的第一天当做配置年的第一天；如果归属明年，则去除非完整周天数，把第一个完整周的第一天当做配置年的第一天；
38.步骤五：根据规则1、3、5、7、8、10、12月为31天；4、6、9、11为30天，根据是否是瑞年推算出二月的天数；累加起来减去第四步的获得天数，就可以计算出一年的天数，然后计算出周天；
39.步骤六：根据第二步时间和第五步的周天计算出传参时间是当年的第几周；
40.步骤七：根据最大选择时间的参数，计算出年、月、日；如果年等于当前年，就计算出这时间的当年的第几周，这年后面周置灰不让选择；如果大于当前年，则表示都可以选择；如果小于当前年，全部置灰，表示都不可以选择；
41.步骤八：根据只读参数去控制是否添加切换事件；切换事件是控制切换上一年下一年的；切换之后把年的信息传入步骤二，重新执行逻辑；
42.步骤九：把渲染组件到页面上。
43.上述步骤基于原生js开发的组件，可随意在各个web前端系统框架中使用，独立开发的组件，不基于任何组件库做的二次封装，解决了年初周为非完整周的归属问题，增加了配置自定义周的配置，可以更好的适用于各个应用场景。
44.在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
45.以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，
可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。