Chantal
Chantal Software developer focused on personal development not only as a coder but as a human being.

Implementing Pickadate.js on a Rails app

Implementing Pickadate.js on a Rails app

Recently I had to implement a date picker and time picker for an app I’m working on. There are several jquery plugins and some that work with rails. I spent around 2 hours trying different plugins and this one was the simplest one. I only had to do a simple modification to pickadate.js to get it working and this may help someone. So here we go.

We are going to use Pickadate-Rails which is the version of pickadate.js for Rails.

Add this line to your Gemfile: gem pickadate-rails

  • $ bundle
  • the docs says add *= require to application.css.scss but if you are using @import on your application.css.scss this will not work.
  @import "pickadate/default";
  @import "pickadate/default.date";  #for the date picker
  @import "pickadate/default.time";  #for the time picker
  • make sure to add these lines after the turbolinks
  //= require pickadate/picker
  //= require pickadate/picker.date
  //= require pickadate/picker.time
  • add the class datepicker to your HTML
  <%= label_tag :date %>
  <%= text_field_tag(:date, value = nil, html_options = {class: 'form-control datepicker', placeholder: 'mm/dd/yyyy' }) %>

Note: here I’m using form tags but you can use form_for it should work just fine

  • fire up the javascript
  $('.datepicker').pickadate()

Note: Don’t forget to re-start your rails server

  • add the class timepicker to your HTML
  <%= label_tag :time %>
  <%= text_field_tag(:time, value = nil, html_options = { class: 'form-control timepicker', placeholder: 'hh:mm' }) %>
  • and finally to your application.js
  $('.timepicker').pickatime()

And there you have it date and time picker for your rails app. ☺️

Remember that you will need to have the proper columns in your DB like date and time.

comments powered by Disqus