daterangepicker引用

最新推荐文章于 2023-07-12 10:26:42 发布

「已注销」

最新推荐文章于 2023-07-12 10:26:42 发布

阅读量145

点赞数

原文链接：https://my.oschina.net/arin/blog/1603029

版权

为什么80%的码农都做不了架构师？>>>

html

<link href="{{asset('/assets/adminlte/plugins/daterangepicker/daterangepicker.css')}}" rel="stylesheet" />

<div class="col-md-2" >
    <input type="text" name="daterange" class="form-control" data-value="{{old('daterange')}}" placeholder="请输入提交时间"/>
</div>

javascript

<script src="{{asset('/assets/js/application_new.min.js')}}"></script>
<script src="{{asset('/assets/adminlte/plugins/daterangepicker/moment.min.js')}}" type="text/javascript"></script>
<script src="{{asset('/assets/adminlte/plugins/daterangepicker/daterangepicker.js')}}" type="text/javascript"></script>

<script>
        var columns = {
            startDate: startDate,
            endDate: endDate,
            "autoApply": false,
            "opens": "center",
            autoUpdateInput: false, //set did not auto update input
            locale:{
            format: "YYYY-MM-DD",
            separator: ' - ',
            applyLabel: '{{trans('确定')}}',
            cancelLabel: '{{trans('取消')}}',
            weekLabel: 'W',
            customRangeLabel: '{{trans('自定义日期范围')}}',
            daysOfWeek: moment.weekdaysMin(),
            monthNames: moment.monthsShort(),
            firstDay: moment.localeData().firstDayOfWeek()
            },
            ranges: {
            '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1,'days')],
            '过去7天': [moment().subtract(6, 'days'), moment()],
            '本月': [moment().startOf('month'), moment().endOf('month')]
            }
        };
        var start_at = $("input[name='start_at']"),end_at = $("input[name='end_at']"),daterange = $("input[name='date_range']");
        var startDate = start_at.val(),endDate = end_at.val();
        var daterange = $("input[name='date_range']");
        @if(Input::get('date_range'))
            daterange.val("{{Input::get('date_range')}}");
        @endif
        daterange.daterangepicker(columns).on('cancel.daterangepicker', function(ev, picker) {
            
        }).on('apply.daterangepicker', function(ev, picker) {
            $(this).focus();
            $(this).val(picker.startDate.format(picker.locale.format)+picker.locale.separator+picker.endDate.format(picker.locale.format));
            $(this).blur();
            picker.hide();
        });

        $(function(){
            $('input[name=daterange]').daterangepicker({
                timePicker: true,
                timePickerIncrement: 30,
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });
            $('input[name=daterange]').on('apply.daterangepicker', function(ev, picker){
                $(this).val(picker.startDate.format('YYYY/MM/DD hh:mm:ss') + ' - ' + picker.endDate.format('YYYY/MM/DD hh:mm:ss'));
            });
            $('input[name=daterange]').on('cancel.daterangepicker', function(ev, picker){
                $(this).val('');
            });
        });
</javascript>

参考链接：https://www.cnblogs.com/leijing0607/p/7698414.html

引用文件下载：https://pan.baidu.com/s/1o87RKIQ

引用文件官网下载：http://www.daterangepicker.com/

转载于:https://my.oschina.net/arin/blog/1603029