专为 Rails 设计的前端模块化框架

Tao Form 提供日期、时间、日期 + 时间和月份四种时间相关字段。

日期选择

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= f.input :birthday, as: :date %>
<% end %>

时间选择

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= f.input :birth_time, as: :time %>
<% end %>

日期 + 时间选择

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= f.input :birth_time, as: :datetime, value: Time.now.strftime('%Y-%m-%dT%T') %>
<% end %>

月份选择

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= f.input :birthday, as: :month %>
<% end %>

日期范围选择

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= f.input :birthday, as: :date_range %>
<% end %>

组件

日期时间组件可以脱离 input 作为单独的字段渲染,例如

<%= tao_form person, url: docs_persons_path, remote: true do |f| %>
  <%= tao_date_picker f, :birthday, :birthday, placeholder: '选择生日', class: 'date-field' %>
<% end %>

也可以脱离表单使用,例如:

<%= tao_date_picker placeholder: '选择生日' do %>
  <%= date_field_tag :birthday, '', class: 'date-field' %>
<% end %>

初始化选项

disabled
Boolean

指定组件的禁用状态。

value_format
String

指定字段 value 的格式,日期、时间、日期 + 时间和月份字段的默认 value 格式分别是:YYYY-MM-DD HH:mm:ss YYYY-MM-DDTHH:mm:ss YYYY-MM

日期、时间和月份组件独有的初始化选项:

display_format
String

指定组件选择结果的格式,日期、时间和月份字段的默认选择结果格式分别是:YYYY-MM-DD HH:mm YYYY-MM

placeholder
String

指定组件的未选择状态提示文案,默认的文案在组件的 locale 配置里。

icon
String

指定组件上显示的 icon 名称。

disable_before
Moment

禁止选择制定时间之前的日期或时间。

disable_after
Moment

禁止选择制定时间之后的日期或时间。

日期 + 时间组件独有的初始化选项:

date_display_format
String
YYYY-MM-DD

指定日期子组件的选择结果格式。

time_display_format
String
YYYY-MM-DD

指定时间子组件的选择结果格式。

date_placeholder
String

指定日期子组件的未选择状态提示文案,默认文案在日期组件的 locale 配置里。

time_placeholder
String

指定时间子组件的未选择状态提示文案,默认文案在时间组件的 locale 配置里。

date_icon
String

指定日期子组件上显示的 icon 名称。

time_icon
String

指定时间子组件上显示的 icon 名称。

时间组件独有的属性:

minute-step
Number
Default: 5

指定分钟选择视图里,分钟选项的间隔。例如,当 minute_step 设置为15的时候,分钟选项会有:0、15、30、45。

公共方法

setMoment
( m )
Reture: moment object

设置组件的当前选择的时间。参数 m 可以是 String 或者 moment 对象。

事件

tao:change
( m )

当组件选择的时间发生变化时触发。回调方法接收一个 moment 对象作为参数。