TextBoxJquery日期控件资源-CSDN文库

共49个文件

svn-base：18个

js：8个

entries：5个

4星 · 超过85%的资源需积分: 3 85 浏览量 2009-07-15 13:21:35 上传评论收藏 78KB RAR 举报

在网页开发中，为了提供更好的用户体验，我们常常需要在输入框中添加日期选择功能，这时候Jquery日期控件就派上了用场。本教程将详细讲解如何使用TextBox结合Jquery的WdatePicker插件实现一个方便快捷的日期选择器。 `TextBox`是ASP.NET中的一个控件，用于创建用户可以输入文本的HTML元素。在JavaScript中，我们可以对这个控件进行操作，为其添加额外的功能。在本例中，我们要为`TextBox`添加一个点击事件，当用户点击文本框时，弹出日期选择器。 `WdatePicker.js`是Web开发中广泛使用的Jquery日期插件，由EasyUI团队开发。它提供了丰富的自定义选项和良好的本地化支持，使得日期选择变得更加便捷。在使用这个插件之前，我们需要确保已经在页面中引入了`WdatePicker.js`文件，这通常通过在`<head>`标签内添加`<script>`标签来完成，例如： ```html <script src="path/to/WdatePicker.js"></script> ``` 接下来，我们需要在服务器端代码（如C#）中，使用`textBox.Attributes["onClick"] = "WdatePicker()"`这行代码来设置TextBox的点击事件。`Attributes`属性允许我们添加或修改HTML元素的任何属性，`onClick`是JavaScript事件，当用户点击文本框时触发。这里我们设置`onClick`为`WdatePicker()`，意味着当用户点击TextBox时，会调用`WdatePicker`函数，弹出日期选择器。在客户端（浏览器）中，`WdatePicker`函数会初始化日期插件，展示一个日历界面供用户选择日期。用户选择完日期后，日期值会自动填充到TextBox中，方便后续处理。 `WdatePicker`提供了多种自定义选项，例如设置日期格式、设定日期范围、禁用特定日期等。例如，如果你想让日期格式为"yyyy-MM-dd"，可以这样设置： ```javascript $("#yourTextBoxId").attr("onclick", "WdatePicker({dateFmt:'yyyy-MM-dd'})"); ``` 此外，还可以通过JavaScript对象配置更多高级特性，例如设置默认日期、更改语言等： ```javascript $("#yourTextBoxId").attr("onclick", "WdatePicker({defaultDate:'%y-%M-%d',lang:'zh-cn'})"); ``` 在实际项目中，我们可能需要根据需求动态地配置这些选项。例如，如果需要根据用户的地区设置语言，可以获取用户的浏览器设置并据此调整`lang`参数。 `TextBox + Jquery日期控件`是一种常见的前端日期输入解决方案，通过引入`WdatePicker.js`插件，并在TextBox的点击事件中调用`WdatePicker`，可以轻松实现日期选择功能。同时，利用其丰富的配置选项，可以定制化满足各种复杂需求的日期选择器。

资源推荐

资源详情

资源评论

收起资源包目录

Date_javaScript.rar （49个子文件）

javaScript

jquery-1.2.6.js 98KB

My97DatePicker

calendar.js 22KB

My97DatePicker.htm 1KB

.svn

props

all-wcprops 786B

entries 952B

text-base

calendar.js.svn-base 22KB

config.js.svn-base 225B

My97DatePicker.htm.svn-base 1KB

WdatePicker.js.svn-base 7KB

format 2B

tmp

props

text-base

prop-base

WdatePicker.js 7KB

skin

whyGreen

img.gif 2KB

datepicker.css 5KB

.svn

props

all-wcprops 656B

entries 792B

text-base

datepicker.css.svn-base 5KB

bg.jpg.svn-base 307B

img.gif.svn-base 2KB

format 2B

tmp

props

text-base

prop-base

bg.jpg.svn-base 53B

img.gif.svn-base 53B

bg.jpg 307B

.svn

props

all-wcprops 481B

entries 661B

text-base

WdatePicker.css.svn-base 158B

datePicker.gif.svn-base 1KB

format 2B

tmp

props

text-base

prop-base

datePicker.gif.svn-base 53B

default

img.gif 2KB

datepicker.css 4KB

.svn

props

all-wcprops 490B

entries 633B

text-base

datepicker.css.svn-base 4KB

img.gif.svn-base 2KB

format 2B

tmp

props

text-base

prop-base

img.gif.svn-base 53B

datePicker.gif 1KB

WdatePicker.css 158B

config.js 225B

lang

zh-tw.js 382B

zh-cn.js 383B

.svn

props

all-wcprops 607B

entries 757B

text-base

zh-tw.js.svn-base 382B

en.js.svn-base 415B

zh-cn.js.svn-base 383B

format 2B

tmp

props

text-base

prop-base

en.js 415B

Tooltip.pack.js 2KB

<html> <head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>My97DatePicker</title> <script type="text/javascript" src="config.js"></script> <script> if(parent==window) location.href = 'http://www.my97.net/'; var $d, $dp, $pdp = parent.$dp, $dt, $tdt, $sdt, $lastInput, $IE=$pdp.ie, $FF = $pdp.ff,$OPERA=$pdp.opera, $ny, $cMark = false; if ($pdp.eCont) { $dp = {}; for (var p in $pdp) { $dp[p] = $pdp[p]; } } else $dp = $pdp; $dp.getLangIndex = function(name){ var arr = langList; for (var i = 0; i < arr.length; i++) { if (arr[i].name == name) { return i; } } return -1; } $dp.getLang = function(name){ var index = $dp.getLangIndex(name); if (index == -1) { index = 0; } return langList[index]; } $dp.realLang = $dp.getLang($dp.lang); document.write("<script src='lang/" + $dp.realLang.name + ".js' charset='" + $dp.realLang.charset + "'><\/script>"); for (var i = 0; i < skinList.length; i++) { document.write('<link rel="stylesheet" type="text/css" href="skin/' + skinList[i].name + '/datepicker.css" title="' + skinList[i].name + '" charset="' + skinList[i].charset + '" disabled="true"/>'); } </script> <script type="text/javascript" src="calendar.js"></script> </head> <body leftmargin="0" topmargin="0" onload="$c.autoSize()"> </body> </html> <script>new My97DP();</script>

评论收藏

内容反馈