We've moved discussions to 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>
Notifications
You’re not receiving notifications from this thread.