DateRangePicker CDN 是什么?如何使用它?

引入DateRangePickerCDN链接如下:,,“html,,,,,,

1、CDN引入

daterangepicker cdn

jQuery库<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

Moment.js库<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

Bootstrap CSS文件<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">

Daterangepicker CSS文件<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">

Daterangepicker JavaScript文件<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

2、基本使用

   <input type="text" name="daterange">
   <script type="text/javascript">
       $('input[name="daterange"]').daterangepicker();
   </script>

3、配置选项

daterangepicker cdn
   $('input[name="daterange"]').daterangepicker({
       locale: {
           format: 'YYYY-MM-DD'
       },
       startDate: '2013-01-01',
       endDate: '2013-12-31'
   });

4、高级配置

参数名 类型 描述
startDate Date对象, moment对象或string类型 初始化日期范围选中的开始时间
endDate Date对象, moment对象或string类型 初始化日期范围选中的结束时间
minDate Date对象, moment对象或string类型 用户可以选择的最早时间
maxDate Date对象, moment对象或string类型 用户可以选择的最晚时间
dateLimit object类型 选中的开始和结束日期之间最大时间间隔,可以是能添加到moment对象的任何属性(如days, months)
showDropdowns boolean类型 在日历上面显示年和月的下拉框,选中后将跳到指定的年和月
showWeekNumbers boolean类型 在日历上每周开始的地方显示本地化的周编号
timePicker boolean类型 允许选择日期和时间,而不是局限于日期
timePickerIncrement number类型 时间选择框中分钟列的增加步长,单位为分钟
timePicker24Hour boolean类型 使用24小时制来代替12小时制,同时删除AM/PM选择框
timePickerSeconds boolean类型 在时间选择框中显示秒选择列
ranges object类型 设置用户可以选择的预定义日期范围,每个键名即范围的标签名,对应值是两个日期组成的数组表示范围界限

通过以上介绍,可以更好地理解和使用daterangepicker插件,从而在项目中实现更灵活、更丰富的日期选择功能。

以上就是关于“daterangepicker cdn”的问题,朋友们可以点击主页了解更多内容,希望可以够帮助大家!

原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1285677.html

本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。

(0)
未希新媒体运营
上一篇 2024-11-10 23:18
下一篇 2024-11-10 23:19

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

产品购买 QQ咨询 微信咨询 SEO优化
分享本页
返回顶部
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购 >>点击进入