日期选择插件–XMSDatePicker

概总

该方法,是为了完成公司的业务而重新实现的,所以,包含了很多其他的日期插件,不包含的功能,当然,也包含了日期插件,基本的功能,并且支持一些自定义的扩展,这些自定义的扩展,可能需要更详细的说明,才能发现(因为没有太多的时间,把这个插件的所有功能,都详细的描述下来),当然,你如果愿意自己去查看源代码的话,也可以发现,可以如何扩展的。

在接下来的示例中,有一个点是无法在示例中展示的,那就是,可以有节日的提示,如果你想要选择的日期,是一个节日,那么当鼠标悬停在该日期时,会把该节日的名称显示出来,这个,您可以在任何一个示例中查看到。

日期时间选择插件–详情介绍

  1. 基本介绍

    函数命名:XMSDatePicker

    函数调用:XMSCore.xmsDatePicker(options)

    参数:options介绍,请继续向下看。

  2. 传入参数options介绍

    参数名 默认值 相关说明
    obj(必须) $对象 触发对象,点击该元素时,会弹出日期选择框,当选择时间之后,也会把时间保持到该元素上。
    format “yyyy/mm/dd” 返回的日期格式

    选择完日期之后,返回值的格式,该属性的具体使用,请参考:xmsDateFormat方法。
    weekStart 0 按月显示时,每行会显示一周的时间,这里就用于控制,每周是以周几开始

    默认值为0,表示以周日开始每周。
    dateStart “” 有些时候,选择的时间,是有一些限制,只能选择一些可选的时间

    所以,添加了该属性,默认值为””,表示不限制,可以选择向前的任意时间。

    如果输入值,比如”2016/02/04″,那么,只有该天和其之后的日期,才是可选的。

    dateEnd “” 与dateStart类似,只是该属性是控制,最晚可选择的日期

    如果设置了该属性,那么该值之后的日期,是不可选的。
    dateLength 0 该值,只有在dateStart存在,而dateEnd不存在的情况下,才是有效的

    表示,从dateStart开始的dateLength天,是可选的,其他的日期,都是不可选的。
    nearDay “” 特殊日期的显示,只支持最近三天的特殊日期显示,可以设置为当天的显示,比如[“今”,”明”,”后”]
    weekName “” 周的显示名称,默认显示[“日”,”一”,”二”,”三”,”四”,”五”,”六”],如果需要自定义,请按照该格式。
    monthName “” 当显示月份时的显示名称,默认值为:

    [“1月”,”2月”,”3月”,”4月”,”5月”,”6月”,”7月”,”8月”,”9月”,”10月”,”11月”,”12月”]
    hourName “” 当显示小时时显示的小时名称,默认值为:

    [“0时”,”1时”,”2时”,”3时”,”4时”,”5时”,”6时”,”7时”,”8时”,”9时”,”10时”,”11时”,”12时”,”13时”,”14时”,”15时”,”16时”,”17时”,”18时”,”19时”,”20时”,”21时”,”22时”,”23时”]
    success null 时间选择成功之后的回调函数,传入一个参数,一个合法的日期字符串。

    内部this指向参数中的obj元素。
  3. 插件的使用–默认使用方法

    给input输入框,选择日期的,不限制可选日期(除了必须的元素对象之外,其他都选择默认值)。

    					
    new xmsCore.XMSDatePicker({
        obj : $("#xmsDatePicker")
    	//点击的目标对象
    });
    					
    				

    说完来个示例吧:默认使用格式

  4. 自定义格式:format

    在使用时,可以按照xmsDateFormat的介绍,设置该值。

    使用JS初始化

    					
    xmsCore.XMSDatePicker({
        obj : $("#xmsDatePicker2"),
    	//点击的目标对象
    	format : "yyyy-mm-dd hh:ii"
    	//hh:ii出现时,选择器会选择小时和分钟
    });			
    					
    				

    示例:输出指定格式的日期字符串

  5. weekStart属性,改变每周的第一个显示日期

    按月显示时,每行都是一个周的数据,而不同的需求中,可能会出现每行第一天不同的情况,所以,这里使用该属性,来控制每周的第一天是从哪一天开始的。默认值为0;

    					
    new xmsCore.XMSDatePicker({
        obj : $("#xmsDatePicker2"),
        //点击的目标对象
        format : "yyyy-mm-dd",
        weekStart : 2,
    	//weekStart值为2,表示每周以周二开始
    });			
    					
    				

    示例:改变每周的开始。

  6. dateStart,dateEnd,dateLength来控制可选日期

    在前面的示例中,日期的选择是没有限制的,但是,在一些情况下,可选择的日期,其实是需要有限制的,所以,这里添加了这三个属性,用来控制可选日期的区域。

    					
    new xmsCore.XMSDatePicker({
    	obj : $("#xmsDatePicker3"),
    	//点击的目标对象
    	format : "yyyy-mm-dd",
    	dateStart : "2016/02/04",
    	dateEnd : "2016/02/27"
    	//自2016/02/04-2016/02/27,这段时间可选
    	//包含这两天
    });
    					
    				

    示例:限制可选日期的示例

  7. nearDay最近三天的特殊日期显示

    有时候,为了能更好的区分最近的三天,会给最近的三天,添加一个特殊的显示,以及特殊的样式,所以,这里给最近的三天添加一些额外的样式。(支持最多三天,可以少于三天)

    					
    new xmsCore.XMSDatePicker({
    	obj : $("#xmsDatePicker"),
    	//点击的目标对象
    	nearDay : ["今","明","后"]
    });
    					
    				

    示例:最近三天特殊日期的显示DEMO

    这里只写了这一个示例,如果有需求设置其他的,请设置对应的属性即可。

  8. weekName,monthName,hourName等自定义一些显示名称

    日历的选择,是有区域的嘛,这里给出了这几个属性,用来自定义一些显示格式。比如在下面,就以weekName为例,来看看我把每周内的七天的名称,进行一些更改后的显示。

    					
    new xmsCore.XMSDatePicker({
        obj : $("#xmsDatePicker2"),
        //点击的目标对象
        weekName : ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
    });
    					
    				

    示例:自定义一些显示名称的DEMO

    这里只写了这一个示例,如果有需求设置其他的,请设置对应的属性即可。

  9. 成功的回调:success方法

    该方法,是为了扩展而出现的,如果需要显示的格式不同,而插件中,传入传出的数据,又是不同的,所以,如果有需要额外的数据处理,那么就可以在时间选择完成之后,做一些自定义的处理。

    内部this指向obj元素。传入一个参数,是一个选择好的时间的字符串。

    					
    new xmsCore.XMSDatePicker({
        obj : $("#xmsDatePicker"),
    	//点击的目标对象
    	success : function(time){
    		alert(time);
    		//选中时间之后,弹出选中的时间字符串
    	}
    });
    					
    				

    示例:回调函数success的DEMO

总结

该插件,是基于另外一个插件的基础上,再一次做的封装,所以,如果您想要使用该插件,并且把其他的不需要的方法,都剔除掉,请注意xmsCustomDate插件,肯定要保存着的,当然,为了能使该插件,更符合您自己的一些规范,那么顺便把插件名啥的,都改了不,毕竟这示例中,使用的插件名,都是我所在公司的(懒,不想改动了)。

如果有其他问题,请交流,谢谢!

本文地址:http://www.zhangyunling.com/?p=496

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>