zoukankan      html  css  js  c++  java
  • jQuery插件datepicker的使用详解

    jQuery插件datepicker的使用详解

    分类: 学习笔记 jquery 363人阅读 评论(0) 收藏 举报

      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. <script language="javascript">
    2. $(document).ready(function() {  
    3.        $('#dateinput').datepicker();  
    4.    });  
    5. </script>

    这样就基本完成一个日期输入文本域了,但是是英文的,根据不同的MIS系统,有的目标人群是上了年级的用户,建议将界面改成中文,可以如此操作,稍微改动一下刚刚的函数,like this:

    <script type="text/javascript" charset="utf-8">
                jQuery(function($){
                    $.datepicker.regional['zh-CN'] =

         {

            clearText: '清除', clearStatus: '清除已选日期',
            closeText: '关闭', closeStatus: '不改变当前选择',
            prevText: '&lt;上月', prevStatus: '显示上月',
            nextText: '下月&gt;', nextStatus: '显示下月',
            currentText: '今天', currentStatus: '显示本月',
            monthNames: ['一月','二月','三月','四月','五月','六月',
            '七月','八月','九月','十月','十一月','十二月'],
            monthNamesShort: ['一','二','三','四','五','六',
            '七','八','九','十','十一','十二'],
            monthStatus: '选择月份', yearStatus: '选择年份',
            weekHeader: '周', weekStatus: '年内周次',
            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
            dayNamesMin: ['日','一','二','三','四','五','六'],
            dayStatus: '设置 DD 为一周起始', dateStatus: '选择 m月 d日, DD',
            dateFormat: 'yy-mm-dd', firstDay: 1,
            initStatus: '请选择日期', isRTL: false

       };


               $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

               $("#dateinput").datepicker();
                   
             });
            </script>



    每一天都要行动,在前进中寻求卓越。
  • 相关阅读:
    理解闭包Closure
    理解商集
    理解格
    理解距(数学)
    微积分英文词汇,高数名词中英文对照,高等数学术语英语翻译一览
    对Extjs中store的多种操作
    mysql中的除法取整
    【python】用asq实现count(distinct cln)
    Timer 和TimerTask的使用
    使用vim.rc配置vim
  • 原文地址:https://www.cnblogs.com/wshsdlau/p/2868872.html
Copyright © 2011-2022 走看看