- {{#code-inline language='bash'}}
- ember install ember-date-components
- {{/code-inline}}
+
You are encouraged to overwrite the styles to fit your app.
@@ -153,29 +137,23 @@ let app = new EmberApp({
it will automatically be added to your project (via the ember-basic-dropdown addon).
-{{#code-block language='scss'}}
-@import "ember-basic-dropdown";
-@import "ember-date-components/addon";
-{{/code-block}}
+
Note that if you use this partial, you set
- {{#code-inline langauge='javascript'}}
- includeCSS: false
- {{/code-inline}}
+
.
-
\ No newline at end of file
+
diff --git a/tests/dummy/app/usage/custom-options/template.hbs b/tests/dummy/app/usage/custom-options/template.hbs
index 54cbdf7..f36380a 100644
--- a/tests/dummy/app/usage/custom-options/template.hbs
+++ b/tests/dummy/app/usage/custom-options/template.hbs
@@ -6,9 +6,9 @@
The date picker can show custom options by setting
- {{#code-inline language='javascript'}}
+
options=true
- {{/code-inline}}
+
.
This will extend the date picker to show quick select buttons for often used date (-range) values.
@@ -19,9 +19,9 @@
You can also specify custom options. Options also take a
@@ -97,7 +97,7 @@
An example configuration could be:
-{{#code-block language='javascript'}}
+
@@ -72,12 +72,12 @@
- {{#code-block language='handlebars'}}
+
<DatePicker
- @value=\{{this.date}}
- @onChange=\{{this.updateDate}}
+ @value={{this.date}}
+ @onChange={{this.updateDate}}
as |selectedDates|></DatePicker>
- {{/code-block}}
+
Note that this will always receive an array as yielded content.
@@ -114,9 +114,9 @@
This can be null, a moment.js-Date, or an array containing 0-2 moment.js Dates.
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -127,16 +127,16 @@
The action to call whenever the date changes.
The action will receive the selected (moment.js) date as parameter.
If you set
- {{#code-inline language='javascript'}}
+
range=true
- {{/code-inline}}
+
, the action will receive
an array with 2 elements as parameter.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -152,16 +152,16 @@
date-picker is closed. This is especially useful for date range pickers.
The action will receive the selected (moment.js) date as parameter.
If you set
- {{#code-inline language='javascript'}}
+
range=true
- {{/code-inline}}
+
, the action will receive
an array with 2 elements as parameter.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -172,9 +172,9 @@
The minimum selectable date. No date before this date will be selectable.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -185,9 +185,9 @@
The maximum selectable date. No date after this date will be selectable.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -197,15 +197,15 @@
|
If set to true, this will be a date-range picker.
See
- {{#link-to 'usage.date-range-picker'}}
+
Date Range Picker
- {{/link-to}}
+
for more details.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
false
- {{/code-inline}}
+
|
@@ -216,9 +216,9 @@
The placeholder for the date picker. Defaults to 'Select Date...'.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
'Select Date...'
- {{/code-inline}}
+
|
@@ -229,9 +229,9 @@
Classes to add to the date picker button.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
''
- {{/code-inline}}
+
|
@@ -242,9 +242,9 @@
A moment.js-format which is used for the values on the button.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
'L'
- {{/code-inline}}
+
|
@@ -255,9 +255,9 @@
If this is true, the date cannot be changed.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -268,9 +268,9 @@
An array of (moment.js) dates that should not be selectable.
|
- {{#code-inline language='javascript'}}
+
[]
- {{/code-inline}}
+
|
@@ -281,9 +281,9 @@
If this is true, the month picker (when clicking on the month name in the date picker) will be disabled.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -294,9 +294,9 @@
If this is true, the year picker (when clicking on the year in the date picker) will be disabled.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -307,9 +307,9 @@
The number of years to show in the year picker before & after the current year.
|
- {{#code-inline language='javascript'}}
+
10
- {{/code-inline}}
+
|
@@ -320,9 +320,9 @@
If set to true, the calendar will be displayed with the week starting on Sunday.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -338,9 +338,9 @@
for details.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -356,9 +356,9 @@
for details.
|
- {{#code-inline language='javascript'}}
+
'auto'
- {{/code-inline}}
+
|
@@ -374,9 +374,9 @@
for details.
|
- {{#code-inline language='javascript'}}
+
'auto'
- {{/code-inline}}
+
|
diff --git a/tests/dummy/app/usage/date-range-picker/template.hbs b/tests/dummy/app/usage/date-range-picker/template.hbs
index 799c99c..31a484c 100644
--- a/tests/dummy/app/usage/date-range-picker/template.hbs
+++ b/tests/dummy/app/usage/date-range-picker/template.hbs
@@ -6,9 +6,9 @@
The date picker can also be used as a date range picker by setting
- {{#code-inline language='javascript'}}
+
range=true
- {{/code-inline}}
+
.
This will change the behavior of the date picker to select a range instead of a single date.
@@ -22,15 +22,15 @@
Basic Usage
-{{#code-block language='handlebars'}}
- <DatePicker @range=\{{true}} @value=\{{this.value}} @onChange=\{{this.updateDateRange}} />
-{{/code-block}}
+
+ <DatePicker @range={{true}} @value={{this.value}} @onChange={{this.updateDateRange}} />
+
Initial Values
-{{#code-block language='handlebars'}}
- <DatePicker @range=\{{true}} @value=\{{this.value}} @onChange=\{{this.updateDateRange}} />
-{{/code-block}}
\ No newline at end of file
+
+ <DatePicker @range={{true}} @value={{this.value}} @onChange={{this.updateDateRange}} />
+
\ No newline at end of file
diff --git a/tests/dummy/app/usage/date-time-picker/template.hbs b/tests/dummy/app/usage/date-time-picker/template.hbs
index 4228996..d30b09d 100644
--- a/tests/dummy/app/usage/date-time-picker/template.hbs
+++ b/tests/dummy/app/usage/date-time-picker/template.hbs
@@ -13,9 +13,9 @@
-{{#code-block language='handlebars'}}
- <DateTimePicker @value=\{{this.date}} @onChange=\{{this.updateDate}} />
-{{/code-block}}
+
+ <DateTimePicker @value={{this.date}} @onChange={{this.updateDate}} />
+
@@ -58,8 +58,8 @@
.
-{{#code-block language='handlebars'}}
- <DateTimePicker @value=\{{this.date1}} @onChange=\{{this.updateDate1}}>
+
+ <DateTimePicker @value={{this.date1}} @onChange={{this.updateDate1}}>
<:date as |DatePicker|>
<DatePicker @placeholder='Custom placeholder' />
</:date>
@@ -68,7 +68,7 @@
<TimePicker @placeholder='Custom time' />
</:time>
</DateTimePicker>
-{{/code-block}}
+
Attributes
@@ -98,9 +98,9 @@
This can be null or a moment.js-Date.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -112,9 +112,9 @@
The action will receive the selected (moment.js) date as parameter.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -128,9 +128,9 @@
Note that this only affects the display of the time.
|
- {{#code-inline language='javascript'}}
+
true
- {{/code-inline}}
+
|
@@ -141,9 +141,9 @@
If this is true, the date/time cannot be changed.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
diff --git a/tests/dummy/app/usage/testing/template.hbs b/tests/dummy/app/usage/testing/template.hbs
index 7de5ead..12b6478 100644
--- a/tests/dummy/app/usage/testing/template.hbs
+++ b/tests/dummy/app/usage/testing/template.hbs
@@ -8,9 +8,7 @@
Date Picker
-{{#code-block
- language='javascript'
-}}import { selectDate, getSelectedDate, getDatePicker } from 'ember-date-components/test-support/helpers/date-picker';
+import { selectDate, getSelectedDate, getDatePicker } from 'ember-date-components/test-support/helpers/date-picker';
await selectDate('.dom-selector-or-element', moment());
@@ -33,35 +31,29 @@ await datepicker.nextMonth();
await datepicker.previousMonth();
// The current text displayed on the date picker
-datepicker.buttonText();{{/code-block}}
+datepicker.buttonText();
Time Picker
-{{#code-block
- language='javascript'
-}}import { selectTime, getSelectedTime } from 'ember-date-components/test-support/helpers/time-picker';
+import { selectTime, getSelectedTime } from 'ember-date-components/test-support/helpers/time-picker';
await selectTime('.dom-selector-or-element', moment());
await selectTime('.dom-selector-or-element', '15:00');
// Get the currently selected time as a moment instance
-let time = await getSelectedTime('.dom-selector-or-element');{{/code-block}}
+let time = await getSelectedTime('.dom-selector-or-element');
Date-Time Picker
-{{#code-block
- language='javascript'
-}}import { selectDateTime } from 'ember-date-components/test-support/helpers/date-picker';
+import { selectDateTime } from 'ember-date-components/test-support/helpers/date-picker';
-await selectDateTime('.dom-selector-or-element', moment());{{/code-block}}
+await selectDateTime('.dom-selector-or-element', moment());
Date Range Picker
-{{#code-block
- language='javascript'
-}}import { selectDateRange, getSelectedDate, getDatePicker } from 'ember-date-components/test-support/helpers/date-picker';
+import { selectDateRange, getSelectedDate, getDatePicker } from 'ember-date-components/test-support/helpers/date-picker';
await selectDateRange('.dom-selector-or-element', dateFrom, dateTo);
// Note each of the dates could also be null
-let [dateFrom, dateTo] = await getSelectedDate(.dom-selector-or-element');{{/code-block}}
\ No newline at end of file
+let [dateFrom, dateTo] = await getSelectedDate(.dom-selector-or-element');
\ No newline at end of file
diff --git a/tests/dummy/app/usage/time-picker/template.hbs b/tests/dummy/app/usage/time-picker/template.hbs
index 6983d81..5e19e49 100644
--- a/tests/dummy/app/usage/time-picker/template.hbs
+++ b/tests/dummy/app/usage/time-picker/template.hbs
@@ -12,9 +12,9 @@
Basic Usage
-{{#code-block language='handlebars'}}
- <TimePicker @value=\{{this.time}} @onChange=\{{this.updateTime}} />
-{{/code-block}}
+
+ <TimePicker @value={{this.time}} @onChange={{this.updateTime}} />
+
You can pass in either a moment instance as value, or a time in string form like "08:30".
@@ -30,23 +30,23 @@
@maxTime='17:30'
@step={{15}}
/>
-{{#code-block language='handlebars'}}
+
<TimePicker
- @value=\{{this.time}}
- @onChange=\{{this.updateTime}}
+ @value={{this.time}}
+ @onChange={{this.updateTime}}
@minTime='08:30'
@maxTime='17:30'
- @step=\{{15}}
+ @step={{15}}
/>
-{{/code-block}}
+
Disabled
-{{#code-block language='handlebars'}}
- <TimePicker @disabled=\{{true}} @onChange=\{{this.updateTime}} />
-{{/code-block}}
+
+ <TimePicker @disabled={{true}} @onChange={{this.updateTime}} />
+
Notes about the Usage
@@ -55,9 +55,9 @@
Note that this will send moment.js objects with the corresponding times set on them as parameter for the action.
They are basically generated like this:
- {{#code-inline language='javascript'}}
+
moment(0).hours(hours).minutes(minutes);
- {{/code-inline}}
+
.
@@ -65,7 +65,7 @@
This means that you can work with them like this:
-{{#code-block language='javascript'}}
+
actions: {
updateTime(time) {
let date = this.get('date');
@@ -75,11 +75,11 @@
// Do something with newDate
}
}
-{{/code-block}}
+
Or simply use the included util which does exactly the above:
-{{#code-block language='javascript'}}
+
import setTimeOnDate from 'ember-date-components/utils/set-time-on-date';
// ...
@@ -89,7 +89,7 @@ updateTime(time) {
let newDate = setTimeOnDate(date, time);
// Do something with newDate
}
-{{/code-block}}
+
Other useful tips: You can always close the time picker with ESC.
@@ -145,18 +145,18 @@ updateTime(time) {
The default value for the time picker.
This can be null, a moment.js-Date, or a parseable string like
- {{#code-inline}}
+
14:30
- {{/code-inline}}
+
or
- {{#code-inline}}
+
7:15 pm
- {{/code-inline}}
+
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -168,9 +168,9 @@ updateTime(time) {
The action will receive the selected (moment.js) date as parameter.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -182,9 +182,9 @@ updateTime(time) {
This can be either a moment.js date, or a parseable string.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -196,9 +196,9 @@ updateTime(time) {
This can be either a moment.js date, or a parseable string.
|
- {{#code-inline language='javascript'}}
+
null
- {{/code-inline}}
+
|
@@ -210,9 +210,9 @@ updateTime(time) {
Times entered will be rounded to the nearest fitting step.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
30
- {{/code-inline}}
+
|
@@ -222,17 +222,17 @@ updateTime(time) {
|
The steps that are available in the dropdown. By default, this takes the value
from
- {{#code-inline language='javascript' class='no-wrap'}}
+
step
- {{/code-inline}}
+
, so you don't need to define
this again here. You only need to set it if you want
the select to e.g. only show 30 minute steps, while also allowing the entry of 15 minute steps.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
null
- {{/code-inline}}
+
|
@@ -243,9 +243,9 @@ updateTime(time) {
The placeholder for the time input. Defaults to 'Enter time...'.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
'Enter time...'
- {{/code-inline}}
+
|
@@ -256,9 +256,9 @@ updateTime(time) {
Classes to add to the time input.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
''
- {{/code-inline}}
+
|
@@ -269,9 +269,9 @@ updateTime(time) {
Classes to add to the dropdown container.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
''
- {{/code-inline}}
+
|
@@ -284,9 +284,9 @@ updateTime(time) {
You can overwrite this if necessary.
|
- {{#code-inline language='javascript' class='no-wrap'}}
+
true
- {{/code-inline}}
+
|
@@ -297,9 +297,9 @@ updateTime(time) {
If this is true, the time cannot be changed.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -315,9 +315,9 @@ updateTime(time) {
for details.
|
- {{#code-inline language='javascript'}}
+
false
- {{/code-inline}}
+
|
@@ -333,9 +333,9 @@ updateTime(time) {
for details.
|
- {{#code-inline language='javascript'}}
+
'auto'
- {{/code-inline}}
+
|
@@ -351,9 +351,9 @@ updateTime(time) {
for details.
|
- {{#code-inline language='javascript'}}
+
'auto'
- {{/code-inline}}
+
|
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
index 4769bff..88877ca 100644
--- a/tests/dummy/config/environment.js
+++ b/tests/dummy/config/environment.js
@@ -1,20 +1,17 @@
'use strict';
module.exports = function (environment) {
- let ENV = {
+ const ENV = {
modulePrefix: 'dummy',
environment,
rootURL: '/',
- locationType: 'auto',
+ locationType: 'history',
EmberENV: {
+ EXTEND_PROTOTYPES: false,
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
},
- EXTEND_PROTOTYPES: {
- // Prevent Ember Data from overriding Date.parse.
- Date: false,
- },
},
APP: {
diff --git a/config/release.js b/tests/dummy/config/release.js
similarity index 100%
rename from config/release.js
rename to tests/dummy/config/release.js
diff --git a/tests/dummy/config/targets.js b/tests/dummy/config/targets.js
index 4b33327..1e48e05 100644
--- a/tests/dummy/config/targets.js
+++ b/tests/dummy/config/targets.js
@@ -6,13 +6,6 @@ const browsers = [
'last 1 Safari versions',
];
-const isCI = Boolean(process.env.CI);
-const isProduction = process.env.EMBER_ENV === 'production';
-
-if (isCI || isProduction) {
- browsers.push('ie 11');
-}
-
module.exports = {
browsers,
};
diff --git a/tests/helpers/index.js b/tests/helpers/index.js
new file mode 100644
index 0000000..7f70de8
--- /dev/null
+++ b/tests/helpers/index.js
@@ -0,0 +1,42 @@
+import {
+ setupApplicationTest as upstreamSetupApplicationTest,
+ setupRenderingTest as upstreamSetupRenderingTest,
+ setupTest as upstreamSetupTest,
+} from 'ember-qunit';
+
+// This file exists to provide wrappers around ember-qunit's / ember-mocha's
+// test setup functions. This way, you can easily extend the setup that is
+// needed per test type.
+
+function setupApplicationTest(hooks, options) {
+ upstreamSetupApplicationTest(hooks, options);
+
+ // Additional setup for application tests can be done here.
+ //
+ // For example, if you need an authenticated session for each
+ // application test, you could do:
+ //
+ // hooks.beforeEach(async function () {
+ // await authenticateSession(); // ember-simple-auth
+ // });
+ //
+ // This is also a good place to call test setup functions coming
+ // from other addons:
+ //
+ // setupIntl(hooks); // ember-intl
+ // setupMirage(hooks); // ember-cli-mirage
+}
+
+function setupRenderingTest(hooks, options) {
+ upstreamSetupRenderingTest(hooks, options);
+
+ // Additional setup for rendering tests can be done here.
+}
+
+function setupTest(hooks, options) {
+ upstreamSetupTest(hooks, options);
+
+ // Additional setup for unit tests can be done here.
+}
+
+export { setupApplicationTest, setupRenderingTest, setupTest };
diff --git a/tests/index.html b/tests/index.html
index 0462fa3..30c8191 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -2,7 +2,6 @@
-
ember-date-component Tests
@@ -28,7 +27,7 @@