美文网首页
datetimepicker日期时间选择器-限制时间段

datetimepicker日期时间选择器-限制时间段

作者: 阿川阿川 | 来源:发表于2017-09-27 10:12 被阅读1034次

    基于bootstrap的css,js

    加上bootstrap-datetimepicker的css,js

    <script src="jquery-1.11.1.min.js"></script>  
    <link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />  
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>  
    
    <link href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />  
    <script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <!-- 引用的中文包 -->
    <script src="bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>  
    
    // 开始时间:  
    $('#qBeginTime').datetimepicker({  
        todayBtn: true,
        autoclose : true,
        bootcssVer:3, // 显示箭头
        format: 'yyyy-mm',
        startView: 3, // 日期时间选择器打开之后首先显示的视图。
        minView: 3, // 日期时间选择器所能够提供的最精确的时间选择视图。
        forceParse: false, // 当选择器关闭的时候,是否强制解析输入框中的值。
        language: 'zh-CN'
    }).on('changeDate',function(e){  
        var startDate = $('#startDate').val();
        $("#returnDate").datetimepicker('setStartDate',startDate);
        $("#startDate").datetimepicker('hide');
    });  
    // 结束时间:  
    $('#qEndTime').datetimepicker({  
        todayBtn: true,
        autoclose : true,
        bootcssVer:3, // 显示箭头
        format: 'yyyy-mm',
        weekStart: 1,
        startView: 3,
        minView: 3,
        forceParse: false,
        language: 'zh-CN'  
    }).on('changeDate',function(e){  
        var returnDate = $("#returnDate").val();
        $("#startDate").datetimepicker('setReturnDate',returnDate);
        $("#returnDate").datetimepicker('hide');
    });
    

    中文包问题

    moment语言包:https://github.com/moment/moment
    <script src="bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>

    相关文章

      网友评论

          本文标题:datetimepicker日期时间选择器-限制时间段

          本文链接:https://www.haomeiwen.com/subject/hgvyextx.html