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工具。