日期选择时间控件很强悍的_wincc时间控件,wincc时间选择控件资源-CSDN文库

共18个文件

jpg：6个

rar：5个

html：3个

需积分: 48 111 浏览量 2009-09-24 14:06:31 上传评论收藏 182KB RAR 举报

在IT领域，尤其是在网页开发和用户界面设计中，日期选择时间控件是不可或缺的一部分。这样的控件允许用户方便地选择日期和时间，提高了交互性和用户体验。"日期选择时间控件"是一个强大的工具，通常用于在线表单、预订系统、日程安排等应用场景。在网页设计中，日期选择时间控件一般有两种主要类型：独立的日期选择器和包含日期与时间的综合选择器。独立的日期选择器只允许用户选择日期，而综合选择器则同时提供了日期和时间的选项，适用于需要精确到分钟或小时的场景。这些控件的设计应考虑易用性、可访问性和适应性，确保所有用户都能轻松操作。日期选择时间控件的实现通常基于JavaScript库，例如jQuery UI中的Datepicker或者Bootstrap的Datetimepicker。这些库提供了丰富的功能，如预设日期范围、禁用特定日期、自定义格式化以及多语言支持等。开发者可以根据项目需求选择适合的库，并通过配置选项进行定制。在描述中提到“里面有好几个可以选择”，这可能意味着这个压缩包包含了几种不同风格或功能的日期选择时间控件供用户挑选。这为开发者提供了灵活性，可以根据网站设计和用户需求选择最合适的控件。下载并解压后，从"新建文件夹 (2)"中，你可以找到这些控件的源代码、CSS样式文件、JavaScript文件以及可能的示例文件，通过查看和修改这些文件，可以进一步理解和应用这些控件。在使用日期选择时间控件时，开发者需要注意兼容性问题，确保控件在各种浏览器（如Chrome、Firefox、Safari、Edge和Internet Explorer）以及不同设备（桌面、平板、手机）上都能正常工作。此外，考虑到无障碍性（WCAG标准），应确保键盘导航和屏幕阅读器的兼容性。 "日期选择时间控件"是一个强大且实用的工具，它提升了用户在网页上的交互体验。通过提供的压缩包，开发者可以获得多种选择，从而根据项目需求定制适合的日期和时间选择功能。正确地集成和配置这些控件，能够优化网站或应用的用户体验，使其更加专业和用户友好。

资源推荐

资源详情

资源评论

收起资源包目录

js日期选择控件.rar （18个子文件）

新建文件夹 (2)

demo1.rar 52KB

070524095434

My97DatePicker2.1

demo_iframe2.html 514B

demo_iframe.html 967B

demo2.1.html 23KB

datepicker

whyGreen

datepicker.css 4KB

down.jpg 445B

bg.jpg 307B

ymbg.jpg 302B

up.jpg 448B

default

datepicker.css 3KB

down.jpg 381B

up.jpg 380B

WdatePicker.js 25KB

datePicker.gif 1KB

带时间的日期控件.rar 7KB

jscalendar-1.0.rar 61KB

JS.rar 33KB

