Rails为表单增加时间选框
我使用的是form_tag表单,在text_field_tag中增加时间选框,只需要添加相应的JavaScript类名到text_field_tag中,并在html最后添加时间选框的JavaScript代码即可
html代码:
= text_field_tag "diagnose_task[diagnose_range]", time_ranges[2][0], size: 40, class: "form-control form-control-sm #{'daterange'}"
time_range参数规定了时间选框的默认值,选中后的值传入diagnose_task对象
JavaScript代码:
:coffee
$('.daterange').daterangepicker(
#startDate: moment().subtract(7,'d')
#endDate: moment().subtract(1,'d')
minDate: '2017-01-01 00:00:00'
maxDate: moment().format('YYYY-MM-DD HH:mm:ss')
maxSpan:
days: 365
locale:
format: 'YYYY-MM-DD HH:mm:ss'
separator: ' ~ '
applyLabel: '确定'
cancelLabel: '取消'
#fromLabel: '从'
#toLabel: '到'
customRangeLabel: '自定义'
weekLabel: '周'
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六']
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
firstDay: 1
ranges:
#'今天': [moment(), moment()]
'最近1天': [moment().subtract(1, 'days'), moment()]
'最近3天': [moment().subtract(3, 'days'), moment()]
'最近7天': [moment().subtract(7, 'days'), moment()]
'最近14天': [moment().subtract(14, 'days'), moment()]
'最近30天': [moment().subtract(30, 'days'), moment()]
alwaysShowCalendars: true
#showWeekNumbers: true
#showDropdowns: true
#autoApply: true
applyClass: 'btn-info font-weight-normal'
cancelClass: 'btn-outline-info font-weight-normal'
timePicker: true
timePickerSeconds: true
timePicker24Hour: true
)
$('.daterange').on('apply.daterangepicker', (ev, picker) -> $('#time_range_tag').text(picker.chosenLabel) )
# TODO: on choose start, format begin_time & end_time to beginning_of_day & end_of_day
$('.daterangepicker').addClass('shadow-lg text-info')
选框样式: