Jquery UI 中的datepicker() ,获取日期后的回调函数onClose()

时间:2024-10-14 14:36:14

<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>