railsのdatetime_selectで生成されるselectタグにスタイルを適用する

参考にさせていただいたページ

• 【Rails】date_selectタグの使い方メモ - Qiita

erb

erbには例えば以下のような感じで書きます。セマンティックではないですが、多少なりと読みやすいようにulとliを使用しています。

<ul class="mod-datetime-selector-0001">
  <li class="mod-datetime-selector-0001__date-field-wrapper">
    <div class="mod-field-type-select-0001">
      <%= f.datetime_select :start_at, {
        default: Time.current,
        use_month_numbers: true,
        date_separator: '</div></li><li class="mod-datetime-selector-0001__slash">/</li><li class="mod-datetime-selector-0001__date-field-wrapper"><div class="mod-field-type-select-0001">',
        datetime_separator: '</div></li><br class="mod-datetime-selector-0001__br"><li class="mod-datetime-selector-0001__hyphen">-</li><li class="mod-datetime-selector-0001__date-field-wrapper"><div class="mod-field-type-select-0001">',
        time_separator: '</div></li><li class="mod-datetime-selector-0001__colon">:</li><li class="mod-datetime-selector-0001__time-field-wrapper"><div class="mod-field-type-select-0001">',
      }, class: 'selectタグに付与したいclass名' %>
    </div>
  </li>
</ul>

scss

例えばこんな感じに書きます。

.mod-datetime-selector-0001 {
  .mod-datetime-selector-0001__date-field-wrapper {
    display: inline-block;
  }
  .mod-datetime-selector-0001__time-field-wrapper {
    display: inline-block;
    @media only screen and (max-width: 959px) {
      margin-top: 8px;
    }
  }
  .mod-datetime-selector-0001__slash {
    display: inline-block;
    padding: 0 10px;
  }
  .mod-datetime-selector-0001__hyphen {
    display: inline-block;
    padding: 0 20px;
    @media only screen and (max-width: 959px) {
      display: none;
    }
  }
  .mod-datetime-selector-0001__colon {
    display: inline-block;
    padding: 0 10px;
    @media only screen and (max-width: 959px) {
      margin-top: 8px;
    }
  }
  .mod-datetime-selector-0001__br {
    display: none;
    @media only screen and (max-width: 959px) {
      display: block;
    }
  }
}

年月日、時分の表示にしたい

以下のように書くとできると思います。以下の%sの箇所に順番に'年', '月', '日', '時'が入ります。分は普通に書きます。CSSは適当に修正してください。

<ul class="mod-datetime-selector-0001">
  <li class="mod-datetime-selector-0001__date-field-wrapper">
    <div class="mod-field-type-select-0001">
      <%= raw sprintf(f.datetime_select(:start_at, {
        default: Time.current,
        use_month_numbers: true,
        date_separator: '</div></li><li class="mod-datetime-selector-0001__slash">%s</li><li class="mod-datetime-selector-0001__date-field-wrapper"><div class="mod-field-type-select-0001">',
        datetime_separator: '</div></li><br class="mod-datetime-selector-0001__br"><li class="mod-datetime-selector-0001__hyphen">%s</li><li class="mod-datetime-selector-0001__date-field-wrapper"><div class="mod-field-type-select-0001">',
        time_separator: '</div></li><li class="mod-datetime-selector-0001__colon">%s</li><li class="mod-datetime-selector-0001__time-field-wrapper"><div class="mod-field-type-select-0001">',
      }, class: 'selectタグに付与したいclass名'), '年', '月', '日', '時') %>
    </div>
  </li>
  <li class="mod-datetime-selector-0001__colon">分</li>
</ul>