基于moment.js的jQuery日期选择器插件

myahuang

已于 2022-03-31 14:10:01 修改

阅读量220

点赞数

文章标签： jquery css

于 2020-12-17 21:16:53 首次发布

本文链接：https://blog.csdn.net/myahuang/article/details/111335189

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于moment.js的jQuery日期选择器插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css">
    <link rel="stylesheet" type="text/css" href="css/calendar.css">
    <style type="text/css">
        .datepicker-content{
            padding: 2em 0;
            height: 300px;
        }
        .datepicker-content label{color: #D5D6E2;}
    </style>
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="htmleaf-container">
    <div class="container">
        <div class="row datepicker-content">
            <div class="col-md-6">
                <label for="singleDateRange">日期选择器</label>
                <input type="text" placeholder="Date picker" id="singleDateRange" >
            </div>
            <div class="col-md-6">
                <label for="rangedate">日期范围选择</label>
                <input type="text" placeholder="Date range picker" id="rangedate">
            </div>

        </div>
    </div>
</div>
<p id="demo" onclick="myFunction()">cbz8000</p>

<script src="js/jquery-3.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/locale/zh-cn.js"></script>
<script src="js/es6.js"></script>
<script>
    'use strict';
    function myFunction() {
        var x = document.getElementById("singleDateRange").value;
        document.getElementById("demo").innerHTML = "您输入了: " + x;
    }
    moment.suppressDeprecationWarnings = true;

    $(function () {
        'use strict';

        $('#singleDateRange').DatePicker({    type: 'date', // || rangedate
            startDate: moment(), //startDate
            endDate: moment(), //endDate
            locale: 'ru',
            format: 'YYYY-MM-DD', //Display date format
            delimiter: '-', // display visual delimiter for rangedate type picker
            ranges: [], //ranges
            modalMode: false, //display center on screen
            firstDayOfWeek: 1, //for rus weekday fix)
            onShow: () => {},
            onHide: () => {}
        });

        $('#rangedate').DatePicker({
            type: 'rangedate',
            startDate: moment().subtract(1, 'week'),
            endDate: moment(),
            ranges: [{
                label: "昨天",
                startDate: moment().subtract(1, 'day'),
                endDate: moment().subtract(1, 'day')
            }, {
                label: '星期天',
                startDate: moment().startOf('week'),
                endDate: moment()
            }, {
                label: '2个星期',
                startDate: moment().startOf('week').subtract(1, 'week'),
                endDate: moment()
            }, {
                label: '这个月',
                startDate: moment().startOf('month'),
                endDate: moment()
            }, {
                label: '下个月',
                startDate: moment().startOf('month').subtract(1, 'month'),
                endDate: moment().startOf('month')
            }, {
                label: '今年',
                startDate: moment().startOf('year'),
                endDate: moment().startOf('moth')
            }]
        });
    });
</script>
</body>
</html>

type：日期选择器的类型。可以是’date’（单日期选择器）或’rangedate’（日期范围选择器）。
startDate：开始日期。
endDate：结束日期。
locale：本地化语言。
format：显示的日期格式。
delimiter：日期范围选择器中两个日期之间的分隔线。
ranges：日期范围。
modalMode：模态窗口模式。
firstDayOfWeek：每个星期的第一天。
onShow：回调函数。
onHide：回调函数。