jQuery插件datepicker的使用详解

  1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后下载datepicker(内含jQuery1.2.6_min)


2.在HTML中引用下载下来的两个js:

  1. <script language="javascript" src="js/jquery-1.2.6.min.js">script>
  2. <script language="javascript" src="js/ui.datepicker.js">script>

    3.在HTML中引入默认样式表文件,这个文件也在刚刚的压缩包中,如果在官网下载,首页就有这个CSS文件下载,也可选择其他皮肤的CSS:

  1. <link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

    4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。

  1. <input id="dateinput" type="text" readonly="readonly"/>

    5.编写js代码,实现最终效果。

  1. "javascript">
  2. $(document).ready(function() {  
  3.        $('#dateinput').datepicker();  
  4.    });  
这样就基本完成一个日期输入文本域了,但是是英文的,根据不同的MIS系统,有的目标人群是上了年级的用户,建议将界面改成中文,可以如此操作,稍微改动一下刚刚的函数,like this:



你可能感兴趣的:(学习笔记,jquery)