Jump To …


Copyright 2012, 2013 The Apache Software Foundation

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at


Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


Provides support for the core/DateField component.

define ["./dom", "./events", "./messages", "./ajax", "underscore", "./datepicker", "./fields"],
  (dom, events, messages, ajax, _, DatePicker) ->

Translate from the provided order (SUNDAY = 0, MONDAY = 1), to the order needed by the DatePicker component (MONDAY = 0 ... SUNDAY = 6)

    serverFirstDay = parseInt messages "date-symbols.first-day"
    datePickerFirstDay = if serverFirstDay is 0 then 6 else serverFirstDay - 1

Localize a few other things.

    days = (messages "date-symbols.days").split ","

Shuffle sunday to the end, so that monday is first.

    days.push days.shift()

    monthsLabels = (messages "date-symbols.months").split ","
    daysLabels = _.map days, (name) -> name.substr(0, 1).toLowerCase()
    todayLabel = messages "core-datefield-today"
    noneLabel = messages "core-datefield-none"

Track the active popup; only one allowed at a time. May look to rework this later so that there's just one popup and it is moved around the viewport, or around the DOM.

    activePopup = null

    class Controller
      constructor: (@container) ->
        @field = @container.findFirst "input"
        @trigger = @container.findFirst "button"

        @trigger.on "click", =>

      showPopup: ->
        if activePopup and activePopup isnt @popup

        activePopup = @popup

      hidePopup: ->
        activePopup = null

      doTogglePopup: ->
        return if @field.element.disabled

        unless @popup
        else if @popup.visible()

        value = @field.value()

        if value is ""
          @datePicker.setDate null

        @field.addClass "ajax-wait"

        ajax (@container.attr "data-parse-url"),
            input: value
          onerror: (message) =>
            @field.removeClass "ajax-wait"
            @fieldError message


          success: (response) =>
            @field.removeClass "ajax-wait"
            reply = response.json

            if reply.result

              date = new Date()
              date.setTime reply.result
              @datePicker.setDate date

            if reply.error
              @fieldError (_.escape reply.error)

              @datePicker.setDate null


      fieldError: (message) ->
        @field.focus().trigger events.field.showValidationError, { message }

      clearFieldError: ->
        @field.trigger events.field.clearValidationError

      createPopup: ->
        @datePicker = new DatePicker()
        @datePicker.setFirstWeekDay datePickerFirstDay
        @datePicker.setLocalizations monthsLabels, daysLabels, todayLabel, noneLabel
        @popup = dom.create("div", { class: "datefield-popup well"}).append @datePicker.create()
        @container.insertAfter @popup

        @datePicker.onselect = _.bind @onSelect, this

      onSelect: ->
        date = @datePicker.getDate()

        if date is null
          @field.value ""

        @field.addClass "ajax-wait"

        ajax (@container.attr "data-format-url"),
            input: date.getTime()
          failure: (response, message) =>
            @field.removeClass "ajax-wait"
            @fieldError message
          success: (response) =>
            @field.removeClass "ajax-wait"
            @field.value response.json.result


    dom.scanner "[data-component-type='core/DateField']", (container) ->

Hide it from later scans

      container.attr "data-component-type", null

      new Controller(container)

Exports nothing.

    return null