蓝桥软件学院日期.docxVIP

日期课程目标了解DateBox、DateTimeBox和Calendar的基本属性、方法和事件灵活掌握日期的相关操作DateBoxDateBox简介日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。效果如下图：开发DateBox程序复制input id=dd type=text class=easyui-datebox required=required/input 参考代码:26/datebox01.html效果如上图。DateBox常用属性属性名属性值类型描述默认值panelWidthnumber下拉日历面板宽度。180panelHeightnumber下拉日历面板高度。autocurrentTextstring显示当天按钮。TodaycloseTextstring显示关闭按钮。CloseokTextstring显示OK按钮。OKdisabledboolean该属性值为true时禁用该字段。falsebuttonsarray在日历下面的按钮。sharedCalendarstring,selector将一个日历控件共享给多个datebox控件使用。nullformatterfunction该函数用于格式化日期。parserfunction该函数用于解析一个日期字符串。DateBox常用方法方法名方法参数描述optionsnone返回属性对象。calendarnone获取日历对象。setValuevalue设置日期输入框的值。DateBox常用事件事件名事件参数描述onSelectdate在用户选择了一个日期的时候触发。案例一：设置指定的日期复制a href=javascript:void(0); onclick=set(); class=easyui-linkbutton设置值 /aa href=javascript:void(0); onclick=alert($(#input1).datebox(getValue)); class=easyui-linkbutton获取值 /ascript type=text/javascriptfunction set(){$.mpt(提示信息, 请输入要设置的数值：, function(value){if (value){$(#input1).datebox(setValue, value);}});}/script参考代码:26/datebox01.html效果如下图：案例二：设置日期范围复制input id=dd/inputscript$(function(){$(#dd).datebox().datebox(calendar).calendar({validator: function(date){var now = new Date();//当前日期var d1 = new Date(now.getFullYear(), now.getMonth(), now.getDate());//下月1号var d2 = new Date(now.getFullYear(), now.getMonth()+1, 1);//只能选择今天到本月最后一天return d1=date dated2;}});});/script参考代码:26/datebox02.html效果如下图：案例三： 修改日期样式复制h2Date Format/h2pformatter方法用于将Date类型转换成String,parser方法用于将String转换成Date/pdiv style=margin:20px 0;/divinput class=easyui-datebox/inputbr/br/input id=input1 class=easyui-datebox data-options=formatter:myformatter,parser:myparser/inputbr/br/br/a href=javascript:void(0); onclick=set(); class=easyui-linkbutton设置值 /aa href=javascript:void(0); onclick=alert($(#input1).datebox(getValue)); class=easyui-linkbutton获取值 /ascript type=text/javascriptfunction myformatter(date){var y = date.getFullYear();var m = date.getMonth()+1;var d = date.getDate();re