datepicker
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="datepicker,前端路迹,秦申学的个人博客"/>
    <meta name="keywords" content="datepicker,前端路迹,秦申学的个人博客,个人博客,个人网站,web前端,JavaScript,css,html"/>
    <meta name="baidu-site-verification" content="dOoP4XkgY3"/>
    <meta name="google-site-verification" content="nm8-PjoCRsr_JTKeSrSiq089X_gPq3lrNALTSlB-MEQ"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="http://www.qinshenxue.com/static/img/favicon.ico"/>
    <title>日期选择控件datepicker</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="dist/datepicker.min.css">
    <style>
        .first {
            background-color: #007FC3;
        }

        .wrap {
            padding: 50px 0;
        }

        body, input, select, textarea {
            font-family: Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", STHeiti, "华文细黑", sans-serif;
        }

        section {
            padding: 50px 0;
        }

        .plugin-title {
            font-size: 80px;
            text-align: center;
            color: #fff;
            font-family: arial, sans-serif;
        }

        .plugin-desc {
            text-align: center;
            font-size: 20px;
            color: #fff;
            font-family: '黑体';
        }

        .list-group-item-heading {
            margin: 5px 0 15px;
            color: #007FC3;
        }

        .key {
            color: #888;
            font-weight: bold;
        }

        .osc_git_issues {
            display: none;
        }

        .osc_git_title {
        }

        .osc_git_box {
            border: 0 !important;
        }

        .osc_git_box .split {
            margin: 0 -15px !important;
        }
    </style>
</head>
<body>


<section class="first">
    <div class="container">
        <h1 class="plugin-title">datepicker</h1>
        <h4 class="plugin-desc">jQuery插件，简单小巧（5k），满足基本需求。</h4>

        <div class="wrap">
            <div class="row">
                <div class="input-group col-md-4 col-md-offset-4">
                    <input id="demo" type="text" class="form-control" placeholder="选择日期" readonly
                           aria-describedby="icon-datepicker">
                    <!--<span class="input-group-addon" id="datepicker-trigger"><span class="glyphicon glyphicon-calendar"></span></span>-->
                </div>
            </div>
        </div>
    </div>
</section>


<section>
    <div class="container">

        <div class="row">

            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading">配置项</div>
                    <div class="list-group">

                        <div class="list-group-item">
                            <h2 class="list-group-item-heading">weekStart</h2>

                            <p><span class="key">&emsp;定义：</span>一周从星期几开始</p>

                            <p><span class="key">值类型：</span>number</p>

                            <p><span class="key">默认值：</span>1（星期一）</p>

                            <p><span class="key">可选值：</span>0（星期日）、1（星期一）、2、3、4、5、6</p>

                        </div>

                        <div class="list-group-item">
                            <h2 class="list-group-item-heading">yearRange</h2>

                            <p><span class="key">&emsp;定义：</span>选择年份的跨度，[-6,6]即[当前年份-6,当前年份+6]</p>

                            <p><span class="key">值类型：</span>Array</p>

                            <p><span class="key">默认值：</span>[-6,6]</p>

                            <p><span class="key">&emsp;举例：</span>如果当前年份为2016，那么[-6,6]即[2010,2022]，那么[0,10]即[2016,2026]
                            </p>

                        </div>
                        <div class="list-group-item">
                            <h2 class="list-group-item-heading">format</h2>

                            <p><span class="key">&emsp;定义：</span>日期的格式</p>

                            <p><span class="key">值类型：</span>string</p>

                            <p><span class="key">默认值：</span>yyyy-mm-dd</p>

                            <p><span class="key">&emsp;说明：</span>yyyy年，mm月，dd天，可根据自己需要随意组合。比如yyyy/mm/dd、mm/dd/yyyy、dd-mm-yyyy
                            </p>

                        </div>
                        <div class="list-group-item">
                            <h2 class="list-group-item-heading">lang</h2>

                            <p><span class="key">&emsp;定义：</span>指定插件语言</p>

                            <p><span class="key">值类型：</span>string</p>

                            <p><span class="key">默认值：</span>zh_CN（中文）</p>

                            <p><span class="key">可选值：</span>zh_CN，en_US</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">Git@OSC</div>
                    <div class="panel-body">
                        <script src='https://git.oschina.net/qinshenxue/datepicker/widget_preview'></script>
                    </div>
                </div>
            </div>
        </div>


    </div>
</section>


<script src="//cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<script src="dist/datepicker.min.js"></script>

<script>
    $('#demo').datepicker();


    var _hmt = _hmt || [];
    window.onload = function () {
        setTimeout(function () {
            (function () {
                var hm = document.createElement("script");
                hm.src = "//hm.baidu.com/hm.js?fd951fac9710ff77ff3b7ae3a70f637a";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        }, 100);
    }
</script>

</body>
</html>