如何使用简单的jquery datepicker时间控件

一、首先需要准备jar包和样式文件

       我已经准备了一份：    https://fanrui.lanzoui.com/ip6Faqw44e

      下载之后放到项目下合适的位置，我是直接放在webContent下面的css和js文件夹下的。

二、在jsp页面中引入jar包和样式，由于初始控件是英文的，所以加下面一段用来汉化

<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/ >
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#rqi').datepicker();  
    
});  
jQuery(function($){  
    $.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: '年'};  
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);  
});
</script>

表单是这样的

<input type="text" name="rqi" id="rqi" readonly" >

三、最后运行的结果

看起来还不错，要注意的是年和月那一排最左边和最右边有隐藏的调节按钮，用来调整上一月和下一月。

另外如果觉得这个日期控件颜色不合适，还可以自己去下载  https://jqueryui.com/download/

这里可以选择不同的主题