CODEWITHSUNDEEP
jqueryruby-on-railsbootstrap-datepicker
bork
bork

Reputation: 1674

bootstrap-datepicker-rails options not applied

I'm using rails-bootstrap-datepicker (latest version of date) to implement a datepicker, but while the calendar is rendering and working as it should, the options I've specified are not applied apart from the format attribute.

I've tried render the form and the options using a helper:

index.html.erb

<%= form_with scope: :submission, local: true do |form| %>

  <div class="datepicker">
    <%= form.label :dates %>
    <%= datepicker(form, :dates) %>
  </div>

  <p>
    <%= form.submit %>
  </p>
<% end %>

application_helper.rb

  def datepicker(form, field)
    form.text_field(field, data: { provide: "datepicker", 
    'date-format': 'dd/mm/yyyy', 
    'weekStart': 1, 
    'maxViewMode': 2, 
    'multidate': true, 
    'daysOfWeekHighlighted': "0,6", 
    'calendarWeeks': true }).html_safe
  end

As well as using jquery:

index.html.erb

<%= form_with scope: :submission, local: true do |form| %>

  <div class="datepicker" data-provide='datepicker'>
    <%= form.label :dates %>
  </div>

  <p>
    <%= form.submit %>
  </p>
<% end %>

<script>
 $('#datepicker').datepicker({
   format: "dd/mm/yyyy",
   weekStart: 1,
   maxViewMode: 2,
   multidate: true,
   daysOfWeekHighlighted: "0,6",
   calendarWeeks: true
 });
</script>

But as far as I can see, I only get the default options of the picker and not the ones I've specified apart from format. I've also verified that jquery is actually loaded and running, so that shouldn't be the issue.

In my application.js:

//= require jquery
//= require bootstrap-datepicker

In my application.css:

 *= require bootstrap-datepicker3

I'm not seeing any errors in my browser console.

The related lines from my Gemfile:

gem 'bootstrap-datepicker-rails'

gem 'bootstrap', '~> 4.2', '>= 4.2.1'

gem 'jquery-rails', '~> 4.3', '>= 4.3.3'

Upvotes: 1

Views: 293

Answers (1)

bork
bork

Reputation: 1674

Answering my own question here in case someone else comes across it.

If using a helper, all options must be prefixed by date- else they won't work. That's the reason why only the date-format worked for me. I believed that property was named as such and that the prefix didn't apply to the rest of the options. So, a working version of the specified options within an helper would look like this, in my case:

def datepicker(form, field)
    form.text_field(field, data: { provide: "datepicker", 
    'date-format': 'dd/mm/yyyy', 
    'date-weekStart': 1, 
    'date-maxViewMode': 2, 
    'date-multidate': true, 
    'date-daysOfWeekHighlighted': "0,6", 
    'date-calendarWeeks': true }).html_safe
end

Upvotes: 1

Related Questions