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; width: 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>

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

        });

巴特西

daterangepicker

官方文档

与angular结合

最新文章

热门文章