Jquery添加datepicker时间插件

一、下载Jquery-ui：

　　（1）下载教程：https://www.runoob.com/jqueryui/jqueryui-download.html

　　（2）下载地址：https://jqueryui.com/download/all/（上一个的下载地址可能不成功）

二、解压，将对应的js,css导入项目

　　（1）解压结果示例：

       

 

 

　　（2）jsp引入示例：也可以不导入压缩版（min.js/min.css）

　　<link rel="stylesheet" type="text/css" href="<c:url value='/css/jquery-ui.min.css'/>">

    <script type="text/javascript" src="<c:url value='/js/jquery.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/js/jquery-ui.min.js'/>"></script>

　　（3）注意点1：ui.js和ui.css最好配对导入；query.js最好使用压缩包附带的，避免版本问题造成的错误。

　　（4）注意点2：导入样式需要的图片。

　　　　》导入方式1：自定义位置，需要去跟踪源码

　　　　》导入方式2：根据错误提示建立图片放置位置（我使用的是这个。。。方便）。通常他都会有默认位置。

三、使用datepicker：

　　（1）绑定事件：绑定onfocus或onclick事件。

　　演示：

jsp代码：

<input type="text" name="sr" id="sr" class="input02"  onfocus="setTime();" readonly="readonly">

js代码：

 function setTime() {
            $(".input02").datepicker({
                numberOfMonths:1,   /!*设置显示几个月*!/
                showButtonPanel:true,  /!*是否显示按钮面板*!/
                prevButton: true,  /!* 是否显示上个月按钮*!/
                nextButton:true,   /!* 是否显示下月按钮*!/
                dateFormat:'yy-mm-dd',    /!*日期格式*!/
                clearText:"清除",     /!*清除日期的按钮名称*!/
                closeText:"关闭",    /!*关闭按钮的名称*!/
                prevText:'<上月', /!*上月按钮*!/
                nextText:'下月>', /!*下月按钮*!/
                yearSuffix:'年',    /!* 年的后缀*!/
                showMonthAfterYear:true,    /!*是否把月放在年的后面*!/
                monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], /!*月的名称*!/
                monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],  /!*月的简称*!/
                dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  /!* 星期几的名称和顺序*!/
                dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'], /!*星期的简称*!/
                dayNamesMin:['日','一','二','三','四','五','六'] /!* 最简称*!/
            });
        }

　　问题：无论是onfocus事件还是onclick事件，第一次点击不显示选择框，第二次点击才显示选择框。网页查看源码时，在在第一次点击的时候会在源码中动态加载datepicker的显示模块，第二次点击时，模块才会被真正调用

　　网上查到的原因是：第一次点击是实例化日期组件，第二次开始才是操作日期组件，所以应该直接调用组件。

　　（2）不绑定事件：对绑定事件bug的补救

　　演示：

　　

$(function () {
    $(".input02").datepicker({
        numberOfMonths:1,   /*设置显示几个月*/
        showButtonPanel:true,  /*是否显示按钮面板*/
        prevButton: true,  /* 是否显示上个月按钮*/
        nextButton:true,   /* 是否显示下月按钮*/
        dateFormat:'yy-mm-dd',    /*日期格式*/
        clearText:"清除",     /*清除日期的按钮名称*/
        closeText:"关闭",    /*关闭按钮的名称*/
        prevText:'<上月', /*上月按钮*/
        nextText:'下月>', /*下月按钮*/
        yearSuffix:'年',    /* 年的后缀*/
        showMonthAfterYear:true,    /*是否把月放在年的后面*/
        monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], /*月的名称*/
        monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],  /*月的简称*/
        dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  /* 星期几的名称和顺序*/
        dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'], /*星期的简称*/
        dayNamesMin:['日','一','二','三','四','五','六'] /* 最简称*/
    });
});

 

四、datepicker参数设置：

　　我的演示：

 $(".input02").datepicker({
        numberOfMonths:1,   /*设置显示几个月*/
        showButtonPanel:true,  /*是否显示按钮面板*/
        prevButton: true,  /* 是否显示上个月按钮*/
        nextButton:true,   /* 是否显示下月按钮*/
        dateFormat:'yy-mm-dd',    /*日期格式*/
        clearText:"清除",     /*清除日期的按钮名称*/
        closeText:"关闭",    /*关闭按钮的名称*/
        prevText:'<上月', /*上月按钮*/
        nextText:'下月>', /*下月按钮*/
        yearSuffix:'年',    /* 年的后缀*/
        showMonthAfterYear:true,    /*是否把月放在年的后面*/
        monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], /*月的名称*/
        monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],  /*月的简称*/
        dayNames:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  /* 星期几的名称和顺序*/
        dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'], /*星期的简称*/
        dayNamesMin:['日','一','二','三','四','五','六'] /* 最简称*/
    });

 

五、我的效果：

 

 

参考博客：

　　（1）事件绑定问题解决：

　　　　　　》https://segmentfault.com/q/1010000006846663

　　（2）参数设置：

　　　　　　》https://www.jb51.net/article/80403.htm

　　　　　　》https://www.cnblogs.com/qinmengjiao123-123/p/6808463.html