lightpick.js是一款日期范围选择插件-BFW插件库

lightpick.js是一款日期范围选择插件

lightpick.js是一款日期范围选择插件，需要结合moment插件一起使用。

使用方式：

第一步引入插件及样式

第二步准备dom

<input type="text" id="demo" class="form-control form-control-sm" />

第三步配置参数

 new lightPick({
            field: document.getElementById('demo'),//元素
            lang: 'zh',//语言
            numberOfMonths: 2,//选择几个月份
            numberOfColumns: 3,//几列
            singleDate: false,//是否选择单个日期
            onSelect: function(start, end) {//选择回调
                document.getElementById('result').innerHTML = rangeText(start, end)
            }
        });

完整示例代码

<!DOCTYPE html>
<html>

<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, shrink-to-fit=no" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lightpick.css">
</head>

<body>

    <div class="container">
        <h1>lightPick.js</h1>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-5">
                        <p id="result"></p><input type="text" id="demo" class="form-control form-control-sm" /></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment-with-locales.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lightpick.js"></script>
    <script>
        function rangeText(start, end) {
            var str = '';
            str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
            str += end ? end.format('Do MMMM YYYY') : '...';
            return str
        }
        new lightPick({
            field: document.getElementById('demo'),
            lang: 'zh',
            numberOfMonths: 2,
            numberOfColumns: 3,
            singleDate: false,
            onSelect: function(start, end) {
                document.getElementById('result').innerHTML = rangeText(start, end)
            }
        });
    </script>
</body>

</html>

lightpick.js是一款日期范围选择插件

网友评论0

colpick.js

jcdate.js

laydate.js

PCASClass.js

distpicker.js

mPicker.js

calendar.js

jquery.range.js

Mdate.js

dateRange.js