We've moved discussions to Discord

Join Discord

Better date handling on form generation

Murray Bryant •
Hi Chris

The default date handling is pretty awful in the form template scaffolding

If you want to stay with the default selects, how about wrapping them in a flex items-baseline

 <div class="form-group">
    <%= form.label :start_date %>
    <div class="flex items-baseline">
        <%= form.date_select :start_date, class: "form-control" %>
    </div>
  </div>
 

to be honest I will probably just change all mine to date_field

just a suggestion

thanks

Murray





Brandon B. •
Use: https://github.com/adrienpoly/stimulus-flatpickr and just follow the instructions on that page link and you will have a datepicker that works extremely well and can be modeled how you want it to look from the ERB/HAML side with attributes.
Murray Bryant •
thanks for the link, looks good.
LarryTu •
Brandon B.  
Thanks for the advice.
I tried to add these in the "packs" folder, but the date time picker doesn't show up.
Am I doing anything wrong? Thanks!

// ./packs/application.js
import { Application } from "stimulus";
// import Flatpickr
import Flatpickr from "stimulus-flatpickr";

import { definitionsFromContext } from "stimulus/webpack-helpers";
const application = Application.start();
const context = require.context("../controllers", true, /\.js$/);
application.load(definitionsFromContext(context));

// Manually register Flatpickr as a stimulus controller
application.register("flatpickr", Flatpickr);

and the form is like

<div class="form-group">
    <%= form.label :start_at, 'Start' %>
      <%= form.text_field :start_at,
        data: {
          controller: "flatpickr",
          flatpickr_format: "Y-m-d",
          flatpickr_min_date: Time.zone.now
      } %>    
  </div>
My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.