jQuery Tools Dateinput使用介绍

帮助文档:传送门
html


代码如下:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools dateinput demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="./jquery.tools.date-zh-CN.js"></script>
<link rel="stylesheet" type="text/css"
href="http://jquerytools.org/media/css/dateinput/large.css"/>
<!-- some overrides -->
<style>
.date { width: 357px; }
#calhead { padding-left: 95px; }
#caltitle { background-color: #fff;}
#calnext { float:left; }
</style>
</head>
<body><!-- 0 value will display the current date formatted with the default
formatter -->
<div style="width:360px; margin:0 auto;">
<input type="date" name="test" value="0" />
</div>
<script>
$(function () {
$(":date").dateinput({
lang: 'zh-CN',
format: 'dddd dd, mmmm yyyy',
offset: [30, 0]
});
})
</script>
</body>
</html>

CSS
我直接用他们的
http://jquerytools.org/media/css/dateinput/large.css
汉化：
query.tools.date-zh-CN.js


代码如下:

jQuery(function () {
$.tools.dateinput.localize("zh-CN", {
months: '一月,二月,三月,四月,五月,六月,七月,' +
'八月,九月,十月,十一月,十二月',
shortMonths: '一,二,三,四,无,六,七,' +
'八,九,十,十一,十二',
days: '星期日,星期一,星期二,星期三,星期四,星期五,星期六',
shortDays: '日,一,二,三,四,五,六'
});
});

名称不区分大小写，所以zh-CN就要lang: 'zh-CN'
这篇就这样简单完结了吧。其他的控件如果用mvc开发，mvc有自带的提示错误等等。jQuery-Tools这系列就翻译一些大家经常要用的jQuery工具。

赞 (0)

相关推荐

  • jQuery Tools tab(幻灯片)

    jQuery Tools tab(幻灯片)

    html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jQuery Tools tooltip使用说明

    HTML 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

  • jquery tools 系列 scrollable（2）

    jquery tools 系列 scrollable（2）

    scrollable提供的一系列获取scrollable对象的方法具体使用方式如下: 复制代码 代码如下: var scrollable=$("div.scrollable").scrollable();     //alert(scrollable.getConf().prev);//获取配置对象中的prev属性     scrollable.getConf().speed=200;//设置配置对象的speed属性     //alert(scrollable.getIndex())

  • jquery tools之tabs 选项卡/页签

    虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了

  • jquery tools之tooltip

    如tabs的学习,首先给出操作的html目标代码: 复制代码 代码如下: <form id="myform"> <h3> Registration Form</h3> <!-- username --> <label for="username">Username</label> <input id="username" /> <div class=&quo

  • jquery tools系列 overlay 学习第1/2页

    如scrollable的学习,首先给出操作的html目标代码: 复制代码 代码如下: <button rel="#overlay">Open overlay</button> <button rel="#overlay2">Other overlay</button> <div class="overlay" id="overlay">     <h2 styl

  • jquery tools 系列 scrollable学习

    复制代码 代码如下: <!-- navigator --> <div class="navi"></div> <!-- prev link --> <a class="prev"></a> <!-- root element for scrollable --> <div class="scrollable"> <div id="thu

  • jquery tools系列 expose 学习

    如overlay的学习,首先给出操作的html目标代码: 复制代码 代码如下: <div id="test">     expose test! </div> <div style="margin:0 auto;width:300px">     <img src="http://flowplayer.org/tools/img/expose/ball_large.png" id="ball&q

  • jQuery Tools tab使用介绍

    先给个官方例子.可以先弄出来看看效果 html 复制代码 代码如下: <!DOCTYPE html> <html> <!-- This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ --> <head> <title>jQuery Tools standalone demo</title> &

  • jQuery Tools Dateinput使用介绍

    帮助文档:传送门 html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools dateinput demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></s

  • jQuery trigger()方法用法介绍

    jQuery的trigger()方法用法介绍: 此方法可以触发匹配元素上指定类型的事件. 它具有两种语法格式,下面就分别做一下介绍. 语法结构一: 复制代码 代码如下: $(selector).trigger(event,[param1,param2,...]) 参数解析: 1.event:必需,规定匹配元素要触发的事件,可以是自定义事件,也可以是标准的事件. 2.param:可选,传递给事件处理函数的参数. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&

随机推荐