[英]How to separate date input bootstrap Date Range Picker
I have form that use daterangepicker
我有使用
daterangepicker
url : https://github.com/dangrossman/daterangepicker网址: https : //github.com/dangrossman/daterangepicker
I was able to attach daterangepicker
into my form with this simple script.我能够使用这个简单的脚本将
daterangepicker
附加到我的表单中。
script
//Date range picker
$('.daterp').daterangepicker();
/script
and just add class to my form.并将类添加到我的表单中。
class="form-control daterp"
so it will be所以它会
<input type="text" name="start_date" style="width: 100%;" required="" class="form-control daterp" id="id_start_date">
when I click submit its give me like 07/29/2018 - 07/29/2018
submitted to my database.当我点击提交它给我像
07/29/2018 - 07/29/2018
提交到我的数据库。
that not what I need.那不是我需要的。
imagine my database table like this想象我的数据库表是这样的
#table shift
+---------------+---------------+
| start | end |
+---------------+---------------+
| 2018-01-01 | 2018-01-05 |
| 2018-01-08 | 2018-01-14 |
| .... | .... |
+---------------+---------------+
What I need when I click submit on my form field
with value 07/29/2018 - 07/29/2018
当我在
form field
上单击提交时,我需要什么值07/29/2018 - 07/29/2018
07/29/2018
is going to start
07/29/2018
即将start
and和
07/29/2018
is going to end
07/29/2018
即将end
but with only single form field
但只有一个
form field
how to do that?...怎么做?...
thank you!谢谢你!
You can check out this link你可以看看这个链接
$('#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');
You can split the date range string by ' - '
delimiter on your back-end.您可以通过后端的
' - '
分隔符拆分日期范围字符串。 If you use node.js you could try to do如果你使用 node.js 你可以尝试做
[startDate, endDate] = '07/12/2018 - 07/28/2018'.split(' - ');
Or if you use PHP或者如果你使用 PHP
list($startDate, $endDate) = explode(' - ', $_POST['start_date']);
The other solution is to use set the values before form submission For example, In HTML:另一种解决方案是在表单提交之前使用设置值例如,在 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>
In JS:在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);
});
If you want it to be sent to the form in a single field, then it seems to be that you're going to need to parse that single field out on the back end using whatever code your back end is running.如果您希望将其发送到单个字段中的表单,那么您似乎需要使用后端运行的任何代码在后端解析该单个字段。
But it sounds to me like what you really want is to separate the dates into two separate fields.但在我看来,您真正想要的是将日期分成两个单独的字段。 So change the name of the main field to "date_range" and add two hidden fields called "start_date" and "end_date", then either on form submit or on an event tied to the date range picker, split the values like so:
因此,将主字段的名称更改为“date_range”并添加两个名为“start_date”和“end_date”的隐藏字段,然后在表单提交或与日期范围选择器相关的事件上,像这样拆分值:
$('#start_date').val( $('#date_range').text().split(' - ')[0]);
$('#end_date').val( $('#date_range').text().split(' - ')[1]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.