日期选择组件在日常开发中使用还是非常广泛的，jQuery UI Datepicker作为jQuery UI的日期选择组件，不仅使用灵活、主题丰富多样，更因为日常普遍使用jQuery，所以是一个不错的选择。

相关资源引用
到 http://jqueryui.com/download/ 下载相应的脚本及样式，可以下载全部或者选择需要的进行下载；另外还可以到 http://github.com/jquery/jquery-ui 下载它的所有源码。

对于在中文的呈现，还需要额外的一个脚本： https://github.com/jquery/jquery-ui/blob/master/ui/i18n/jquery.ui.datepicker-zh-CN.js

由于jQuery UI使用了em作为单位，直接在网页中使用，会变得巨大无比，所以需要额外附加一点样式(这里命名为jqueryui-fakes.css)：

body { font-size: 12px; }
.ui-widget { font-size: 1em; }
.ui-datepicker { font-size: 11px; }
  .ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { width: auto; }

最终引入的资源如下：

<link href="css/jquery-ui/cupertino/jquery-ui-1.9.0.custom.min.css" rel="stylesheet" />
<link href="css/jqueryui-fakes.css" rel="stylesheet" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui-1.9.0.custom.min.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.min.js"></script>

使用方法
jQuery UI Datepicker使用非常简单，首先在页面中有文本框作为目标：

<input type="text" name="lwme" class="dp" />

默认情况下只需要在DOMLoaded调用datepicker方法即可：

$(function() {
  $(".dp").datepicker();
使文本框只读 
 这里需要注意，如果文本框不允许输入的话，需要设置readonly属性：
 
$(".dp").prop("readOnly", true).datepicker();
 
另外还需要注意，如非必要，不要直接在文本框的html属性上设置readonly(特别是asp.net TextBox)，否则后台可能不能正常获取。
 
控制输入的字符 
 开启constrainInput属性，就可以控制文本框的输入只能为dateFormat属性中规定的(没启用readonly情况下)：
 
$(".dp").datepicker({ constrainInput: true });
 
显示年、月选择框 
 默认情况下选择年、月比较麻烦，这里可以开启两个属性是年、月变为下拉框选择：
 
$(".dp").datepicker({ changeMonth: true, changeYear: true });
 
另外还可以把年下拉框显示在月下拉框之前：
 
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true });
 
设置选择的年的范围，可以是具体的年份或者是特定的格式：
 
1."-nn:+nn"相对于当前年份，当前2012年，如"-5:+5"就是从2007-2017范围
2."c-nn:c+nn"相对于选中的年份，如选中2013，"c-5:c+5"就是从2008-2018范围
3."nnnn:nnnn"直接指定年份，如"2010-2013"
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "-5:+5" });
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "c-5:c+5" });
$(".dp").datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, yearRange: "2010:2013" });
 
显示日期的格式 
 通过设置dateFormat属性来实现，分别用yy、mm、dd来表示年、月、日；默认值为mm/dd/yy，中文环境下一般设置为：
 
$(".dp").datepicker({ dateFormat: "yy-mm-dd" });
 
控制日期范围 
 通过minDate/maxDate来设置可以选择的日期范围，可以是日期类型；
 
或者是特定的格式，使用三个字符来表示：
 
1.第一个字符为+或-
2.第二个字符为数字
3.第三个字符表示单位如y,m,w,d表示年、月、周、天，可以拼出N中结果如："+1y" "-1m"
4.而且可以叠加，只要中间空格隔开即可如："+1m +1w +2d"表示一个月+一周+两天
$(".dp").datepicker({ maxDate: "+1m +1w +1d", minDate: "-1d" });
$(".dp").datepicker({ maxDate: new Date(2012,12,21), minDate: new Date(2012,12,08) });
 
显示今天及确定按钮
 
$(".dp").datepicker({ showButtonPanel: true });
 
还可以设置点击今天调到当前月份的日历视图：
 
$(".dp").datepicker({ showButtonPanel: true, gotoCurrent: true });
 
