如何在Bootstrap日期范围选择器中分离日期输入

Question

我有一个表单，使用了 daterangepicker。 url : https://github.com/dangrossman/daterangepicker 我成功地将 daterangepicker 添加到我的表单中，只需使用这个简单的脚本。

script 

//Date range picker
$('.daterp').daterangepicker();

/script

只需将类添加到我的表单即可。

class="form-control daterp"

所以它将会是这样。

<input type="text" name="start_date" style="width: 100%;" required="" class="form-control daterp" id="id_start_date">

当我点击提交时，它会给我这样的结果： 07/29/2018 - 07/29/2018 提交到我的数据库中。但这并不是我需要的。想象一下我的数据库表是这样的。

#table shift
+---------------+---------------+
| start         | end           |
+---------------+---------------+
| 2018-01-01    | 2018-01-05    | 
| 2018-01-08    | 2018-01-14    |
| ....          | ....          |
+---------------+---------------+

当我点击提交我的表单字段并输入值07/29/2018 - 07/29/2018时，我需要什么？ 07/29/2018将会是开始日期，

并且 07/29/2018将会是结束日期，

但只使用单个表单字段，

如何实现？...

谢谢！

- Dicky Raambo

Answer 1

您可以查看这个链接。

$('#someinput').daterangepicker(options, callback);
//parse the start date & end date
startDate = $('#someinput').data('daterangepicker').startDate;
endDate = $('#someinput').data('daterangepicker').endDate;

//format it 
Start = start_date.format('YYYY-MM-DD');
End = end_date.format('YYYY-MM-DD');

- H.M Maruf

Answer 2

如果你希望将它作为单个字段发送到表单中，那么似乎你需要在后端使用你的后端代码解析出这个单个字段。但是，我认为你真正想要的是将日期分成两个独立的字段。所以把主字段的名称改为"date_range"，然后添加两个隐藏字段"start_date"和"end_date"，然后在表单提交或与日期范围选择器相关的事件上，按如下方式拆分值：

$('#start_date').val( $('#date_range').text().split(' - ')[0]);
$('#end_date').val( $('#date_range').text().split(' - ')[1]);

- Rick Root

Answer 3

您可以在后端使用' - '分隔符拆分日期范围字符串。如果您使用node.js，可以尝试执行以下操作：

[startDate, endDate] = '07/12/2018 - 07/28/2018'.split(' - ');

或者如果您使用PHP。

list($startDate, $endDate) = explode(' - ', $_POST['start_date']);

另一种解决方案是在表单提交之前设置值。 例如， 在HTML中：

<form action="index.php" method="post">
    <input type="text" class="date_range">
    <input type="hidden" name="start_date">
    <input type="hidden" name="end_date">
    <input type="submit">
</form>

在JS中：

$('input.date_range').daterangepicker();
$('form').submit(function (ev, picker) {
    [startDate, endDate] = $('.date_range').val().split(' - ');
    $(this).find('input[name="start_date"]').val(startDate);
    $(this).find('input[name="end_date"]').val(endDate);
});

- Pavel Bondarev

---

无需进行字符串解析，因为可以直接访问https://dev59.com/663la4cB1Zd3GeqPJj_B#61506543中提到的单独日期。 - ps_ttf