lightPickjs：使用原生js实现的日期范围选择器

共5个文件

js：2个

css：2个

html：1个

需积分: 15 0 下载量 81 浏览量 2023-02-11 10:37:15 上传评论收藏 84KB RAR 举报

温馨提示

lightPickjs： 1. 使用原生js实现的时间选择器； 2. 适用于一些使用纯JavaScript技术开发的老项目； 3. 功能是实现日期范围的选择 10/02/2023 - 12/02/2023； 4. 配置参数可以在互联网上搜索

资源推荐

资源详情

资源评论

收起资源包目录

日期范围选择插件lightPickjs.rar （5个子文件）

bootstrap.min.css 157KB

dist

lightpick.js 23KB

lightpick.css 4KB

moment-with-locales.min.js 319KB

index.html 2KB

共 5 条

<!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" /> <title>日期范围选择插件lightPick.js</title> <link rel="stylesheet" href="bootstrap.min.css" /> <link href="dist/lightpick.css" rel="stylesheet" type="text/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 src="moment-with-locales.min.js"></script> <script src="dist/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: 'en', numberOfMonths: 2, numberOfColumns: 3, singleDate: false, onSelect: function (start, end) { document.getElementById('result').innerHTML = rangeText(start, end); } }); </script> </body> </html>

评论收藏

内容反馈