其他属性就不再一一展示了，请直接看官方API文档：http://api.jqueryui.com/datepicker/
 
选择时间功能 
 jQuery UI Datepicker没有提供选择时间功能，不过有人基于jQuery UI Datepicker创造了timepicker：http://trentrichardson.com/examples/timepicker/
 
可以从https://github.com/trentrichardson/jQuery-Timepicker-Addon获取它的最新版本
 
资源引入 
 除了需要引入上面jQuery UI Datepicker使用的资源以外，还需要一下资源：
 
<link href="js/timepicker-addon/jquery-ui-timepicker-addon.css" rel="stylesheet" />
<script src="js/timepicker-addon/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/timepicker-addon/jquery-ui-timepicker-zh-CN.min.js"></script>
 
使用方法 
 它的功能分为两部分：一种是可以同时选择日期和时间的datetimepicker，另一种是只能选时间的timepicker
 
$(".dp").datetimepicker();
$(".dp").timepicker();
 
参数设置 
 它也有自己的一些参数可以设置，这里仅列出重要的：
 
1.timeFormat 设置时间格式，其中两个相同字母的表示不足两位补0
    1.H/HH：24小时
    2.h/hh：12小时
    3.m/mm：分钟
    4.s/ss：秒钟
    5.l：毫秒
    6.t/tt,T/TT：设置AM/PM即上午/下午
    7.z：时区
2.defaultTimezone：默认时区"+0000"
3.showHour/showMinute/showSecond/…showTimezone/showTime分别设置是否显示相应选择
4.stepHour/stepMinute/StepSecond…分别设置拖动滑块时增减的数值
5.maxDateTime/minDateTime：控制时间范围
6.controlType：控件类型："select"(下拉选择)、"slide"(拖动滑块，默认)
格式化输入 
 有时候可能会需要可以选择也可以输入，这时候可以额外附加脚本：http://www.meiocodigo.com/projects/meiomask/或者是其他有mask功能的组件
 
定义好mask格式：
 
$(".dp").datepicker().setMask("9999-19-39")
 
因项目中用到，整理一下。
                    日期选择组件在日常开发中使用还是非常广泛的，jQuery UI Datepicker作为jQuery UI的日期选择组件，不仅使用灵活、主题丰富多样，更因为日常普遍使用jQuery，所以是一个不错的选择。相关资源引用 到http://jqueryui.com/download/下载相应的脚本及样式，可以下载全部或者选择需要的进行下载；另外还可以到http://github.com/jquer...
jQuery UI Datepicker日期选择插件很好用了，只不过只能精确到日，不能选择时间（小时分钟秒）很遗憾，而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。
官网地址：http://trentrichardson.com/examples/timepicker/
官网demo下载：https://...
				
jquery-ui-日期框扩展成时间框 jquery-ui时间框
基于别人的代码进行修改
jquery-ui-1.8.16.custom.css文件末尾加入以下代码
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
页面引入汉化
去掉该行，全英文。格式也好了很多！
期待后续的高手修改
该资源来自于网上一哥们
				
Ant Design Vue是一个很受欢迎的UI框架，其中的DatePicker日期选择器主要是用于日期的选择。如果你希望将它中文化，只需要在引入时，导入moment.js库，然后调用locale方法即可。
具体做法如下：
1.首先安装moment.js库
npm install moment -S
2.在需要使用DatePicker的Vue组件中，先引入moment.js和DatePicker组件
import moment from 'moment';
import { DatePicker } from 'ant-design-vue';
3.将moment.js的语言设置为中文
moment.locale('zh-cn');
4.使用时调用DatePicker的locale属性，并将值设置为zhCN
<DatePicker :locale=“zhCN” />
这样DatePicker组件就可以显示中文了。
除了DatePicker组件，Ant Design Vue还提供了很多其他的UI组件和工具，如果需要将它们中文化，可以按照上述方法设置moment.js语言和对应的locale属性即可。