title: How to separate date input bootstrap Date Range Picker
body: <p>I have form that use <code>daterangepicker</code> </p>
  
  <p>url : <a href="https://github.com/dangrossman/daterangepicker" rel="nofollow noreferrer">https://github.com/dangrossman/daterangepicker</a> </p>
  
  <p>I was able to attach <code>daterangepicker</code> into my form with this simple script.</p>
  
  <pre><code>script 
  
  //Date range picker
  $('.daterp').daterangepicker();
  
  /script
  </code></pre>
  
  <p>and just add class to my form.</p>
  
  <pre><code>class="form-control daterp"
  </code></pre>
  
  <p>so it will be</p>
  
  <pre><code>&lt;input type="text" name="start_date" style="width: 100%;" required="" class="form-control daterp" id="id_start_date"&gt;
  </code></pre>
  
  <p>when I click submit its give me like <code>07/29/2018 - 07/29/2018</code> submitted to my database.</p>
  
  <p>that not what I need.</p>
  
  <p>imagine my database table like this</p>
  
  <pre><code>#table shift
  +---------------+---------------+
  | start         | end           |
  +---------------+---------------+
  | 2018-01-01    | 2018-01-05    | 
  | 2018-01-08    | 2018-01-14    |
  | ....          | ....          |
  +---------------+---------------+
  </code></pre>
  
  <p>What I need when I click submit on my <code>form field</code> with value <code>07/29/2018 - 07/29/2018</code></p>
  
  <p><code>07/29/2018</code> is going to <code>start</code></p>
  
  <p>and </p>
  
  <p><code>07/29/2018</code> is going to <code>end</code></p>
  
  <p>but with only single <code>form field</code></p>
  
  <p>how to do that?...</p>
  
  <p>thank you!</p>