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]);
        });