How to separate date input bootstrap Date Range Picker

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

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:

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

You can split the date range string by ' - ' delimiter on your back-end. If you use node.js you could try to do

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

Or if you use PHP

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

The other solution is to use set the values before form submission For example, In 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:

$('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); });