           datepicker.range(options.startDate, options.endDate, false, true)
 
       else
-        getValue = ->
-          datepicker.date()
-
-        setValue = (value) ->
-          datepicker.date(value)
-
-      {key: options.key, componentNode: elem, getValue: getValue, setValue: setValue}
-    this
+        getValue = -> datepicker.date()
+        setValue = (value) -> datepicker.date(value)
+
+      {
+        key: options.key
+        componentNode: elem
+        getValue: getValue
+        setValue: setValue
+        hidden: options.hidden
+        disabled: options.disabled
+        disable: (sel, disabled) -> datepicker.disabled(disabled)
+      }
 
   addTimePicker: (name, options = {}) ->
     @add name, 'timepicker', 'div', ->
       elem = @append('div').node()
-
       timepicker = new hx.TimePicker(elem, options.timePickerOptions)
-
-      if options.disabled
-        timepicker.disable()
-
-      getValue = ->
-        timepicker.date()
-
-      setValue = (value) ->
-        timepicker.date(value)
-
-      {key: options.key, componentNode: elem, getValue: getValue, setValue: setValue}
-    this
+      getValue = -> timepicker.date()
+      setValue = (value) -> timepicker.date(value)
+
+      {
+        key: options.key
+        componentNode: elem
+        getValue: getValue
+        setValue: setValue
+        hidden: options.hidden
+        disabled: options.disabled
+        disable: (sel, disabled) -> timepicker.disabled(disabled)
+      }
 
   addDateTimePicker: (name, options = {}) ->
     @add name, 'datetimepicker', 'div', ->
       elem = @append('div').node()
-
       datetimepicker = new hx.DateTimePicker(elem, options.dateTimePickerOptions)
-
-      if options.disabled
-        datetimepicker.disable()
-
-      getValue = ->
-        datetimepicker.date()
-
-      setValue = (value) ->
-        datetimepicker.date(value)
-
-      {key: options.key, componentNode: elem, getValue: getValue, setValue: setValue}
-    this
+      getValue = -> datetimepicker.date()
+      setValue = (value) -> datetimepicker.date(value)
+      {
+        key: options.key
+        componentNode: elem
+        getValue: getValue
+        setValue: setValue
+        hidden: options.hidden
+        disabled: options.disabled
+        disable: (sel, disabled) -> datetimepicker.disabled(disabled)
+      }
 
   addSubmit: (text, icon, submitAction) ->
     hx.select(@selector).append('button')

class Form extends hx.EventEmitter
  constructor: (@selector) ->
    super

    hx.component.register(@selector, this)

    @formId = "form-"+hx.randomId() + '-'

          options.autoCompleteOptions ?= undefined)
      if options.placeholder? then selection.attr('placeholder', options.placeholder)
      if options.required then selection.attr('required', options.required)
      selection.attr(attr.type, attr.value) for attr in options.attrs
      if options.validator? then selection.node().oninput = (e) => e.target.setCustomValidity(options.validator(e) || "")
      {
        required: options.required
        key: options.key
        hidden: options.hidden
        disabled: options.disabled
      }

  addTextArea: (name, options={}) ->
    options.type ?= "textarea"
