Làm thế nào để bọc tất cả các lựa chọn date_select với một div trong Rails?

Question

Tôi đang sử dụng Ruby on Rails 3 để tạo biểu mẫu cho người dùng, nơi anh ấy có thể lưu ngày sinh của mình. Tất cả các hành động xung quanh bộ điều khiển và mô hình hoạt động tốt. Nhưng tôi đang gặp rắc rối với kiểu dáng của biểu mẫu này.

Đối với mỗi lựa chọn trong các biểu mẫu của tôi, tôi quấn một vòng quanh nó, để tạo kiểu cho nó, thường hoạt động tốt. Vấn đề với date_select là nó tạo ra ba hộp chọn mà tất cả được gói vào một div. Như ví dụ trong Haml mã cho lĩnh vực này trông như thế này:

.select-wrapper 
    = f.date_select :birthday, :start_year => Time.now.year - 120, :end_year => Time.now.year 

Các .select_wrapper tạo một div xung quanh tất cả ba hộp chọn nhưng tôi cần mỗi hộp chọn để có nó là wrapper riêng. Có cách nào để giải quyết vấn đề này không?

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn.

Answer 1

Phương pháp 1 (Khó)

Override mã date_select để xử lý trường hợp đặc biệt này dành cho bạn: https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/date_helper.rb#L283

Phương pháp 2 (Easy)

Sử dụng jQuery:

// Find all select boxes that have an ID attribute containing "birthday" 
// and wrap a div tag around them with a certain class 
$('select[id*="birthday"]').wrapAll('<div class="select_wrapper">'); 

Answer 2

Tôi đang sử dụng giải pháp trong volving các tham số :date_separator. cái gì đó dọc theo dòng này:

.select-wrapper 
    = f.date_select :birthday, :start_year => Time.now.year - 120, :end_year => Time.now.year, :date_separator => '</div><div class="select-wrapper">' 

Answer 3

Đây không phải là đẹp nhất, nhưng nó làm việc tốt cho tôi ...

<div class="small-4 columns"><%= f.date_select :release_date, {date_separator: "</div><div class='small-4 columns'>"} %></div> 

đâu <div class="small-4 columns"></div> là những gì tôi muốn mọi thứ phải được bọc trong cơ bản. chỉ cần đảm bảo rằng date_separator là đóng thẻ của tôi và mở thẻ tiếp theo của tôi và đảm bảo rằng việc mở thẻ đầu tiên của tôi trước ngày date_select và đóng thẻ cuối cùng của tôi là sau date_select.

Answer 4

Trong How to let custom FormBuilder wrap datetime_select's selects in e.g. a div? Tôi về cơ bản cũng gặp phải vấn đề tương tự.

JavaScript không phải là một lựa chọn cho tôi và date_separator hack là ... một hack :)

tôi đã đưa ra các giải pháp sau đây (chỉ hoạt động đối với tôi, trong HAML). Tôi nghĩ rằng đó là giải pháp sạch nhất cho đến nay nhưng dựa trên một số nội dung Rails.

- date_time_selector = ActionView::Helpers::DateTimeSelector.new(Time.current, 
      { prefix: @usage.model_name.param_key, 
       field_name: :starttime.to_s, 
       include_position: true }) 
.select 
    = date_time_selector.select_year 
.select 
    = date_time_selector.select_month 
.select 
    = date_time_selector.select_day 
.select 
    = date_time_selector.select_hour 
.select 
    = date_time_selector.select_minute 

Tất cả bạn phải làm là điều chỉnh prefix (@usage trong trường hợp của tôi) và field_name (Attribute-tên, @usage.starttime/starttime trong trường hợp của tôi). Trong ví dụ này, tôi bọc các trường ngày tương ứng trong một div của lớp "select".

Để tham khảo, có rất nhiều lựa chọn hơn để chơi với, đây là một liên kết đến các mã có liên quan:

• https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/tags/date_select.rb (FormBuilders sẽ sử dụng con đường này)
• https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/date_helper.rb (thịt động sản)