demo.rar 14KB

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>My97 DatePicker 2.1 演示</title> <style> *{font-size:9pt;line-height:18px} .title{font-size:16px;color:#0000FF;font-weight:bold} .con{margin-left:15px;} </style> <script language="javascript" type="text/javascript" src="datepicker/WdatePicker.js"></script> <link href="datepicker/default/datepicker.css" rel="stylesheet" type="text/css"> <link href="datepicker/whyGreen/datepicker.css" rel="stylesheet" type="text/css" disabled="disabled"> </head> <body> My97日期控件 My97 DatePicker Ver 2.1 特性展示 链接:<a href="#gn">功能介绍和使用说明</a> 1.主调方法: class="Wdate" ----> 日期框的样式,你可以根据具体的项目自己更改日期框的样式,比如长度,高度颜色等 onfocus="new WdatePicker('el','dateFmt','showsTime','skin')" 这个是JS库的主调函数: el: 表示返回日期的对象或对象名称,提供2种调用方式 dateFmt: 自定义的日期格式 %Y %M %D %h %m %s 表示年月日时分秒(注意大小写) 默认是%Y-%M-%D showsTime: 布尔型变量 true表示带时间选择默认为false skin: 皮肤的名称本包自带2款皮肤分别为 default 和 whyGreen 2.属性(2.1新增,注意大小写) MINDATE: 日期最小值格式为: 2000-1-1 或 2000/1/1 默认为:1900-1-1 MAXDATE: 日期最大值格式为: 2008-1-1 或 2008/1/1 默认为:2099-12-30 3 改进的方法 getValue(): 这个属性用于记录日期框的日期值通常情况下getValue()和日期框的value 属性是一样的,当进行自定义日期格式的时候这2个值就不一样了 例如: 当格式字符串: %Y年%M月%D日 %h时%m分%s秒时日期框中的VALUE是:2000年1月1日 12时00分00秒而getValue()值: 2000-1-1 12:00:00 我想通过这个例子应该很清楚了,2000年1月1日 12时00分00秒对于用户来说是一个很直观的日期,但对于计算机来说是一个不可识别的日期,在用户选择的时候我们可以使用%Y年%M月%D日 %h时%m分%s秒格式化日期给用户一个友好的日期格式,但是在数据存储的时候我们不可能把2000年1月1日 12时00分00秒直接存入数据库的,getValue()就是为了解决这个问题而设计的. 2.1新增功能(如果您没有用过2.0版本请务必先看2.0的相关说明,<a href="#v2.0">单击此处查看2.0特性</a>)<a name="v2.1" id="v2.1"></a> 2.1.1 日期范围限制(静态限制) 相关属性:MINDATE(最小日期) MAXDATE(最大日期) <input type="text" class="Wdate" onfocus="new WdatePicker(this)" MINDATE="2006-10-8" MAXDATE="2008-11-20"/> 注意:在.NET中,可以使用TextBox代替input,class="Wdate"改为CssClass="Wdate"其他类似,下面的例子在.NET中的调用也是类似的,不再做说明了 示例 2.1-1(限制日期的范围是 2006-10-8到2008-11-20 ): <input type="text" class="Wdate" onFocus="new WdatePicker(this)" MINDATE="2006-10-8" MAXDATE="2008-11-20"/> 2.1.2 日期范围限制(动态限制) 相关属性:MINDATE(最小日期) MAXDATE(最大日期) 动态变量: 使用$开头后面接日期框的id 特殊变量: #Today 表示今天 示例 2.1-1(动态限制日期的范围 前面的日期不能大于后面的日期后面的日期的最大值是:2020-1-1): <input id="htStart" type="text" class="Wdate" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" MAXDATE="$htEnd"/> <input id="htEnd" type="text" class="Wdate" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)" MINDATE="$htStart" MAXDATE="2020-1-1"/> 合同有效期从 <input id="htStart" type="text" class="Wdate" onClick="new WdatePicker(this,'%Y年%M月%D日',false)" MAXDATE="$htEnd"/> 到 <input id="htEnd" type="text" class="Wdate" onClick="new WdatePicker(this,'%Y年%M月%D日',false)" MINDATE="$htStart" MAXDATE="2020-1-1"/> 示例 2.1-2(动态限制日期的范围只能选择今天以前的日期) <input id="text212" type="text" class="Wdate" onfocus="new WdatePicker(this)" MAXDATE="#Today"/> <input id="text212" type="text" class="Wdate" onFocus="new WdatePicker(this)" MAXDATE="#Today"/> 示例 2.1-3(动态限制日期的范围只能选择今天以后的日期) <input id="text213" type="text" class="Wdate" onfocus="new WdatePicker(this)" MINDATE="#Today"/> <input id="text213" type="text" class="Wdate" onFocus="new WdatePicker(this)" MINDATE="#Today"/> 2.1.3 增强的自动纠错功能 纠错处理可设置为3种模式 1.提示(默认) 2.自动纠错 3.标记 注:纠错处理模式,可通过修改,具体操作方法请<a href="#mrsz">单击此处</a>查看 合法日期的定义: 符合格式而且在限定范围之内的日期 1. 当遇到合法的日期时不做任何处理 示例:略 2. 当遇到合法日期但是格式与设定的格式不匹配时,如用户设定的格式是 %Y年%M月%D日而用户输入 2000-1-1 则自动转换成 2000年1月1日 示例 2.1-4(你可以参数在下框中直接输入 2000-1-1 , 2005/1/1 , 2008-1/1 然后看看效果吧 <input id="text213" type="text" class="Wdate" onfocus="new WdatePicker(this,'%Y年%M月%D日',false)"/> <input name="text4" type="text" class="Wdate" id="text" onFocus="new WdatePicker(this,'%Y年%M月%D日',false)"/> 3. 当遇到不合法日期时,根据设定的纠错处理模式,做相应的处理,默认的纠错处理模式是提示 ,他将弹出一个对话框提示用户并让用户选择如何处理 示例 2.1-5 你可以参数在下框中直接输入 200a-b-11(错误的日期) 2001/2/29(非闰年) 1999-1-1(限定范围之外的日期) 然后看看效果吧 <input id="text2" type="text" class="Wdate" onfocus="new WdatePicker(this)" MINDATE="2000-1-1" MAXDATE="2020-1-1"/> <input type="text" class="Wdate" id="text2" onFocus="new WdatePicker(this)" MINDATE="2000-1-1" MAXDATE="2020-1-1"/> 2.1.4 改进的取值方式 如果你的日期格式定义是 %Y-%M-%D %h:%m:%s 那么取值的时候很简单,因为计算机是直接认识这种格式的日期的 但是,有时为了项目的需要我们会将日期格式定义成 %Y年%M月%D日 %h时%m分%s秒 那么计算机改如何取值呢? 我们这里提供了一个getValue方法 <input type="text" class="Wdate" id="text3" style

评论收藏

内容反馈