Flatpickr-datepicker-rails

Flatpickr-datepicker-rails is a gem datetimepicker based on flatpickr. This gem uses flatpicker packages and can be used in Rails applications.

Add this line to your application's Gemfile:

gem 'flatpickr-datepicker-rails'

And then execute:

$ bundle

In your application.css, add the following:

 *= require flatpickr-datepicker-rails

And in your application.js:

//= require flatpickr-datepicker-rails

document.getElementsByClassName("your_class_selector").flatpickr({properties});

First you need create a .html.erb file and add the elements with the class_selectors like that:

    <%= f.input :your_date_input, :as => :string, input_html: {class: 'date'} %>          

or if your want a datetime element

    <%= f.input :your_date_input, :as => :string, input_html: {class: 'datetime'} %>

In your application.js after installation

$(document).ready(function(){

    var config_date =  {
        dateFormat: "d-m-Y"
    };
    
    var config_date_time =  {
        dateFormat: "d-m-Y H:i",
        enableTime: true,
        time_24hr: true
    };
    document.getElementsByClassName("date").flatpickr(config_date);
    document.getElementsByClassName("datetime").flatpickr(config_date_time);

});

OR

You can find more about the properties and anothers details in official page: https://flatpickr.js.org/examples/

I don't know why, but for some reason I can't adapt the gem on rails 6. I think it's because the folder organization, on rails 6 the javascript folder is not in the assets folder

The gem is available as open source under the terms of the MIT License.