精华内容
下载资源
问答
  • 解压后直接运行demo.html操作简单,
  • 基于bootstrap日期选择插件,资源包包括demo、js、css;使用方法类似My97;引入对应的js、css即可 参数说明: `startDate`: (Date object, moment object or string) 起始时间 `endDate`: (Date object, ...
  • 效果:第二个日期控件选中的时间不能小于第一个 1、页面上需要引用   css:<link rel="stylesheet" href="css/bootstrap.min.css" /> //这个也要引入,否则页面样式会出问题 <link rel="stylesheet" ...

    效果:第二个日期控件选中的时间不能小于第一个

    1、页面上需要引用

      

    css:
    <link rel="stylesheet" href="css/bootstrap.min.css" /> //这个也要引入,否则页面样式会出问题 <link rel="stylesheet" href="plugin/css/bootstrap-datetimepicker.css" />

    js:
    <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="plugin/js/bootstrap-datetimepicker.js"></script>
    <script src="plugin/js/bootstrap-datetimepicker.zh-CN.js"></script>

    2、直接在input上调用 datetimepicker()

    <input size="16" type="text" id="datetimeStart" readonly class="form_datetime">
    --
    <input size="16" type="text" id="datetimeEnd" readonly class="form_datetime">

    效果:

    js代码:

    <script type="text/javascript">
        $("#datetimeStart").datetimepicker({
            format: 'yyyy-mm-dd',
            minView:'month',
            language: 'zh-CN',
            autoclose:true,
            startDate:new Date()
        }).on("click",function(){
            $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
        });
        $("#datetimeEnd").datetimepicker({
            format: 'yyyy-mm-dd',
            minView:'month',
            language: 'zh-CN',
            autoclose:true,
            startDate:new Date()
        }).on("click",function(){
            $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
        });
    </script>

    3、组件的方式使用

    <label class="labe_l">发货日期:</label>
    <div class="clearfix tex_t reset_text">
      <div class="input-append date fl"  id="datetimeStart">
            <input type="text" class="" readonly>
            <span class="add-on"><i class="icon-th"></i></span> 
        </div>
        <span class="to_link">至</span>
        <div class="input-append date fl"  id="datetimeEnd">
             <input type="text" class="" readonly>
             <span class="add-on"><i class="icon-th"></i></span> 
        </div>
    </div>

    效果:

    js代码:

    <script>
         //日期插件初始化      
         $('#datetimeStart').datetimepicker({
             language:  'zh-CN', 
             format:'yyyy-mm-dd', 
             weekStart: 1, /*以星期一为一星期开始*/
             todayBtn:  1,
             autoclose: 1, 
             minView:2, /*精确到天*/
             pickerPosition: "bottom-left" 
          }).on("changeDate",function(ev){  //值改变事件
             //选择的日期不能大于第二个日期控件的日期
             if(ev.date){
                  $("#datetimeEnd").datetimepicker('setStartDate', new Date(ev.date.valueOf()));
              }else{
                  $("#datetimeEnd").datetimepicker('setStartDate',null);
              }
          });
          $('#datetimeEnd').datetimepicker({
               language:  'zh-CN', 
               format:'yyyy-mm-dd', 
               weekStart: 1, /*以星期一为一星期开始*/
               todayBtn:  1,
               autoclose: 1, 
               minView:2, /*精确到天*/
               pickerPosition: "bottom-left"
            }).on("changeDate",function(ev){
               //选择的日期不能小于第一个日期控件的日期
               if(ev.date){
                    $("#datetimeStart").datetimepicker('setEndDate', new Date(ev.date.valueOf()));
               }else{
                    $("#datetimeStart").datetimepicker('setEndDate',new Date());
               }
            });         
     </script>

     

    转载于:https://www.cnblogs.com/dingjiujiu/p/7239948.html

    展开全文
  • 实现一个时间控件: 要得jar包自己去下 一、页面 二、JS var $createTime=$('#createTime');$createTime.daterangepicker({ ranges : { //'最近1小时': [moment().subtract('hours',1), mome...

    bootstrap画的页面很漂亮,能自动适应网页端,移动端。实现一个双选时间控件:

     

    要得jar包自己去下 

     

    一、页面

     

    二、JS

    var $createTime=$('#createTime');
    $createTime.daterangepicker({
    ranges : {
    //'最近1小时': [moment().subtract('hours',1), moment()],
    '今日': [moment().startOf('day'), moment()],
    '昨日': [moment().subtract(1,'days').startOf('day'), moment().subtract(1,'days').endOf('day')],
    '最近7日': [moment().subtract(6,'days'), moment()],
    '最近30日': [moment().subtract(29,'days'), moment()]
    },
    "alwaysShowCalendars": true,
    "opens": "right",
    locale : {
    format : 'YYYY-MM-DD',
    applyLabel : '确定',
    cancelLabel : '取消',
    fromLabel : '起始时间',
    toLabel : '结束时间',
    customRangeLabel : '自定义',
    daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
    monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
    '七月', '八月', '九月', '十月', '十一月', '十二月' ],
    firstDay : 1
    }
    }, function (start, end) {
    $("#startTime").val(start.format('YYYY-MM-DD HH:mm:ss'));
    $("#endTime").val(end.format('YYYY-MM-DD HH:mm:ss'));
    });
    $createTime.on('cancel.daterangepicker',function () {
    $(this).val('');
    $("#startTime").val('');
    $("#endTime").val('');
    });
    $createTime.on('apply.daterangepicker',function (el,daterangepicker) {
    var start=daterangepicker.startDate;
    var end=daterangepicker.endDate;
    $("#startTime").val(start.format('YYYY-MM-DD HH:mm:ss'));
    $("#endTime").val(end.format('YYYY-MM-DD HH:mm:ss'));
    });

    转载于:https://www.cnblogs.com/yzw23333/p/7210438.html

    展开全文
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项;也可以自定义时间段;由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。 支持浏览器...

    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件:

    可以设定多个时间段选项;也可以自定义时间段;由用户自己选择起始时间和终止时间;时间段的最大跨度可以在程序里设定。

    支持浏览器:谷歌,火狐,safari,ie8+

    效果:

     

    需要引入的css和js

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
    <link href="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet">
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>

    html代码

      <div class="input-group">
            <button type="button" class="btn btn-default pull-right" id="daterange-btn">
                <i class="fa fa-calendar"></i>
                <span>时间</span>
                <i class="fa fa-caret-down"></i>
            </button>
        </div>

    使用js调用daterangepicker

    <script>
        function init() {
            //定义locale汉化插件
            var locale = {
                "format": 'YYYY-MM-DD',
                "separator": " -222 ",
                "applyLabel": "确定",
                "cancelLabel": "取消",
                "fromLabel": "起始时间",
                "toLabel": "结束时间'",
                "customRangeLabel": "自定义",
                "weekLabel": "W",
                "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
                "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                "firstDay": 1
            };
            //初始化显示当前时间
            $('#daterange-btn span').html(moment().subtract('hours', 1).format('YYYY-MM-DD') + ' - ' + moment().format('YYYY-MM-DD'));
            //日期控件初始化
            $('#daterange-btn').daterangepicker(
                {
                    'locale': locale,
                    //汉化按钮部分
                    ranges: {
                        '今日': [moment(), moment()],
                        '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                        '最近7日': [moment().subtract(6, 'days'), moment()],
                        '最近30日': [moment().subtract(29, 'days'), moment()],
                        '本月': [moment().startOf('month'), moment().endOf('month')],
                        '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                   },
                    startDate: moment().subtract(29, 'days'),
                    endDate: moment()
                },
                function (start, end) {
                    $('#daterange-btn span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
                }
           );
        };
        $(document).ready(function() {
            init();
            
        });
    </script>

     

    转载于:https://www.cnblogs.com/moumou0213/p/6484409.html

    展开全文
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定。我们项目里用到的Bootstrap版本是2.3.1,所以我把daterangepicker与Bootstrap-2.3.1进行了整合。
    

     一、需要引入的css与js

    1. <link href="bootstrap.min.css" rel="stylesheet">      
    2. <link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" />  
    3. <link rel="stylesheet" type="text/css" media="all" href="daterangepicker-1.3.7.css" />  
    4. <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet">  
    5.   
    6. <script type="text/javascript" src="jquery-1.10.1.min.js"></script>  
    7. <script type="text/javascript" src="bootstrap.min.js"></script>  
    8. <script type="text/javascript" src="moment.js"></script>  
    9. <script type="text/javascript" src="daterangepicker-1.3.7.js"></script>  

    二、html部分代码

    <div class="form-group">
                        <label class="control-label">
                          日期:
                        </label>
                        <div class="controls">
                          <div id="reportrange" class="input-prepend input-group"  data-date-format="yyyy-mm-dd hh:ii:ss">
    										<span class="add-on input-group-addon">
    											<i class="glyphicon glyphicon-calendar fa fa-calendar">
                                                </i>
    										</span>
                            <input type="text" style="width: 400px" name="timeSection" id="searchDateRange"
                                   class="form-control" value="Enter time" class="span4"/>
                          </div>
                        </div>
     </div>

    三、使用js调用daterangepicker

    <span style="font-size:14px;"> $(function(){
          //时间插件
    //      $('#searchDateRange').val(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
    
          $('#reportrange').daterangepicker(
                  {
                    // startDate: moment().startOf('day'),
                    //endDate: moment(),
                    //minDate: '01/01/2012',    //最小时间
                    maxDate : moment(), //最大时间
                    dateLimit : {
                      days : 30
                    }, //起止时间的最大间隔
                    showDropdowns : true,
                    showWeekNumbers : false, //是否显示第几周
                    timePicker : true, //是否显示小时和分钟
                    timePickerSeconds:true,
                    timePickerIncrement : 1, //时间的增量,单位为分钟
                    timePicker12Hour : false, //是否使用12小时制来显示时间
                    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()]
                    },
                    opens : 'right', //日期选择框的弹出位置
                    buttonClasses : [ 'btn btn-default' ],
                    applyClass : 'btn-small btn-primary blue',
                    cancelClass : 'btn-small',
                    format : 'YYYY-MM-DD HH:mm:ss', //控件中from和to 显示的日期格式
                    separator : ' to ',
                    locale : {
                      applyLabel : '确定',
                      cancelLabel : '取消',
                      fromLabel : '起始时间',
                      toLabel : '结束时间',
                      customRangeLabel : '自定义',
                      daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                      monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                      firstDay : 1
                    }
                  }, function(start, end, label) {//格式化日期显示框
    
                    $('#searchDateRange').val(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
                  });
    
          //设置日期菜单被选项  --开始--
    
           <%--var dateOption ;--%>
           <%--if("${riqi}"=='day') {--%>
           <%--dateOption = "今日";--%>
           <%--}else if("${riqi}"=='yday') {--%>
           <%--dateOption = "昨日";--%>
           <%--}else if("${riqi}"=='week'){--%>
           <%--dateOption ="最近7日";--%>
           <%--}else if("${riqi}"=='month'){--%>
           <%--dateOption ="最近30日";--%>
           <%--}else if("${riqi}"=='year'){--%>
           <%--dateOption ="最近一年";--%>
           <%--}else{--%>
           <%--dateOption = "自定义";--%>
           <%--}--%>
           <%--$(".daterangepicker").find("li").each(function (){--%>
           <%--if($(this).hasClass("active")){--%>
           <%--$(this).removeClass("active");--%>
           <%--}--%>
           <%--if(dateOption==$(this).html()){--%>
           <%--$(this).addClass("active");--%>
           <%--}--%>
           <%--});--%>
          //设置日期菜单被选项  --结束--
    
        })</span>


    四、效果图


    展开全文
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。 在汉化的过程...
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
  • 日历时间段选择插件—daterangepicker(汉化版)

    千次下载 热门讨论 2014-12-02 11:16:40
    日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
  • jQuery日历插件daterangepicker,这是一个日历,可以和bootstrap 配合使用,界面比较简洁,比较适合做时间区域选择的功能
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。 一、引用 ...
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。我们项目里用到...
  • 先说点闲话,熟悉Angular的猿们会喜欢这个插件的。 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业...
  • 在练习基于bootstrap datatable的使用时,时间插件用到了daterangepicker,特做稍微了解,效果如图:   1、html <div class="panel"> <div class="input-group" id="id_search_date"> <...
  • 最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性和参数即可实现,效果如下图(一...
  • 1.在很多的项目中,我们都会用到日期插件,然后当我在vue中使用bootstrap datetimepicker时发现双向绑定不起作用了,bootstrap datetimepicker修改的日期不会同步到data中,下面看我的解决方案: 选择发送时间...
  • 图表插件

    2017-05-02 16:48:45
    图表  chart.js 种类较少,风格小清新 JVectorMap jquery的地图插件 daterangepicker bootstrap日历时间选择
  • daterangepicker - 日期控件选择器

    千次阅读 2017-08-17 18:21:55
    日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,用户自己选择起始时间和终止时间,简化了两个单日期控件之间交互传值的问题。 代码运行结果查看: ...
  • 后台页面联手

    2018-08-27 18:24:39
    内涵表格树 dome树 时间日历插件可精确时分秒,双层模态框,bootstrap字体图标库全部图标,面包屑导航,左侧导航栏回缩
  • 日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间时间段的最大跨度可以在程序里设定。 一、引用 ...
  • 但是插件有的不合需求,框架嘛依赖关系一大堆,比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件,功能也不需要很强大,只要能兼容所有浏览器,能选择任意年份日期和星期就可以了。 好了,...
  • 版 次:1页 数:348字 数:448000印刷时间:2014-10-1开 本:16开纸 张:胶版纸印 次:1包 装:平装 编辑推荐  由科兹洛夫斯基、达尔文所著的《精通AngularJS》全面系统的介绍了AngularJS框架。AngularJS是Google...
  • angular对bootstrap的封装 http://angular-ui.github.io/bootstrap angularjs + nodejs https://cnodejs.org/topic/51404e0f069911196d2e3923 吕大豹 Angularjs http://www.cnblogs.com/lvdabao/tag/AngularJs ...

空空如也

空空如也

1 2
收藏数 34
精华内容 13
关键字:

bootstrap双时间插件