zoukankan      html  css  js  c++  java
  • daterangepicker

    官方文档

    http://www.daterangepicker.com/#examples

    与angular结合

    html

    					<div date-range-picker class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;  100%">
    						<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    						<span name="label"></span> <b class="caret"></b>
                            <input name="start" placeholder="开始" type="text" class="col-xs-6 col-sm-12 form-control" ng-model="formData.startUpdateTime"/>
                            <input name="end" placeholder="结束" type="text" class="col-xs-6 col-sm-12 form-control" ng-model="formData.endUpdateTime"/>
    					</div>
    

    js

            var start = moment().subtract(29, 'days');
            var now = moment();
    
            function onDatePickerChange(start, end) {
                if(this.element) {
                    var strStart = !!start ? start.format('YYYY-MM-DD HH:mm:ss') : '';
                    var strEnd = !!end ? end.format('YYYY-MM-DD HH:mm:ss') : '';
                    if(!strStart && !strEnd) {
                        this.element.find('span[name=label]').html('');
                    } else {
                        this.element.find('span[name=label]').html(strStart + ' - ' + strEnd);
                    }
                    var $start = this.element.find('input[name=start]');
                    var $end = this.element.find('input[name=end]');
                    $start.val(strStart);
                    setTimeout(function () {  $start.trigger('change') });
                    $end.val(strEnd);
                    setTimeout(function () {  $end.trigger('change') });
                }
            }
    
            $('[date-range-picker]').daterangepicker({
                startDate: start,
                endDate: now,
                ranges: {
                    'Today': [moment().startOf('date'), moment()],
                    'Yesterday': [moment().startOf('date').subtract(1, 'days'), moment().startOf('date').subtract(1, 'milliseconds')],
                    'Last 7 Days': [moment().subtract(7, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(30, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                dateLimit:{
                    days: 7
                },
                showDropdowns: true,
                opens:'right',
                timePicker: true,
                timePicker24Hour: true,
                timePickerSeconds: true,
                timePickerIncrement: 1,
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    cancelLabel: 'Clear'
                }
            }, onDatePickerChange);
    
            $('[date-range-picker]').on('cancel.daterangepicker', function(ev, picker) {
                onDatePickerChange.apply(picker, [null, null]);
            });
    
  • 相关阅读:
    hdu 4027 Can you answer these queries?
    hdu 4041 Eliminate Witches!
    hdu 4036 Rolling Hongshu
    pku 2828 Buy Tickets
    hdu 4016 Magic Bitwise And Operation
    pku2886 Who Gets the Most Candies?(线段树+反素数打表)
    hdu 4039 The Social Network
    hdu 4023 Game
    苹果官方指南:Cocoa框架(2)(非原创)
    cocos2d 中 CCNode and CCAction
  • 原文地址:https://www.cnblogs.com/liqipeng/p/7694603.html
Copyright © 2011-2022 走看看