All threads / Bootstrap Modal with Date Picker, what am I doing wrong?
Ask A Question


You’re not receiving notifications from this thread.

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

jaems asked in Javascript

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.


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: 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 ( 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:


$(document).on('turbolinks:load', function() {
    format: 'yyyy-mm-dd'

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

$(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()

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

    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:

Try updating your JS to this:

$(document).on('turbolinks:load', function() {
    format: 'yyyy-mm-dd'
  }).on('hide', function(event) {

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 :)

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 68,099+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.