StimulusJS connect target for date_select

1

Hello, I’m trying to connect a target to my form’s date_select.

This is my controller

import { Controller } from "@hotwired/stimulus"
import { isValidDate } from 'custom/date'
export default class extends Controller {
  static targets = ['firstName', 'firstNameLabel', 'lastName', 'lastNameLabel', 'dateOfBirth', 'dateOfBirthLabel', 'button']

  connect() {
    console.log(this.firstNameTarget)
    console.log(this.dateOfBirthTarget)
  }
}

This is my form where I connect my controller to my fields. For the rest of the fields there’s nothing wrong, but something is happening for date_select because I get an error.

    = form_for(@user, url: settings_public_path(locale: I18n.locale, id: @user),
                data: { controller: "generalsettings" }) do |f|
      .field.pb-4
        = f.label t('sign_in.your_email')
        = f.text_field :email, class: 'form-control field-text-input settings-input', disabled: 'disabled'
        %div{style: 'font-size: .9rem !important;'}
          =t('settings.cant_change_email')
      .names-flex.pb-4
        .name-div.first-name
          = f.label t('sign_up.fname')
          = f.text_field :first_name, class: 'form-control field-text-input settings-input', disabled: @user.provider.present?, data: { generalsettings_target: 'firstName', action: 'generalsettings#isValidCombination'}
        .name-div.last-name
          = f.label t('sign_up.lname')
          = f.text_field :last_name, class: 'form-control field-text-input settings-input', disabled: @user.provider.present?, data: { generalsettings_target: 'lastName', action: 'generalsettings#isValidCombination'}
      .field.pb-4
        = f.label t('sign_up.dob')
        .dob-picker
          = f.date_select :date_of_birth, :order => [:day, :month, :year], prompt: { day: 'Select day', month: 'Select month', year: 'Select year' }, start_year: Date.current.year, end_year:Date.current.year - 100, disabled: @user.provider.present?, data: { generalsettings_target: 'dateOfBirth', action: 'generalsettings#isValidCombination'}
      = f.submit t('settings.save'), class: 'sign-button save_button', data: { generalsettings_target: 'button'}

Error: Missing target element "dateOfBirth" for "generalsettings" controller
This is the error I get on console when I open the page. I think this is happening because date_select creates 3 tags, but I don’t have any solution for now.

2

Can you screenshot your actual HTML output?

3

Screenshot 2022-10-24 at 17.24.10
Screenshot 2022-10-24 at 17.24.101920×1105 164 KB

This is the HTML

4

So From what I can see, you didn’t pass data attributes to the select tag. Check this answer How do I set the HTML options for collection_select in Rails? - Stack Overflow to properly add HTML attributes.

1 Like
5

Thank you, the article helped me.
I added the target in the second hash argument and now it works.

= f.date_select :date_of_birth, {:order => [:day, :month, :year], prompt: { day: 'Select day', month: 'Select month', year: 'Select year' }, start_year: Date.current.year, end_year:Date.current.year - 100 }, {data: { action: 'generalsettings#isValidCombination', generalsettings_target: 'dateOfBirth' }}