JQuery日历 日期选择
效果
下载
jquery.min.js
jquery-ui.min.js
如有需要最新版，可去jQuery官网下载
代码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<style>
body {
font-size: 12px;
line-height: 1.5;
color: #333;
font-family: Tahoma,'microsoft yahei',Simsun,sans-serif;
background-color: #fff;
padding: 100px 0 0 100px
}
a {
text-decoration: none;
color: inherit;
}
.date-input {
width: 80px;
height: 22px;
padding: 2px 5px;
margin-left: 10px;
text-align: center;
}
.ui-datepicker-header {
height: 30px;
color: #333;
background: #1badda;
}
/* 修改当天日期的样式 */
.ui-datepicker-today{
color: #fff;
background: #dfe5e7;
color: #000;
}
/* 修改选定日期的样式 */
.ui-datepicker-current-day{
color: #fff;
background: #1badda;
}
.ui-datepicker-calendar {
border-spacing: 1px;
text-align: center;
}
/* 设置列表宽度 */
.ui-datepicker-calendar th,
.ui-datepicker-calendar td{
width: 30px;
border: 1px solid #dfe5e7;
}
/* 没有显示的单元格样式 */
.ui-state-disabled {
color: #aaa;
}
.ui-datepicker-title {
line-height: 30px;
text-align: center;
}
.ui-datepicker-next,
.ui-datepicker-prev {
float: left;
height: 16px;
width: 16px;
margin: 7px 0 7px 10px;
cursor: pointer;
}
.ui-datepicker-next {
float: right;
margin: 7px 10px 7px 0;
}
.ui-icon {
display: block;
overflow: hidden;
text-indent: -99999px;
background-repeat: no-repeat;
}
.ui-datepicker-prev .ui-icon{
background-image: url(img/ui-icons_256x240.png);
background-position: -80px -192px;
}
.ui-datepicker-next .ui-icon{
background-image: url(img/ui-icons_256x240.png);
background-position: -48px -192px;
}
</style>
</head>
<body>
<div class="mian-weekend">
<input type="text" readonly="readonly" class="date-input" id="NowDate">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function(){
var date = new Date();
var year = date.getFullYear();//年
var month = date.getMonth() + 1;//月
var day = date.getDate();//日
var NowDate = document.getElementById('NowDate');
NowDate.value = year+"-"+month+"-"+day;
$('#NowDate').datepicker({
altField: '#NowDate',//指定input输出域
showOtherMonths: true,//填充没有显示的单元格
dateFormat: 'yy-mm-dd',//日期格式
dayNamesMin: ['日','一','二','三','四','五','六'],//星期格式
monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']//月份格式
});
})
</script>
</body>
</html>
有什么可以修改 的还请留言评论，关于怎么不用JQuery提供的方法获取ID，希望大家不要嘲笑，我不会JQuery，为什么？怎么会不会呢，不会你还出什么博客，抱歉，因为需要，现学的，所以才叫大家有什么可以改进的，多多评论（QAQ）