Moved to new date picker.
This commit is contained in:
Martin Edenhofer
parent
783b347260
commit
3b4a9ad3db
6 changed files with 199 additions and 401 deletions
|
|
@ -6,52 +6,36 @@ class App.UiElement.date
|
|||
attribute.nameRaw = attribute.name
|
||||
attribute.name = "{date}#{attribute.name}"
|
||||
|
||||
# get time object
|
||||
if attribute.value
|
||||
if typeof attribute.value is 'string'
|
||||
time = new Date( Date.parse( "#{attribute.value}T00:00:00Z" ) )
|
||||
else
|
||||
time = new Date( attribute.value )
|
||||
|
||||
# time items
|
||||
year = time.getUTCFullYear()
|
||||
month = time.getUTCMonth() + 1
|
||||
day = time.getUTCDate()
|
||||
|
||||
# create element
|
||||
item = $( App.view('generic/date')(
|
||||
attribute: attribute
|
||||
year: year
|
||||
month: month
|
||||
day: day
|
||||
) )
|
||||
|
||||
# start bindings
|
||||
item.find('.js-today').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 0, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-plus-day').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 60 * 24, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-minus-day').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, -60 * 24, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-plus-week').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 60 * 24 * 7, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-minus-week').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, -60 * 24 * 7, false, true)
|
||||
@validation(item, attribute)
|
||||
# apply date widgets
|
||||
$.fn.datepicker.dates['custom'] =
|
||||
days: [App.i18n.translateInline('Sunday'), App.i18n.translateInline('Monday'), App.i18n.translateInline('Tuesday'), App.i18n.translateInline('Wednesday'), App.i18n.translateInline('Thursday'), App.i18n.translateInline('Friday'), App.i18n.translateInline('Saturday'), App.i18n.translateInline('Sunday')],
|
||||
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
daysMin: [App.i18n.translateInline('Su'), App.i18n.translateInline('Mo'), App.i18n.translateInline('Tu'), App.i18n.translateInline('We'), App.i18n.translateInline('Th'), App.i18n.translateInline('Fr'), App.i18n.translateInline('Sa'), App.i18n.translateInline('Su')],
|
||||
months: [App.i18n.translateInline('January'), App.i18n.translateInline('February'), App.i18n.translateInline('March'), App.i18n.translateInline('April'), App.i18n.translateInline('May'), App.i18n.translateInline('June'), App.i18n.translateInline('July'), App.i18n.translateInline('August'), App.i18n.translateInline('September'), App.i18n.translateInline('October'), App.i18n.translateInline('November'), App.i18n.translateInline('December')],
|
||||
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
today: App.i18n.translateInline('today'),
|
||||
clear: App.i18n.translateInline('clear')
|
||||
currentDate = undefined
|
||||
if attribute.value
|
||||
startDate = new Date(attribute.value)
|
||||
item.find('.js-datepicker').datepicker(
|
||||
autoclose: true
|
||||
todayBtn: 'linked'
|
||||
todayHighlight: true
|
||||
#startDate: startDate
|
||||
format: App.i18n.timeFormat().date
|
||||
container: item
|
||||
language: 'custom'
|
||||
)
|
||||
|
||||
# set initial date time
|
||||
@setNewTimeInitial(item, attribute)
|
||||
|
||||
# observer changes
|
||||
item.find('input').bind('keyup blur focus change', (e) =>
|
||||
@setNewTime(item, attribute, 0)
|
||||
@validation(item, attribute, true)
|
||||
|
|
@ -59,64 +43,42 @@ class App.UiElement.date
|
|||
item.bind('validate', (e) =>
|
||||
@validation(item, attribute)
|
||||
)
|
||||
#setShadowTimestamp()
|
||||
@setNewTime(item, attribute, 0)
|
||||
|
||||
item
|
||||
|
||||
@format: (number) ->
|
||||
if number isnt '' && Number(number) < 10
|
||||
number = "0#{Number(number)}"
|
||||
number
|
||||
@setNewTime: (item, attribute, tolerant = false) ->
|
||||
|
||||
@setNewTime: (item, attribute, diff, reset = false, tolerant = false) ->
|
||||
|
||||
resetTimeToToday = =>
|
||||
time = new Date()
|
||||
time.setMinutes( time.getMinutes() + diff )
|
||||
@setParams(item, attribute, time)
|
||||
|
||||
return resetTimeToToday() if reset
|
||||
|
||||
params = @getParams(item)
|
||||
if params.year is '' && params.month is '' && params.day is ''
|
||||
return if !tolerant
|
||||
resetTimeToToday()
|
||||
params = @getParams(item)
|
||||
|
||||
time = new Date( Date.parse( "#{params.year}-#{@format(params.month)}-#{@format(params.day)}T00:00:00Z" ) )
|
||||
time.setMinutes( time.getMinutes() + diff )
|
||||
return if !time
|
||||
@setParams(item, attribute, time)
|
||||
|
||||
@setShadowTimestamp: (item, attribute, time) ->
|
||||
timestamp = ''
|
||||
if time
|
||||
timestamp = time.toISOString().replace(/T\d\d:\d\d:\d\d\.\d\d\dZ$/, '')
|
||||
item.find("[name=\"#{attribute.name}\"]").val(timestamp)
|
||||
|
||||
@setParams: (item, attribute, time) ->
|
||||
App.Log.debug 'UiElement.date.setParams', time.toString()
|
||||
|
||||
if time.toString() is 'Invalid Date'
|
||||
@setShadowTimestamp(item, attribute)
|
||||
datetime = item.find('.js-datepicker').datepicker('getDate')
|
||||
if !datetime || datetime.toString() is 'Invalid Date'
|
||||
App.Log.debug 'UiElement.date.setNewTime', datetime
|
||||
item.find("[name=\"#{attribute.name}\"]").val('')
|
||||
return
|
||||
|
||||
day = time.getDate()
|
||||
month = time.getMonth()+1
|
||||
year = time.getFullYear()
|
||||
item.find('[data-item=day]').val(day)
|
||||
item.find('[data-item=month]').val(month)
|
||||
item.find('[data-item=year]').val(year)
|
||||
@setShadowTimestamp(item, attribute, time)
|
||||
App.Log.debug 'UiElement.date.setNewTime', datetime
|
||||
year = datetime.getFullYear()
|
||||
month = datetime.getMonth() + 1
|
||||
day = datetime.getDate()
|
||||
date = "#{App.Utils.formatTime(year)}-#{App.Utils.formatTime(month,2)}-#{App.Utils.formatTime(day,2)}"
|
||||
|
||||
@getParams: (item) ->
|
||||
params = {}
|
||||
params.day = item.find('[data-item=day]').val().trim()
|
||||
params.month = item.find('[data-item=month]').val().trim()
|
||||
params.year = item.find('[data-item=year]').val().trim()
|
||||
App.Log.debug 'UiElement.date.getParams', params
|
||||
params
|
||||
if date is ''
|
||||
item.find("[name=\"#{attribute.name}\"]").val('')
|
||||
return
|
||||
|
||||
App.Log.debug 'UiElement.date.setNewTime', date
|
||||
item.find("[name=\"#{attribute.name}\"]").val(date)
|
||||
|
||||
@setNewTimeInitial: (item, attribute) ->
|
||||
App.Log.debug 'UiElement.date.setNewTimeInitial', timestamp
|
||||
timestamp = item.find("[name=\"#{attribute.name}\"]").val()
|
||||
return if !timestamp
|
||||
|
||||
timeObject = new Date( Date.parse( timestamp ) )
|
||||
|
||||
hour = timeObject.getHours()
|
||||
minute = timeObject.getMinutes()
|
||||
|
||||
App.Log.debug 'UiElement.date.setNewTimeInitial', timestamp, timeObject
|
||||
item.find('.js-datepicker').datepicker('setUTCDate', timeObject)
|
||||
|
||||
@validation: (item, attribute, runtime) ->
|
||||
|
||||
|
|
@ -126,57 +88,21 @@ class App.UiElement.date
|
|||
item.find('.help-inline').html('')
|
||||
item.closest('.form-group').find('.help-inline').html('')
|
||||
|
||||
params = @getParams(item)
|
||||
timestamp = item.find("[name=\"#{attribute.name}\"]").val()
|
||||
|
||||
# check required attributes
|
||||
errors = {}
|
||||
if !runtime && !attribute.null
|
||||
if params.day is ''
|
||||
errors.day = 'missing'
|
||||
if params.month is ''
|
||||
errors.month = 'missing'
|
||||
if params.year is ''
|
||||
errors.year = 'missing'
|
||||
|
||||
# ranges
|
||||
if params.day
|
||||
daysInMonth = 31
|
||||
if params.month && params.year
|
||||
daysInMonth = new Date(params.year, params.month, 0).getDate()
|
||||
|
||||
if isNaN( Number(params.day) )
|
||||
errors.day = 'invalid'
|
||||
else if Number(params.day) > daysInMonth || Number(params.day) < 1
|
||||
errors.day = 'invalid'
|
||||
|
||||
if params.month
|
||||
if isNaN( Number(params.month) )
|
||||
errors.month = 'invalid'
|
||||
else if Number(params.month) > 12 || Number(params.month) < 1
|
||||
errors.month = 'invalid'
|
||||
|
||||
if params.year
|
||||
if isNaN( Number(params.year) )
|
||||
errors.year = 'invalid'
|
||||
else if Number(params.year) > 2200 || Number(params.year) < 2001
|
||||
errors.year = 'invalid'
|
||||
if !timestamp
|
||||
if !attribute.null
|
||||
errors[attribute.name] = 'missing'
|
||||
else
|
||||
timeObject = new Date( Date.parse( timestamp ) )
|
||||
|
||||
|
||||
#formGroup = item.closest('.form-group')
|
||||
formGroup = item
|
||||
formGroup = item.closest('.form-group')
|
||||
App.Log.debug 'UiElement.date.validation', errors
|
||||
if !_.isEmpty(errors)
|
||||
return if _.isEmpty(errors)
|
||||
|
||||
# if field is required, if not do not show error
|
||||
if params.year is '' && params.day is '' && params.month is ''
|
||||
return if attribute.null
|
||||
item.closest('.form-group').addClass('has-error')
|
||||
item.closest('.form-group').find('.help-inline').text( 'is required' )
|
||||
return
|
||||
|
||||
# show invalid options
|
||||
for key, value of errors
|
||||
formGroup.addClass('has-error')
|
||||
formGroup.find("[data-item=#{key}]").addClass('has-error')
|
||||
|
||||
return
|
||||
# show invalid options
|
||||
for key, value of errors
|
||||
formGroup.addClass('has-error')
|
||||
|
|
|
|||
|
|
@ -6,66 +6,39 @@ class App.UiElement.datetime
|
|||
attribute.nameRaw = attribute.name
|
||||
attribute.name = "{datetime}#{attribute.name}"
|
||||
|
||||
# get time object
|
||||
if attribute.value
|
||||
if typeof attribute.value is 'string'
|
||||
time = new Date( Date.parse( attribute.value ) )
|
||||
else
|
||||
time = new Date( attribute.value )
|
||||
|
||||
# time items
|
||||
year = time.getFullYear()
|
||||
month = time.getMonth() + 1
|
||||
day = time.getDate()
|
||||
hour = time.getHours()
|
||||
minute = time.getMinutes()
|
||||
|
||||
# create element
|
||||
item = $( App.view('generic/datetime')(
|
||||
attribute: attribute
|
||||
year: year
|
||||
month: month
|
||||
day: day
|
||||
hour: hour
|
||||
minute: minute
|
||||
) )
|
||||
|
||||
# start bindings
|
||||
item.find('.js-today').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 0, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-plus-hour').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 60, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-minus-hour').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, -60, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-plus-day').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 60 * 24, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-minus-day').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, -60 * 24, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-plus-week').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, 60 * 24 * 7, false, true)
|
||||
@validation(item, attribute)
|
||||
)
|
||||
item.find('.js-minus-week').bind('click', (e) =>
|
||||
e.preventDefault()
|
||||
@setNewTime(item, attribute, -60 * 24 * 7, false, true)
|
||||
@validation(item, attribute)
|
||||
# apply date widgets
|
||||
$.fn.datepicker.dates['custom'] =
|
||||
days: [App.i18n.translateInline('Sunday'), App.i18n.translateInline('Monday'), App.i18n.translateInline('Tuesday'), App.i18n.translateInline('Wednesday'), App.i18n.translateInline('Thursday'), App.i18n.translateInline('Friday'), App.i18n.translateInline('Saturday'), App.i18n.translateInline('Sunday')],
|
||||
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
daysMin: [App.i18n.translateInline('Su'), App.i18n.translateInline('Mo'), App.i18n.translateInline('Tu'), App.i18n.translateInline('We'), App.i18n.translateInline('Th'), App.i18n.translateInline('Fr'), App.i18n.translateInline('Sa'), App.i18n.translateInline('Su')],
|
||||
months: [App.i18n.translateInline('January'), App.i18n.translateInline('February'), App.i18n.translateInline('March'), App.i18n.translateInline('April'), App.i18n.translateInline('May'), App.i18n.translateInline('June'), App.i18n.translateInline('July'), App.i18n.translateInline('August'), App.i18n.translateInline('September'), App.i18n.translateInline('October'), App.i18n.translateInline('November'), App.i18n.translateInline('December')],
|
||||
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
today: App.i18n.translateInline('today'),
|
||||
clear: App.i18n.translateInline('clear')
|
||||
currentDate = undefined
|
||||
if attribute.value
|
||||
startDate = new Date(attribute.value)
|
||||
item.find('.js-datepicker').datepicker(
|
||||
autoclose: true
|
||||
todayBtn: 'linked'
|
||||
todayHighlight: true
|
||||
#startDate: startDate
|
||||
format: App.i18n.timeFormat().date
|
||||
container: item
|
||||
language: 'custom'
|
||||
)
|
||||
|
||||
# set initial date time
|
||||
@setNewTimeInitial(item, attribute)
|
||||
|
||||
# apply time widgets
|
||||
item.find('.js-timepicker').timepicker()
|
||||
|
||||
# observer changes
|
||||
item.find('input').bind('keyup blur focus change', (e) =>
|
||||
@setNewTime(item, attribute, 0)
|
||||
@validation(item, attribute, true)
|
||||
|
|
@ -73,70 +46,51 @@ class App.UiElement.datetime
|
|||
item.bind('validate', (e) =>
|
||||
@validation(item, attribute)
|
||||
)
|
||||
#setShadowTimestamp()
|
||||
@setNewTime(item, attribute, 0)
|
||||
|
||||
item
|
||||
|
||||
@format: (number) ->
|
||||
if number isnt '' && Number(number) < 10
|
||||
number = "0#{Number(number)}"
|
||||
number
|
||||
@setNewTime: (item, attribute, tolerant = false) ->
|
||||
|
||||
@setNewTime: (item, attribute, diff, reset = false, tolerant = false) ->
|
||||
|
||||
resetTimeToToday = =>
|
||||
time = new Date()
|
||||
time.setMinutes( time.getMinutes() + diff )
|
||||
@setParams(item, attribute, time)
|
||||
|
||||
return resetTimeToToday() if reset
|
||||
|
||||
params = @getParams(item)
|
||||
if params.year is '' && params.month is '' && params.day is '' && params.hour is '' && params.minute is ''
|
||||
return if !tolerant
|
||||
resetTimeToToday()
|
||||
params = @getParams(item)
|
||||
|
||||
time = new Date( Date.parse( "#{params.year}-#{@format(params.month)}-#{@format(params.day)}T#{@format(params.hour)}:#{@format(params.minute)}:00Z" ) )
|
||||
time.setMinutes( time.getMinutes() + diff + time.getTimezoneOffset() )
|
||||
return if !time
|
||||
@setParams(item, attribute, time)
|
||||
|
||||
@setShadowTimestamp: (item, attribute, time) ->
|
||||
timestamp = ''
|
||||
if time
|
||||
timestamp = time.toISOString().replace(/\d\d\.\d\d\dZ$/, '00.000Z')
|
||||
item.find("[name=\"#{attribute.name}\"]").val(timestamp)
|
||||
|
||||
@setParams: (item, attribute, time) ->
|
||||
App.Log.debug 'UiElement.datetime.setParams', time.toString()
|
||||
|
||||
if time.toString() is 'Invalid Date'
|
||||
@setShadowTimestamp(item, attribute)
|
||||
datetime = item.find('.js-datepicker').datepicker('getDate')
|
||||
if !datetime || datetime.toString() is 'Invalid Date'
|
||||
App.Log.debug 'UiElement.datetime.setNewTime', datetime
|
||||
item.find("[name=\"#{attribute.name}\"]").val('')
|
||||
return
|
||||
|
||||
day = time.getDate()
|
||||
month = time.getMonth()+1
|
||||
year = time.getFullYear()
|
||||
hour = time.getHours()
|
||||
minute = time.getMinutes()
|
||||
item.find('[data-item=day]').val(day)
|
||||
item.find('[data-item=month]').val(month)
|
||||
item.find('[data-item=year]').val(year)
|
||||
item.find('[data-item=hour]').val(hour)
|
||||
item.find('[data-item=minute]').val(minute)
|
||||
@setShadowTimestamp(item, attribute, time)
|
||||
App.Log.debug 'UiElement.datetime.setNewTime', datetime
|
||||
year = datetime.getFullYear()
|
||||
month = datetime.getMonth() + 1
|
||||
day = datetime.getDate()
|
||||
date = "#{App.Utils.formatTime(year)}-#{App.Utils.formatTime(month,2)}-#{App.Utils.formatTime(day,2)}"
|
||||
time = item.find('.js-timepicker').val()
|
||||
|
||||
@getParams: (item) ->
|
||||
params = {}
|
||||
params.day = item.find('[data-item=day]').val().trim()
|
||||
params.month = item.find('[data-item=month]').val().trim()
|
||||
params.year = item.find('[data-item=year]').val().trim()
|
||||
params.hour = item.find('[data-item=hour]').val().trim()
|
||||
params.minute = item.find('[data-item=minute]').val().trim()
|
||||
App.Log.debug 'UiElement.datetime.getParams', params
|
||||
params
|
||||
if date is '' || time is ''
|
||||
item.find("[name=\"#{attribute.name}\"]").val('')
|
||||
return
|
||||
|
||||
timestamp = "#{date}T#{time}:00.000Z"
|
||||
time = new Date( Date.parse(timestamp) )
|
||||
time.setMinutes( time.getMinutes() + time.getTimezoneOffset() )
|
||||
App.Log.debug 'UiElement.datetime.setNewTime', time.toString()
|
||||
timestamp = time.toISOString().replace(/\d\d\.\d\d\dZ$/, '00.000Z')
|
||||
item.find("[name=\"#{attribute.name}\"]").val(timestamp)
|
||||
|
||||
@setNewTimeInitial: (item, attribute) ->
|
||||
App.Log.debug 'UiElement.datetime.setNewTimeInitial', timestamp
|
||||
timestamp = item.find("[name=\"#{attribute.name}\"]").val()
|
||||
if !timestamp
|
||||
item.find('.js-timepicker').val('08:00')
|
||||
return
|
||||
|
||||
timeObject = new Date( Date.parse( timestamp ) )
|
||||
|
||||
hour = timeObject.getHours()
|
||||
minute = timeObject.getMinutes()
|
||||
time = "#{App.Utils.formatTime(hour,2)}:#{App.Utils.formatTime(minute,2)}"
|
||||
|
||||
App.Log.debug 'UiElement.datetime.setNewTimeInitial', timestamp, timeObject
|
||||
item.find('.js-datepicker').datepicker('setUTCDate', timeObject)
|
||||
item.find('.js-timepicker').val(time)
|
||||
|
||||
@validation: (item, attribute, runtime) ->
|
||||
|
||||
|
|
@ -146,72 +100,21 @@ class App.UiElement.datetime
|
|||
item.find('.help-inline').html('')
|
||||
item.closest('.form-group').find('.help-inline').html('')
|
||||
|
||||
params = @getParams(item)
|
||||
timestamp = item.find("[name=\"#{attribute.name}\"]").val()
|
||||
|
||||
# check required attributes
|
||||
errors = {}
|
||||
if !runtime && !attribute.null
|
||||
if params.day is ''
|
||||
errors.day = 'missing'
|
||||
if params.month is ''
|
||||
errors.month = 'missing'
|
||||
if params.year is ''
|
||||
errors.year = 'missing'
|
||||
if params.hour is ''
|
||||
errors.hour = 'missing'
|
||||
if params.minute is ''
|
||||
errors.minute = 'missing'
|
||||
if !timestamp
|
||||
if !attribute.null
|
||||
errors[attribute.name] = 'missing'
|
||||
else
|
||||
timeObject = new Date( Date.parse( timestamp ) )
|
||||
|
||||
# ranges
|
||||
if params.day
|
||||
daysInMonth = 31
|
||||
if params.month && params.year
|
||||
daysInMonth = new Date(params.year, params.month, 0).getDate()
|
||||
|
||||
if isNaN( Number(params.day) )
|
||||
errors.day = 'invalid'
|
||||
else if Number(params.day) > daysInMonth || Number(params.day) < 1
|
||||
errors.day = 'invalid'
|
||||
|
||||
if params.month
|
||||
if isNaN( Number(params.month) )
|
||||
errors.month = 'invalid'
|
||||
else if Number(params.month) > 12 || Number(params.month) < 1
|
||||
errors.month = 'invalid'
|
||||
|
||||
if params.year
|
||||
if isNaN( Number(params.year) )
|
||||
errors.year = 'invalid'
|
||||
else if Number(params.year) > 2200 || Number(params.year) < 2001
|
||||
errors.year = 'invalid'
|
||||
|
||||
if params.hour
|
||||
if isNaN( Number(params.hour) )
|
||||
errors.hour = 'invalid'
|
||||
else if parseInt(params.hour) > 23 || parseInt(params.hour) < 0
|
||||
errors.hour = 'invalid'
|
||||
|
||||
if params.minute
|
||||
if isNaN( Number(params.minute) )
|
||||
errors.minute = 'invalid'
|
||||
else if Number(params.minute) > 59
|
||||
errors.minute = 'invalid'
|
||||
|
||||
#formGroup = item.closest('.form-group')
|
||||
formGroup = item
|
||||
formGroup = item.closest('.form-group')
|
||||
App.Log.debug 'UiElement.datetime.validation', errors
|
||||
if !_.isEmpty(errors)
|
||||
return if _.isEmpty(errors)
|
||||
|
||||
# if field is required, if not do not show error
|
||||
if params.year is '' && params.day is '' && params.month is '' && params.hour is '' && params.minute is ''
|
||||
return if attribute.null
|
||||
item.closest('.form-group').addClass('has-error')
|
||||
item.closest('.form-group').find('.help-inline').text( 'is required' )
|
||||
return
|
||||
|
||||
# show invalid options
|
||||
for key, value of errors
|
||||
formGroup.addClass('has-error')
|
||||
formGroup.find("[data-item=#{key}]").addClass('has-error')
|
||||
|
||||
return
|
||||
# show invalid options
|
||||
for key, value of errors
|
||||
formGroup.addClass('has-error')
|
||||
|
|
|
|||
|
|
@ -1,15 +1,4 @@
|
|||
<div class="horizontal form-control" style="padding: 0 0 0 4px; line-height: 40px;" data-name="<%= @attribute.nameRaw %>">
|
||||
<input type="hidden" name="<%= @attribute.name %>" value="<%= @attribute.value %>">
|
||||
<input type="text" maxlength="2" data-item="day" value="<%= @day %>" placeholder="dd" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
.
|
||||
<input type="text" maxlength="2" data-item="month" value="<%= @month %>" placeholder="mm" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
.
|
||||
<input type="text" maxlength="4" data-item="year" value="<%= @year %>" placeholder="yyyy" style="width: 54px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
</div>
|
||||
<% if !@attribute.disable_feature: %>
|
||||
<small>
|
||||
<a href="#" class="js-today"><%- @T('today') %></a> |
|
||||
<a href="#" class="js-minus-day">-1</a> <a href="#" class="js-plus-day">+1</a> <%- @T('day') %> |
|
||||
<a href="#" class="js-minus-week">-7</a> <a href="#" class="js-plus-week">+7</a> <%- @T('days') %>
|
||||
</small>
|
||||
<% end %>
|
||||
<div class="" data-name="<%= @attribute.nameRaw %>">
|
||||
<input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
|
||||
<input type="text" value="" class="form-control js-datepicker" data-item="date">
|
||||
</div>
|
||||
|
|
@ -1,19 +1,6 @@
|
|||
<div class="horizontal form-control" style="padding: 0 0 0 4px; line-height: 40px;" data-name="<%= @attribute.nameRaw %>">
|
||||
<input type="hidden" name="<%= @attribute.name %>" value="<%= @attribute.value %>">
|
||||
<input type="text" maxlength="2" data-item="day" value="<%= @day %>" placeholder="dd" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
.
|
||||
<input type="text" maxlength="2" data-item="month" value="<%= @month %>" placeholder="mm" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
.
|
||||
<input type="text" maxlength="4" data-item="year" value="<%= @year %>" placeholder="yyyy" style="width: 54px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
<input type="text" maxlength="2" data-item="hour" value="<%= @hour %>" placeholder="00" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
:
|
||||
<input type="text" maxlength="2" data-item="minute" value="<%= @minute %>" placeholder="00" style="width: 36px; padding: 6px 6px; border: 1px solid #ffffff; height: 39px;">
|
||||
</div>
|
||||
<% if !@attribute.disable_feature: %>
|
||||
<small>
|
||||
<a href="#" class="js-today"><%- @T('now') %></a> |
|
||||
<a href="#" class="js-minus-hour">-1</a> <a href="#" class="js-plus-hour">+1</a> <%- @T('hour') %> |
|
||||
<a href="#" class="js-minus-day">-1</a> <a href="#" class="js-plus-day">+1</a> <%- @T('day') %> |
|
||||
<a href="#" class="js-minus-week">-7</a> <a href="#" class="js-plus-week">+7</a> <%- @T('days') %>
|
||||
</small>
|
||||
<% end %>
|
||||
<div class="controls--bundle" data-name="<%= @attribute.nameRaw %>">
|
||||
<input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
|
||||
<input type="text" value="" class="form-control js-datepicker" data-item="date">
|
||||
<div class="controls-label"><%- @T('at') %></div>
|
||||
<input type="text" value="" class="form-control time js-timepicker" data-item="time">
|
||||
</div>
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
<p>A date</p>
|
||||
<div class="date form-group">
|
||||
<div class="controls">
|
||||
<input type="text" value="10/28/2015" class="form-control js-datepicker3">
|
||||
<input type="text" value="<%- @Tdate('2014-10-28') %>" class="form-control js-datepicker3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>A date time</p>
|
||||
<div class="date form-group formGroup--bundle">
|
||||
<div class="controls">
|
||||
<input type="text" value="10/28/2015" class="form-control js-datepicker4">
|
||||
<div class="datetime form-group">
|
||||
<div class="controls controls--bundle">
|
||||
<input type="text" value="<%- @Tdate('2015-10-28') %>" class="form-control js-datepicker4">
|
||||
<div class="controls-label">at</div>
|
||||
<input type="text" value="08:00" class="form-control time js-timepicker4">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -127,11 +127,10 @@ test( 'datetime validation check', function() {
|
|||
//equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
|
||||
|
||||
// set new values
|
||||
el.find('[data-name="datetime1"] [data-item="day"]').val(1).trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="month"]').val(1).trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="year"]').val(2015).trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="hour"]').val(12).trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="minute"]').val(42).trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="date"]').val('01/01/2015').trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="date"]').datepicker('setDate')
|
||||
el.find('[data-name="datetime1"] [data-item="time"]').val('12:42').trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="time"]').trigger('change')
|
||||
|
||||
// check params
|
||||
timeStamp = new Date( Date.parse('2015-01-01T12:42:00.000Z') )
|
||||
|
|
@ -151,16 +150,12 @@ test( 'datetime validation check', function() {
|
|||
equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), false, 'check datetime1 has-error')
|
||||
equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
|
||||
|
||||
el.find('[data-name="datetime1"] [data-item="day"]').val('47').trigger('blur')
|
||||
deepEqual( el.find('[data-name="datetime1"] [data-item="day"]').hasClass('has-error'), true )
|
||||
el.find('[data-name="datetime1"] [data-item="month"]').val('1').trigger('blur')
|
||||
deepEqual( el.find('[data-name="datetime1"] [data-item="month"]').hasClass('has-error'), false )
|
||||
el.find('[data-name="datetime1"] [data-item="year"]').val('2015').trigger('blur')
|
||||
deepEqual( el.find('[data-name="datetime1"] [data-item="year"]').hasClass('has-error'), false )
|
||||
el.find('[data-name="datetime1"] [data-item="hour"]').val('12').trigger('blur')
|
||||
deepEqual( el.find('[data-name="datetime1"] [data-item="hour"]').hasClass('has-error'), false )
|
||||
el.find('[data-name="datetime1"] [data-item="minute"]').val('42').trigger('blur')
|
||||
deepEqual( el.find('[data-name="datetime1"] [data-item="minute"]').hasClass('has-error'), false )
|
||||
el.find('[data-name="datetime1"] [data-item="date"]').val('').trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="date"]').datepicker('setDate')
|
||||
el.find('[data-name="datetime1"] [data-item="time"]').val('12:42').trigger('blur')
|
||||
el.find('[data-name="datetime1"] [data-item="time"]').trigger('change')
|
||||
|
||||
equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), true )
|
||||
|
||||
params = App.ControllerForm.params( el )
|
||||
errors = form.validate(params)
|
||||
|
|
@ -169,10 +164,9 @@ test( 'datetime validation check', function() {
|
|||
}
|
||||
deepEqual( errors, test_errors, 'validation errors check' )
|
||||
App.ControllerForm.validate( { errors: errors, form: el } )
|
||||
equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), false, 'check datetime1 no has-error')
|
||||
equal( el.find('[data-name="datetime1"] [data-item="day"]').hasClass('has-error'), true, 'check datetime1 no has-error')
|
||||
equal( el.find('[data-name="datetime1"] [data-item="month"]').hasClass('has-error'), false, 'check datetime1 no has-error')
|
||||
equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), '', 'check datetime1 error message')
|
||||
|
||||
equal( el.find('[data-name="datetime1"]').closest('.form-group').hasClass('has-error'), true, 'check datetime1 no has-error')
|
||||
equal( el.find('[data-name="datetime1"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check datetime1 error message')
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -186,7 +180,7 @@ test( 'date validation check', function() {
|
|||
el: el,
|
||||
model: {
|
||||
configure_attributes: [
|
||||
{ name: 'date1', display: 'Date1', tag: 'date', null: false, default: defaults['time1'] },
|
||||
{ name: 'date2', display: 'Date2', tag: 'date', null: false, default: defaults['time1'] },
|
||||
],
|
||||
},
|
||||
params: defaults,
|
||||
|
|
@ -197,29 +191,29 @@ test( 'date validation check', function() {
|
|||
// check params
|
||||
params = App.ControllerForm.params( el )
|
||||
test_params = {
|
||||
date1: undefined,
|
||||
date2: undefined,
|
||||
}
|
||||
deepEqual( params, test_params, 'params check' )
|
||||
|
||||
errors = form.validate(params)
|
||||
test_errors = {
|
||||
date1: 'is required',
|
||||
date2: 'is required',
|
||||
}
|
||||
deepEqual( errors, test_errors, 'validation errors check' )
|
||||
App.ControllerForm.validate( { errors: errors, form: el } )
|
||||
|
||||
equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), true, 'check date1 has-error')
|
||||
equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check date1 error message')
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), true, 'check date2 has-error')
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check date2 error message')
|
||||
|
||||
// set new values
|
||||
el.find('[data-name="date1"] [data-item="day"]').val('1').trigger('blur')
|
||||
el.find('[data-name="date1"] [data-item="month"]').val('1').trigger('blur')
|
||||
el.find('[data-name="date1"] [data-item="year"]').val('2015').trigger('blur')
|
||||
el.find('[data-name="date2"] [data-item="date"]').val('01/01/2015').trigger('blur')
|
||||
el.find('[data-name="date2"] [data-item="date"]').datepicker('setDate')
|
||||
el.find('[data-name="date2"] [data-item="date"]').trigger('change')
|
||||
|
||||
// check params
|
||||
params = App.ControllerForm.params( el )
|
||||
test_params = {
|
||||
date1: '2015-01-01',
|
||||
date2: '2015-01-01',
|
||||
}
|
||||
deepEqual( params, test_params, 'params check' )
|
||||
|
||||
|
|
@ -228,37 +222,32 @@ test( 'date validation check', function() {
|
|||
test_errors = undefined
|
||||
deepEqual( errors, test_errors, 'validation errors check' )
|
||||
App.ControllerForm.validate( { errors: errors, form: el } )
|
||||
equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), false, 'check date1 has-error')
|
||||
equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), false, 'check date1 has-error')
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
|
||||
|
||||
// set invalid values
|
||||
el.find('[data-name="date1"] [data-item="day"]').val('47').trigger('blur')
|
||||
deepEqual( el.find('[data-name="date1"] [data-item="day"]').hasClass('has-error'), true )
|
||||
el.find('[data-name="date1"] [data-item="month"]').val('1').trigger('blur')
|
||||
deepEqual( el.find('[data-name="date1"] [data-item="month"]').hasClass('has-error'), false )
|
||||
el.find('[data-name="date1"] [data-item="year"]').val('2015').trigger('blur')
|
||||
deepEqual( el.find('[data-name="date1"] [data-item="year"]').hasClass('has-error'), false )
|
||||
el.find('[data-name="date2"] [data-item="date"]').val('').trigger('blur')
|
||||
el.find('[data-name="date2"] [data-item="date"]').datepicker('setDate')
|
||||
el.find('[data-name="date2"] [data-item="date"]').trigger('change')
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), true, 'check date2 has-error')
|
||||
|
||||
// check params
|
||||
params = App.ControllerForm.params( el )
|
||||
test_params = {
|
||||
date1: undefined,
|
||||
date2: undefined,
|
||||
}
|
||||
deepEqual( params, test_params, 'params check' )
|
||||
|
||||
// check errors
|
||||
errors = form.validate(params)
|
||||
test_errors = {
|
||||
date1: 'is required',
|
||||
date2: 'is required',
|
||||
}
|
||||
deepEqual( errors, test_errors, 'validation errors check' )
|
||||
App.ControllerForm.validate( { errors: errors, form: el } )
|
||||
|
||||
equal( el.find('[data-name="date1"]').closest('.form-group').hasClass('has-error'), false, 'check date1 no has-error')
|
||||
equal( el.find('[data-name="date1"] [data-item="day"]').hasClass('has-error'), true, 'check date1 no has-error')
|
||||
equal( el.find('[data-name="date1"] [data-item="month"]').hasClass('has-error'), false, 'check date1 no has-error')
|
||||
equal( el.find('[data-name="date1"]').closest('.form-group').find('.help-inline').text(), '', 'check date1 error message')
|
||||
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').hasClass('has-error'), true, 'check date2 has-error')
|
||||
equal( el.find('[data-name="date2"]').closest('.form-group').find('.help-inline').text(), 'is required', 'check date2 error message')
|
||||
});
|
||||
|
||||
test( "datetime selector check", function() {
|
||||
|
|
@ -284,10 +273,12 @@ test( "datetime selector check", function() {
|
|||
}
|
||||
deepEqual( params, test_params, 'params check' )
|
||||
|
||||
el.find('.js-today').click()
|
||||
timeStamp = new Date()
|
||||
|
||||
el.find('.js-datepicker').datepicker('setDate', timeStamp)
|
||||
el.find('.js-datepicker').trigger('blur')
|
||||
|
||||
// check params
|
||||
timeStamp = new Date()
|
||||
currentTime = timeStamp.toISOString()
|
||||
currentTime = currentTime.replace(/(\d\d\.\d\d\dZ)$/, '00.000Z')
|
||||
params = App.ControllerForm.params( el )
|
||||
|
|
@ -308,7 +299,7 @@ test( "date selector check", function() {
|
|||
el: el,
|
||||
model: {
|
||||
configure_attributes: [
|
||||
{ name: 'date1', display: 'Datet1', tag: 'date', null: false, default: defaults['date1'] },
|
||||
{ name: 'date3', display: 'Datet1', tag: 'date', null: false, default: defaults['date3'] },
|
||||
],
|
||||
},
|
||||
params: defaults,
|
||||
|
|
@ -317,11 +308,14 @@ test( "date selector check", function() {
|
|||
// check params
|
||||
params = App.ControllerForm.params( el )
|
||||
test_params = {
|
||||
date1: undefined,
|
||||
date3: undefined,
|
||||
}
|
||||
deepEqual( params, test_params, 'params check' )
|
||||
|
||||
el.find('.js-today').click()
|
||||
timeStamp = new Date()
|
||||
|
||||
el.find('.js-datepicker').datepicker('setDate', timeStamp)
|
||||
el.find('.js-datepicker').trigger('blur')
|
||||
|
||||
// check params
|
||||
format = function (number) {
|
||||
|
|
@ -331,11 +325,10 @@ test( "date selector check", function() {
|
|||
return number
|
||||
}
|
||||
|
||||
timeStamp = new Date()
|
||||
currentTime = timeStamp.getFullYear() + '-' + format(timeStamp.getMonth()+1) + '-' + format(timeStamp.getDate())
|
||||
params = App.ControllerForm.params( el )
|
||||
test_params = {
|
||||
date1: currentTime,
|
||||
date3: currentTime,
|
||||
}
|
||||
deepEqual( params, test_params, 'params check' )
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue