如何从daterangepicker读取值?

时间:2015-10-30 14:05:28

标签: javascript jquery daterangepicker

我有这个daterangepicker在我的本地PHP站点上运行。这是HTML部分的代码

<form role="form" class="form-inline" method="post" action="">

    <div id="reportrange" class="form-control">
         <i class="fa fa-calendar"></i>
         <span></span> 
         <b class="caret"></b>
    </div>

    <button class="btn btn-white" type="submit">Search</button>

</form>

Javascript部分:

$('input[name="daterange"]').daterangepicker();

    $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

    $('#reportrange').daterangepicker({
        autoApply: true,
        format: 'MM/DD/YYYY',
        startDate: moment().subtract(29, 'days'),
        endDate: moment(),
        minDate: '01/01/2012',
        maxDate: '12/31/2015',
        dateLimit: { days: 60 },
        showDropdowns: true,
        showWeekNumbers: true,
        timePicker: false,
        timePickerIncrement: 1,
        timePicker12Hour: true,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        opens: 'right',
        drops: 'down',
        buttonClasses: ['btn', 'btn-sm'],
        applyClass: 'btn-primary',
        cancelClass: 'btn-default',
        separator: ' to ',
        locale: {
            applyLabel: 'Submit',
            cancelLabel: 'Cancel',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        }
    }, function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    });

我可以很好地选择日期,但提交时没有可读的值。已经遵循这个建议getting the value of daterangepicker但仍然没有运气。任何帮助表示赞赏。感谢。

4 个答案:

答案 0 :(得分:0)

在此处找到解决方案easy-to-use-bootstrap-date-range-picker

答案 1 :(得分:0)

daterangepicker库将使用<input>动态创建name="daterange"代码。因此,当您提交表单时,daterange表单变量应包含您想要的值。它的格式如下:

  

2015年1月15日 - 2015年2月15日

如果这不是您想要的格式,您可以创建两个隐藏的输入字段(一个用于开始日期,一个用于结束日期),并在更改日期范围时设置其值。

<input type="hidden" name="start">
<input type="hidden" name="end">

答案 2 :(得分:0)

$('#reportrange').data('daterangepicker').startDate;
$('#reportrange').data('daterangepicker').endDate;

这个问题解决了这一切。在我的情况下答案是行不通的,因为我在声明日期范围选择器之前访问了该值。 getting the value of daterangepicker bootstrap

答案 3 :(得分:0)

您可以使用默认的php函数explode(),它将返回包含2个元素的数组

        $daterange = $_POST['date_range'];
        $split = explode('-', $daterange);

        #check make sure have 2 elements in array
        $count = count($split);
        if($count <> 2){
          #invalid data
        }

        $start = $split[0];
        $end = $split[1];