Created
April 24, 2013 05:22
-
-
Save karlin/5449814 to your computer and use it in GitHub Desktop.
A DateField view for Ember.js that uses Modernizr to detect HTML 5 date input support and falls back to a simple text field if that's not available. Also uses Moment.js instead of Date for formatting and binding. Otherwise a clone of http://discuss.emberjs.com/t/example-building-a-date-input-field/674/6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Usage: | |
# {{App.DateField dateBinding="date"}} # Where "date" points to a Moment.js object | |
App.DateField = Ember.TextField.extend | |
type: 'date' | |
hasFocus: false | |
placeholderBinding: 'dateFormat' | |
dateFormat:(-> | |
if Modernizr.inputtypes.date then 'YYYY-MM-DD' else 'MM/DD/YYYY' | |
).property() | |
init: -> | |
@_super() | |
@updateValue() | |
updateDate: (-> | |
ms = moment.utc(@get('value'), @get('dateFormat')) | |
@set('date', ms) if ms and ms.isValid() | |
).observes('value') | |
updateValue: (-> | |
return if @get('hasFocus') | |
date = @get('date') | |
if date | |
@set('value', if moment.isMoment(date) then date.utc().format(@get('dateFormat')) else moment.utc(date)) | |
).observes('date') | |
focusIn: -> | |
@set('hasFocus', true) | |
focusOut: -> | |
@set('hasFocus', false) | |
@updateValue() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment