JQuery日历 日期选择

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）