<head>
//引入相关的css/js
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
// 修改当天日期的样式
.ui-datepicker-today .ui-state-highlight {
border: 1px solid #eee;
color: #f60;
}
//修改日历弹出框的宽度
#ui-datepicker-div {
width: 30%;
}
//修改选定日期的样式
.ui-datepicker-current-day .ui-state-active {
border: 1px solid #eee;
color: #06f;
}
//文本内容居中显示
#test {
text-align: center;
}
</style>
</head>
<body>
日期：<input type="text" id="test" />
<span></span>
<script>
$("#test").datepicker({
dateFormat: 'yy-mm-dd', //指定输出的日期格式
onClose: function(date) { //获取日期后的回调函数
$("span").html(date) //2018-02-03
}
})
</script>
</body>