CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Dicky Raambo
Dicky Raambo

Reputation: 523

How to separate date input bootstrap Date Range Picker

I have form that use daterangepicker

url : https://github.com/dangrossman/daterangepicker

I was able to attach daterangepicker into my form with this simple script.

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.

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

07/29/2018 is going to start

and

07/29/2018 is going to end

but with only single form field

how to do that?...

thank you!

Upvotes: 3

Views: 5790

Answers (3)

H.M Maruf
H.M Maruf

Reputation: 65

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

Upvotes: 3

Rick Root
Rick Root

Reputation: 31

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

Upvotes: 2

Pavel Bondarev
Pavel Bondarev

Reputation: 69

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

Upvotes: 1

Related Questions