zarkfx 日期选择器 datepicker，让不懂程序的人也能使用js效果

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 4042 天前的主题，其中的信息可能已经有所发展或是发生改变。

之前有说过我们做的js库，就是在html代码中通过fx属性来实现常见js功能

今天，我向大家介绍其中的“日期选择器”，你只需要在你的网页里的<head>标签中添加如下两句就可以使用fx了(如果已经加载了jQuery的话，仅需要第二行即可):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zarkfx.com/_static/zarkfx.js"></script>

添加如上两句引用代码后，你就可以轻轻松松给你的input标签添加日期选择功能了，比如:


<input type="text" fx="datepicker" />


<input type="text" fx="datepicker[style=dot-luv]" />


<input type="text" fx="datepicker[style=dot-luv;showAnim=clip;]" />


<input type="text" fx="datepicker[style=dot-luv;changeYear;changeMonth;]" />

您可以在此fx的页面中分别把以上代码复制到输入框中，然后点击“Try it”按钮尝试不同的效果：

http://zarkfx.com/auto_gen/datepicker.html

type

Text

5 条回复 • 1970-01-01 08:00:00 +08:00

sdjl

2013-04-02 22:43:20 +08:00

不好意思，刚才测试的时候发现jquery-1.3.2有点bug，暂时请把第一个js的地址改为 http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

你也可以直接保存一下html代码，然后用浏览器打开测试：

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zarkfx.com/_static/zarkfx.js"></script>
</head>
<body>
<input type="text" fx="datepicker" value="" />
</body>
</html>

sdjl

2013-04-02 22:44:22 +08:00

尼玛，上一个又写错了。。。改为 jquery-1.7.2 。。。。。

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

airyland

2013-04-02 22:48:34 +08:00

个人建议，用HTML5的 data- 来命名属性比较规范，我会写成 data-fx

sdjl

2013-04-02 22:51:45 +08:00

@airyland 这个值可以自己改的 :)

sdjl

2013-04-03 15:04:55 +08:00

难道没有人尝试？