• bootstrap之双日历时间段选择控件示例—daterangepicker(中文汉化版)


    效果图:

     

    参考代码:

    <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=" 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 下载

    CSDN下载

  • 相关阅读:
    centos服务器上线第二个django项目方法。
    centos7服务器部署django项目。
    C# 修饰符
    PLSQL 12 安装、连接Oracle
    GAC 解释&路径
    WebService 创建、发布、调用
    区域性名称和标识符
    关键字
    运算符 &(与运算)、|(或运算)、^(异或运算)
    ASCII,Unicode,UTF-8,GBK 区别
  • 原文地址:https://www.cnblogs.com/52php/p/5681431.html
Copyright © 2020-2023  润新知