ember-cli-text-field-mixins

A textbox that will guess the date you want and assign it to your model or query-params.

Demo

The demonstration web application can be found here: http://ember-cli-text-field-mixins.cybertooth.io/.

What Does This Addon Do?

This addon supplies the following components:

• input-date - a basic HTML textbox that will take your input and try to parse it to a date. If the parse succeeds, the date will be formatted according to your preference. Ideal for binding to your model's date fields (e.g. DS.attr('date')) or to your component or controller's properties.
• input-iso8601 - another basic HTML textbox that will once again take your input, parse it to a date, and then store the ISO8601 representation of the date. This is a great way for binding your date to Ember's query parameters.

Further information about these items can be found in the Usage section below and in the demo (dummy) application.

Some Bootstrap Love...

If the supplied value can't be parsed to a date, we add the has-error style class to the .form-group that the {{input-date}} and/or {{input-iso8601}} belongs to. This visualizes that the date parse was rejected.

Requirements

• Ember >= 1.13.0
• Ember CLI

Bower Dependencies

The following Bower dependencies are automatically installed into your Ember product:

• datejs-parse-plus - https://github.com/cybertoothca/Datejs - A fork of the original Datejs (https://github.com/datejs/Datejs) library that is careful to not override the Date's parse(...) function.
• moment - https://github.com/moment/moment
• moment-timezone - https://github.com/moment/moment-timezone

Installation

The following will install this addon:

$ ember install ember-cli-text-field-mixins

Upgrading

When working through the Ember upgrade process, I recommend invoking the ember install ember-cli-text-field-mixins command once you are done to get the latest version of the addon.

This will likely update the bower dependencies listed above.

Usage

As mentioned above there are several examples on the demonstration site: http://ember-cli-text-field-mixins.cybertooth.io/

Components

{{input-date}}

This component makes a textbox. It takes in user input in the form of a date that is swiftly parsed and formatted. The parsed date object is assigned to the component's date property.

Arguments

• date - REQUIRED. Rather than binding to the value property, this textbox input will be binding to the date attribute.
• value - DO NOT USE. I mention the value property because you shouldn't bind anything to it. Users type in the textbox, the date they settle on will be formatted in the textbox which is assigned to the value property. In addition...if you supply a valid date attribute to this textbox, it will be formatted for you. Don't go being all clever trying to do things that are already taken care of for you.
• valueFormat - OPTIONAL, DEFAULT LL. Formatting is done using moment.js. The default format of your dates is the localized LL. You can change this however you want. See the demo.
• startOfDay - COMING SOON OPTIONAL, DEFAULT false. When parsing dates, always set them to the start of the day. If set to true, this will take precedence over the endOfDay property.
• endOfDay - COMING SOON OPTIONAL, DEFAULT false.. When parsing dates, always set them to the last second of the day.
• zone - COMING SOON OPTIONAL, DEFAULT moment.tz.guess(). Dates will be parsed and formatted in the specified timezone.
• All the standard input attributes that apply to text boxes.

Examples

{{input-date date=myModel.createdOn valueFormat="llll"}}

{{input-date date=someComponentProperty}}

<div class="form-group">
  <label for="js-updated-on" class="control-label">Updated</label>
  {{input-date classNames="form-control" elementId="js-updated-on" date=anotherModel.updatedOn}}
  <p class="help-block">Use with bootstrap!</p>
</div>

(Check out the demo...)

{{input-iso8601}}

What's iso8601? Go read: https://en.wikipedia.org/wiki/ISO_8601

Just like {{input-date}}, {{input-iso8601}} also makes a simple textbox. It takes in user input in the form of a date that is swiftly parsed and formatted.

Arguments

• iso8601 - REQUIRED & MUST BE A STRING. Like the {{input-date}} component we do not use the textbox's value property and instead bind to the iso8601 attribute. This iso8601 attribute expects a String and it should be in ISO format (e.g. yyyy-MM-ddTHH:mm:ssZ).
• value - DO NOT USE. I mention the value property because you shouldn't bind anything to it. Users type in the textbox, the date they settle on will be formatted in the textbox which is assigned to the value property. In addition...if you supply a valid date attribute to this textbox, it will be formatted for you. Don't go being all clever trying to do things that are already taken care of for you.
• valueFormat - OPTIONAL, DEFAULT LL. Formatting is done using moment.js. The default format of your dates is the localized LL. You can change this however you want. See the demo.
• startOfDay - COMING SOON OPTIONAL, DEFAULT false. When parsing dates, always set them to the start of the day. If set to true, this will take precedence over the endOfDay property.
• endOfDay - COMING SOON OPTIONAL, DEFAULT false.. When parsing dates, always set them to the last second of the day.
• zone - COMING SOON OPTIONAL, DEFAULT moment.tz.guess(). Dates will be parsed and formatted in the specified timezone.
• All the standard input attributes that apply to text boxes.

Examples

{{input-iso8601 iso8601=myControllerProperty valueFormat="llll"}}

<div class="form-group">
  <label for="js-from" class="control-label">Date From</label>
  {{input-iso8601 classNames="form-control" elementId="js-from" iso8601=anotherControllerProperty}}
  <p class="help-block">Use with bootstrap!</p>
</div>

(Check out the demo...)

Troubleshooting And Tips

None...at least that I can think of.

---

Ember Addon Building And Testing

Setup

• git clone git@github.com:cybertoothca/ember-cli-text-field-mixins.git
• npm install
• bower install

Running The Dummy Application

• ember server
• Visit your app at http://localhost:4200.

Running Addon Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building The Addon

• ember build

For more information on using ember-cli, visit http://ember-cli.com/.

Linking This Addon For Local Testing

Linking

1. From the command line at the root of this project run the npm link command to link this addon within your local node repository.
2. From the other Ember project that you wish to test this addon in, execute the following command: npm link ember-cli-text-field-mixins.
3. Now in that same other Ember project, you should go into the package.json and add the ember addon with the version *. It will look something like this: "ember-cli-text-field-mixins": "*". Now when/if you execute npm install on this other project it will know to look for the linked addon rather than fetch it from the central repository.

Unlinking

1. Remove the addon from your local node repository with the following command (that can be run anywhere): npm uninstall -g ember-cli-text-field-mixins
2. Remove the reference to the ember-cli-text-field-mixins in your other project's package.json.
3. Run an npm prune and bower prune from the root of your other project's command line.

Deploying The Dummy Application

Make sure your ~/.aws/credentials file has a profile named cybertooth with a valid key and secret,

[cybertooth]
aws_access_key_id = <KEY>
aws_secret_access_key = <SECRET>

Deploy by invoking the following command: ember deploy production

Confirm your changes are showing up in our S3 container: http://ember-cli-text-field-mixins.cybertooth.io/