datepicker日期控件

示例文件下载：https://files.cnblogs.com/files/ixixi/datepicker-%E7%A4%BA%E4%BE%8B.rar

1 所必须的支撑引入（文件都在上面链接中下载可以获取）：

  1. jquery-1.9.1.js
  2. jquery.ui.core.js
  3. jquery.ui.datepicker.js
  4. jquery.ui.datepicker-zh-CN.js（自定义的jquery插件）
  5. jquery-ui.min.css
  6. jquery.ui.theme.css（灰白色框）或jquery-ui.theme.min.css（橘黄色框）

2 jquery.ui.datepicker-zh-CN.js自定义插件：

jQuery(function($){
    var getDateNow = function(){
         var now = new Date();
         var seperator = "-";
         var year = now.getFullYear();
         var month = now.getMonth() + 1;
         var date = now.getDate();
         if (month >= 1 && month <= 9) {
             month = "0" + month;
         }
         if (date >= 0 && date <= 9) {
             date = "0" + date;
         }
         var dateNow = year + seperator + month + seperator + date;
         return dateNow;
    };
    $.datepicker.regional['zh-CN'] = {
        closeText: '关闭',
        prevText: '上月',
        nextText: '下月',
        currentText: '今天',
        monthNames: ['一月','二月','三月','四月','五月','六月',
        '七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一','二','三','四','五','六',
        '七','八','九','十','十一','十二'],
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        weekHeader: '周',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年',
        defaultDate:getDateNow(),
        numberOfMonths:1,//显示几个月
         showButtonPanel:false//不显示关闭按钮
    };
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

3 页面引用与生成日期控件：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    response.setHeader("Cache-Control", "no-cache,no-strore");
    response.setHeader("Pragma", "no-cache");
    response.setDateHeader("Expires", -1);
%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<c:set var="jsBasePath" value="${contextPath}/js" />
<c:set var="cssBasePath" value="${contextPath}/css" />
<c:set var="imagesBasePath" value="${contextPath}/images" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="${jsBasePath}/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.core.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="${jsBasePath}/jquery.ui.datepicker-zh-CN.js"></script>
<link href="${cssBasePath}/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<!-- 橘黄清新版 -->
<%-- <link href="${cssBasePath}/jquery-ui.theme.min.css" rel="stylesheet" type="text/css" /> --%>
<!-- 灰色素雅版 -->
<link href="${cssBasePath}/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<title>日期控件测试</title>
 <script>
     $(document).ready(function() {   
         $('#testDate').datepicker();//基础初始化日期控件
         /**
         $('#testDate').datepicker(//自定义参数初始化日期控件
             {
                  //minDate:getDateNow(),//设置最小显示日期  
                //maxDate:'2018-03-20',//设置最大显示日期  
                //选择日期后执行的操作  
                //onSelect: function(selectedDate) {
                    //alert(selectedDate);  
                //}  
             }
         );
         **/
     }); 
 </script>
</head>
<body>
<input type="text" name="testDate" id="testDate"  readonly="readonly"/>
</body>
</html>

4 效果图：

 

posted @ 2018-02-12 16:13  稚语希听  阅读(178)  评论(0)    收藏  举报