Bootstrap Modal with Date Picker, what am I doing wrong?

I have a Rails 5.1 app with bootstrap 4. I have bootstrap-datepicker throughout my application and it works perfectly or at least as expected. However whenever I try to use it within a modal it will select the date and format but as soon as I do that and click another field the entire modal form will clear.

Instead of dumping a bunch of code here, I created a stack question here.

My JS skills are not as good as my ruby so I'm hoping someone more talented than I am can chime in and help with this. I really would love to get the datepicker to work. When I pull out the datepicker code my calculation for age based on date of birth works fine and the form does not clear. But as soon as I use the datepicker again the entire modal form gets cleared.

Any help from the community is greatly appreciated.

-Jaems

Bump, I tried stopping propagation but no luck as the stack commented suggested. Anyone else want to help me take a stab at this? I had to put it downt on other parts of the app but this issue is starting to hit my radar again.

Hey James,

Which version of the datepicker are you running, and which one?

If you check out this pen: https://codepen.io/nanosplit/pen/wPWZvr you'll see BS4 + this datepicker does work in the vanilla BS4 modal as you'd expect.

Hi Jacob,

Thanks for repsonding. I'm using bootstrap-datepicker-rails (1.7.1.1) from Rubygems and still having issues. I'll see if I can pull from the CDN and use that one instead as a test.

I'll post my results momentarily :)

Actually, nix that. The version I'm using is the same as the one you provided in codepen. Just a tiny version higher. I've tried multiple versions. Here's what my code looks like:

application.js

$(document).on('turbolinks:load', function() {
  $('#patient_date_of_birth_modal').datepicker({
    format: 'yyyy-mm-dd'
  });
});

patients.coffee

$(document).on 'turbolinks:load', ->
  selectizeCallback = null
  $('.patient-modal').on 'hide.bs.modal', (e) ->
    if selectizeCallback != null
      selectizeCallback()
      selectizeCallback = null
    $('#new_patient').trigger 'reset'
    $.rails.enableFormElements $('#new_patient')
    return
  $('#new_patient').on 'submit', (e) ->
    e.preventDefault()
    $.ajax
      method: 'POST'
      url: $(this).attr('action')
      data: $(this).serialize()
      success: (response) ->
        selectizeCallback
          value: response.id
          text: response.first_name
        selectizeCallback = null
        $('.patient-modal').modal 'toggle'
        return
    return
  $('.patient').selectize create: (input, callback) ->
    selectizeCallback = callback
    $('.patient-modal').modal()
    $('#patient_first_name').val input
    return
  return

$(document).on 'turbolinks:load', ->
  getAge = (dateString) ->
    today = new Date
    birthDate = new Date(dateString)
    age = today.getFullYear() - birthDate.getFullYear()
    m = today.getMonth() - birthDate.getMonth()
    if m < 0 or m == 0 and today.getDate() < birthDate.getDate()
      age--
    age

  $('#patient_date_of_birth_modal').on 'change', ->
    date = $(this).val()
    age = getAge(date)
    $('#patient_age_modal').val age
    return
  return
    ```


    I'm wondering if I'm doing something wrong.  Unfortunately JS is not my strong suit, hoping to change that soon.

Hmm, looking at this: https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951

Try updating your JS to this:

$(document).on('turbolinks:load', function() {
  $('#patient_date_of_birth_modal').datepicker({
    format: 'yyyy-mm-dd'
  }).on('hide', function(event) {
    event.preventDefault();
    event.stopPropagation();
  });
});

Wow, apparently my Google skills are worse than my JS. Just looked at the issue and implemented it and it worked. DM me on Gorails slack with your email and I'll send you a starbucks card for saving me countless hours of futile searching and tinkering :)

Hah, great! Glad that worked - although you may still want to spend some time investigating where the collision is when you have more time. Technically you shouldn't need this fix as far as I can tell, so this could be a sign of a bigger problem that may cause you some grief down the line.

And no sweat, that's what this community is here for! Just pay it forward and help someone down the line when they're in a bind! :)

Thanks Jacob, definitely will pay it forward to help anyone in need. Preferably ops or ruby :)

You're right there's something else going on since I had to put this fix in. Will continue to investigate as I have time but will try not to get stuck in a rabbithole :)