bootstrap之双日历时间段选择控件示例—daterangepicker(中文汉化版)
2023-09-14 08:57:26 时间
效果图:
参考代码:
<link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" type="text/css" /> <script src="/js/date-time/moment.js?ver=0.6" type="text/javascript"></script> <script src="/js/date-time/daterangepicker.zh-CN.js?ver=0.6" type="text/javascript"></script> <script src="/js/date-time/daterangepicker.js?ver=0.6" type="text/javascript"></script> <div class="input-group" style="width: 240px; margin-left: -5px;"> <input type="text" class=&qu·ot;form-control date-picker" id="dateTimeRange" value="" /> <span class="input-group-addon"> <i class="fa fa-calendar bigger-110"></i> </span> <input type="hidden" name="beginTime" id="beginTime" value="" /> <input type="hidden" name="endTime" id="endTime" value="" /> </div> <a href="javascript:;" onclick="begin_end_time_clear();">清除</a> <script type="text/javascript"> $(function() { $('#dateTimeRange').daterangepicker({ applyClass : 'btn-sm btn-success', cancelClass : 'btn-sm btn-default', locale: { applyLabel: '确认', cancelLabel: '取消', fromLabel : '起始时间', toLabel : '结束时间', customRangeLabel : '自定义', firstDay : 1 }, ranges : { //'最近1小时': [moment().subtract('hours',1), moment()], '今日': [moment().startOf('day'), moment()], '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')], '最近7日': [moment().subtract('days', 6), moment()], '最近30日': [moment().subtract('days', 29), moment()], '本月': [moment().startOf("month"),moment().endOf("month")], '上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")] }, opens : 'right', // 日期选择框的弹出位置 separator : ' 至 ', showWeekNumbers : true, // 是否显示第几周 //timePicker: true, //timePickerIncrement : 10, // 时间的增量,单位为分钟 //timePicker12Hour : false, // 是否使用12小时制来显示时间 //maxDate : moment(), // 最大时间 format: 'YYYY-MM-DD' }, function(start, end, label) { // 格式化日期显示框 $('#beginTime').val(start.format('YYYY-MM-DD')); $('#endTime').val(end.format('YYYY-MM-DD')); }) .next().on('click', function(){ $(this).prev().focus(); }); }); /** * 清除时间 */ function begin_end_time_clear() { $('#dateTimeRange').val(''); $('#beginTime').val(''); $('#endTime').val(''); } </script>
Daterangepicker 中文汉化版 完整 Demo 下载
相关文章
- html分页样式居中,bootstrap分页样式怎么实现?
- bootstrap-datepicker限定可选时间范围
- Bootstrap【第二章】—全局CSS之排版、代码、表格
- bootstrap使用教程_bootstrap 教程
- Bootstrap使用及环境搭建详解
- 基于flask和bootstrap-table的通用数据查询
- Bootstrap Studio 4 for Mac(响应式网页设计工具)
- MySQL Error number: MY-011696; Symbol: ER_GRP_RPL_FAILED_TO_BOOTSTRAP_EVENT_HANDLING_INFRASTRUCTURE; SQLSTATE: HY000 报错 故障修复 远程处理
- bootstrap-datepicker v1.6.2发布,一个日期表单组件详解编程语言