javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(build): rename ionic directory to src and update all references in the build process.

Browse Source
This commit is contained in:
Josh Thomas
2016-05-19 13:20:59 -05:00
parent 8470ae04ac
commit c8f760f080
595 changed files with 73 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/datetime/datetime.ios.scss Normal file
View File

@@ -0,0 +1,15 @@
@import "../../globals.ios";
@import "./datetime";
// iOS DateTime
// --------------------------------------------------
$datetime-ios-padding-top: $item-ios-padding-top !default;
$datetime-ios-padding-right: ($item-ios-padding-right / 2) !default;
$datetime-ios-padding-bottom: $item-ios-padding-bottom !default;
$datetime-ios-padding-left: $item-ios-padding-left !default;
ion-datetime {
padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left;
}

30
src/components/datetime/datetime.scss Normal file
View File

@@ -0,0 +1,30 @@
@import "../../globals.core";
// DateTime
// --------------------------------------------------
ion-datetime {
display: flex;
overflow: hidden;
max-width: 45%;
}
.datetime-text {
overflow: hidden;
flex: 1;
min-width: 16px;
font-size: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.datetime-disabled,
.item-datetime-disabled ion-label {
opacity: .4;
pointer-events: none;
}

894
src/components/datetime/datetime.ts Normal file
View File

@@ -0,0 +1,894 @@
import {Component, Optional, ElementRef, Renderer, Input, Output, Provider, forwardRef, EventEmitter, HostListener, ViewEncapsulation} from '@angular/core';
import {NG_VALUE_ACCESSOR} from '@angular/common';
import {Config} from '../../config/config';
import {Picker, PickerColumn, PickerColumnOption} from '../picker/picker';
import {Form} from '../../util/form';
import {Item} from '../item/item';
import {merge, isBlank, isPresent, isTrueProperty, isArray, isString} from '../../util/util';
import {dateValueRange, renderDateTime, renderTextFormat, convertFormatToKey, getValueFromFormat, parseTemplate, parseDate, updateDate, DateTimeData, convertDataToISO, daysInMonth, dateSortValue, dateDataSortValue, LocaleData} from '../../util/datetime-util';
import {NavController} from '../nav/nav-controller';
const DATETIME_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => DateTime), multi: true});
/**
* @name DateTime
* @description
* The DateTime component is used to present an interface which makes it easy for
* users to select dates and times. Tapping on `<ion-datetime>` will display a picker
* interface that slides up from the bottom of the page. The picker then displays
* scrollable columns that can be used to individually select years, months, days,
* hours and minute values. The DateTime component is similar to the native
* `<input type="datetime-local">` element, however, Ionic's DateTime component makes
* it easy to display the date and time in a preferred format, and manage the datetime
* values.
*
* ```html
* <ion-item>
* <ion-label>Date</ion-label>
* <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate"></ion-datetime>
* </ion-item>
* ```
*
*
* ## Display and Picker Formats
*
* The DateTime component displays the values in two places: in the `<ion-datetime>`
* component, and in the interface that is presented from the bottom of the screen.
* The following chart lists all of the formats that can be used.
*
* | Format | Description | Example |
* |---------|--------------------------------|-------------------------|
* | `YYYY` | Year, 4 digits | `2018` |
* | `YY` | Year, 2 digits | `18` |
* | `M` | Month | `1` ... `12` |
* | `MM` | Month, leading zero | `01` ... `12` |
* | `MMM` | Month, short name | `Jan` |
* | `MMMM` | Month, full name | `January` |
* | `D` | Day | `1` ... `31` |
* | `DD` | Day, leading zero | `01` ... `31` |
* | `DDD` | Day, short name | `Fri` |
* | `DDDD` | Day, full name | `Friday` |
* | `H` | Hour, 24-hour | `0` ... `23` |
* | `HH` | Hour, 24-hour, leading zero | `00` ... `23` |
* | `h` | Hour, 12-hour | `1` ... `12` |
* | `hh` | Hour, 12-hour, leading zero | `01` ... `12` |
* | `a` | 12-hour time period, lowercase | `am` `pm` |
* | `A` | 12-hour time period, uppercase | `AM` `PM` |
* | `m` | Minute | `1` ... `59` |
* | `mm` | Minute, leading zero | `01` ... `59` |
* | `s` | Second | `1` ... `59` |
* | `ss` | Second, leading zero | `01` ... `59` |
* | `Z` | UTC Timezone Offset | `Z or +HH:mm or -HH:mm` |
*
* **Important**: See the [Month Names and Day of the Week Names](#month-names-and-day-of-the-week-names)
* section below on how to use different names for the month and day.
*
* ### Display Format
*
* The `displayFormat` input property specifies how a datetime's value should be
* printed, as formatted text, within the `ion-datetime` component.
*
* In the following example, the display in the `<ion-datetime>` will use the
* month's short name, the numerical day with a leading zero, a comma and the
* four-digit year. In addition to the date, it will display the time with the hours
* in the 24-hour format and the minutes. Any character can be used as a separator.
* An example display using this format is: `Jun 17, 2005 11:06`.
*
* ```html
* <ion-item>
* <ion-label>Date</ion-label>
* <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
* </ion-item>
* ```
*
* ### Picker Format
*
* The `pickerFormat` input property determines which columns should be shown in the
* interface, the order of the columns, and which format to use within each column.
* If the `pickerFormat` input is not provided then it will default to the `displayFormat`.
*
* In the following example, the display in the `<ion-datetime>` will use the
* `MM/YYYY` format, such as `06/2020`. However, the picker interface
* will display two columns with the month's long name, and the four-digit year.
*
* ```html
* <ion-item>
* <ion-label>Date</ion-label>
* <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [(ngModel)]="myDate"></ion-datetime>
* </ion-item>
* ```
*
* ### Datetime Data
*
* Historically, handling datetime values within JavaScript, or even within HTML
* inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
* notoriously difficult to correctly parse apart datetime strings or to format
* datetime values. Even worse is how different browsers and JavaScript versions
* parse various datetime strings differently, especially per locale.
*
* But no worries, all is not lost! Ionic's datetime input has been designed so
* developers can avoid the common pitfalls, allowing developers to easily format
* datetime values within the input, and give the user a simple datetime picker for a
* great user experience.
*
* ##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
*
* Ionic uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
* for its value. The value is simply a string, rather than using JavaScript's `Date`
* object. Additionally, when using the ISO datetime format, it makes it easier
* to serialize and pass within JSON objects, and sending databases a standardized
* format which it can be easily parsed if need be.
*
* An ISO format can be used as a simple year, or just the hour and minute, or get more
* detailed down to the millisecond and timezone. Any of the ISO formats below can be used,
* and after a user selects a new value, Ionic will continue to use the same ISO format
* which datetime value was originally given as.
*
* | Description | Format | Datetime Value Example |
* |----------------------|------------------------|------------------------------|
* | Year | YYYY | 1994 |
* | Year and Month | YYYY-MM | 1994-12 |
* | Complete Date | YYYY-MM-DD | 1994-12-15 |
* | Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
* | UTC Timezone | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789Z |
* | Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20.789+5:00 |
* | Hour and Minute | HH:mm | 13:47 |
* | Hour, Minute, Second | HH:mm:ss | 13:47:20 |
*
* Note that the year is always four-digits, milliseconds (if it's added) is always
* three-digits, and all others are always two-digits. So the number representing
* January always has a leading zero, such as `01`. Additionally, the hour is always
* in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means `1pm`,
* and `23` means `11pm`.
*
* It's also important to note that neither the `displayFormat` or `pickerFormat` can
* set the datetime value's output, which is the value that sent the the component's
* `ngModel`. The format's are merely for displaying the value as text and the picker's
* interface, but the datetime's value is always persisted as a valid ISO 8601 datetime
* string.
*
*
* ## Min and Max Datetimes
*
* Dates are infinite in either direction, so for a user's selection there should be at
* least some form of restricting the dates that can be selected. Be default, the maximum
* date is to the end of the current year, and the minimum date is from the beginning
* of the year that was 100 years ago.
*
* To customize the minimum and maximum datetime values, the `min` and `max` component
* inputs can be provided which may make more sense for the app's use-case, rather
* than the default of the last 100 years. Following the same IS0 8601 format listed
* in the table above, each component can restrict which dates can be selected by the
* user. Below is an example of restricting the date selection between the beginning
* of 2016, and October 31st of 2020:
*
* ```html
* <ion-item>
* <ion-label>Date</ion-label>
* <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
* </ion-datetime>
* </ion-item>
* ```
*
*
* ## Month Names and Day of the Week Names
*
* At this time, there is no one-size-fits-all standard to automatically choose the correct
* language/spelling for a month name, or day of the week name, depending on the language
* or locale. Good news is that there is an
* [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
* standard which *most* browsers have adopted. However, at this time the standard has not
* been fully implemented by all popular browsers so Ionic is unavailable to take advantage
* of it *yet*. Additionally, Angular also provides an internationalization service, but it
* is still under heavy development so Ionic does not depend on it at this time.
*
* All things considered, the by far easiest solution is to just provide an array of names
* if the app needs to use names other than the default English version of month and day
* names. The month names and day names can be either configured at the app level, or
* individual `ion-datetime` level.
*
* ### App Config Level
*
* ```ts
* @App({
* config: {
* monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
* monthShortNames: ['jan', 'fev', 'mar', ... ],
* dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
* dayShortNames: ['dom', 'seg', 'ter', ... ],
* }
* })
* ```
*
* ### Component Input Level
*
* ```html
* <ion-item>
* <ion-label>Período</ion-label>
* <ion-datetime displayFormat="DDDD MMM D, YYYY" [(ngModel)]="myDate"
* monthNames="janeiro, fevereiro, mar\u00e7o, ..."
* monthShortNames="jan, fev, mar, ..."
* dayNames="domingo, segunda-feira, ter\u00e7a-feira, ..."
* dayShortNames="dom, seg, ter, ..."></ion-datetime>
* </ion-item>
* ```
*
*
* ### Advanced Datetime Validation and Manipulation
*
* The datetime picker provides the simplicity of selecting an exact format, and persists
* the datetime values as a string using the standardized
* [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime).
* However, it's important to note that `ion-datetime` does not attempt to solve all
* situtations when validating and manipulating datetime values. If datetime values need
* to be parsed from a certain format, or manipulated (such as adding 5 days to a date,
* subtracting 30 minutes, etc.), or even formatting data to a specific locale, then we highly
* recommend using [moment.js](http://momentjs.com/) to "Parse, validate, manipulate, and
* display dates in JavaScript". [Moment.js](http://momentjs.com/) has quickly become
* our goto standard when dealing with datetimes within JavaScript, but Ionic does not
* prepackage this dependency since most apps will not require it, and its locale
* configuration should be decided by the end-developer.
*
*
* @usage
* ```html
* <ion-item>
* <ion-label>Date</ion-label>
* <ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="myDate">
* </ion-datetime>
* </ion-item>
* ```
*
*
* @demo /docs/v2/demos/datetime/
*/
@Component({
selector: 'ion-datetime',
template:
'<div class="datetime-text">{{_text}}</div>' +
'<button aria-haspopup="true" ' +
'type="button" ' +
'[id]="id" ' +
'category="item-cover" ' +
'[attr.aria-labelledby]="_labelId" ' +
'[attr.aria-disabled]="_disabled" ' +
'class="item-cover">' +
'</button>',
host: {
'[class.datetime-disabled]': '_disabled'
},
providers: [DATETIME_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
})
export class DateTime {
private _disabled: any = false;
private _labelId: string;
private _text: string = '';
private _fn: Function;
private _isOpen: boolean = false;
private _min: DateTimeData;
private _max: DateTimeData;
private _value: DateTimeData = {};
private _locale: LocaleData = {};
/**
* @private
*/
id: string;
/**
* @input {string} The minimum datetime allowed. Value must be a date string
* following the
* [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
* such as `1996-12-19`. The format does not have to be specific to an exact
* datetime. For example, the minimum could just be the year, such as `1994`.
* Defaults to the beginning of the year, 100 years ago from today.
*/
@Input() min: string;
/**
* @input {string} The maximum datetime allowed. Value must be a date string
* following the
* [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime),
* `1996-12-19`. The format does not have to be specific to an exact
* datetime. For example, the maximum could just be the year, such as `1994`.
* Defaults to the end of this year.
*/
@Input() max: string;
/**
* @input {string} The display format of the date and time as text that shows
* within the item. When the `pickerFormat` input is not used, then the
* `displayFormat` is used for both display the formatted text, and determining
* the datetime picker's columns. See the `pickerFormat` input description for
* more info. Defaults to `MMM D, YYYY`.
*/
@Input() displayFormat: string = 'MMM D, YYYY';
/**
* @input {string} The format of the date and time picker columns the user selects.
* A datetime input can have one or many datetime parts, each getting their
* own column which allow individual selection of that particular datetime part. For
* example, year and month columns are two individually selectable columns which help
* choose an exact date from the datetime picker. Each column follows the string
* parse format. Defaults to use `displayFormat`.
*/
@Input() pickerFormat: string;
/**
* @input {string} The text to display on the picker's cancel button. Default: `Cancel`.
*/
@Input() cancelText: string = 'Cancel';
/**
* @input {string} The text to display on the picker's "Done" button. Default: `Done`.
*/
@Input() doneText: string = 'Done';
/**
* @input {array | string} Values used to create the list of selectable years. By default
* the year values range between the `min` and `max` datetime inputs. However, to
* control exactly which years to display, the `yearValues` input can take either an array
* of numbers, or string of comma separated numbers. For example, to show upcoming and
* recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
*/
@Input() yearValues: any;
/**
* @input {array | string} Values used to create the list of selectable months. By default
* the month values range from `1` to `12`. However, to control exactly which months to
* display, the `monthValues` input can take either an array of numbers, or string of
* comma separated numbers. For example, if only summer months should be shown, then this
* input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a
* zero-based index, meaning January's value is `1`, and December's is `12`.
*/
@Input() monthValues: any;
/**
* @input {array | string} Values used to create the list of selectable days. By default
* every day is shown for the given month. However, to control exactly which days of
* the month to display, the `dayValues` input can take either an array of numbers, or
* string of comma separated numbers. Note that even if the array days have an invalid
* number for the selected month, like `31` in February, it will correctly not show
* days which are not valid for the selected month.
*/
@Input() dayValues: any;
/**
* @input {array | string} Values used to create the list of selectable hours. By default
* the hour values range from `1` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
* to control exactly which hours to display, the `hourValues` input can take either an
* array of numbers, or string of comma separated numbers.
*/
@Input() hourValues: any;
/**
* @input {array | string} Values used to create the list of selectable minutes. By default
* the mintues range from `0` to `59`. However, to control exactly which minutes to display,
* the `minuteValues` input can take either an array of numbers, or string of comma separated
* numbers. For example, if the minute selections should only be every 15 minutes, then
* this input value would be `minuteValues="0,15,30,45"`.
*/
@Input() minuteValues: any;
/**
* @input {array} Full names for each month name. This can be used to provide
* locale month names. Defaults to English.
*/
@Input() monthNames: any;
/**
* @input {array} Short abbreviated names for each month name. This can be used to provide
* locale month names. Defaults to English.
*/
@Input() monthShortNames: any;
/**
* @input {array} Full day of the week names. This can be used to provide
* locale names for each day in the week. Defaults to English.
*/
@Input() dayNames: any;
/**
* @input {array} Short abbreviated day of the week names. This can be used to provide
* locale names for each day in the week. Defaults to English.
*/
@Input() dayShortNames: any;
/**
* @input {any} Any additional options that the picker interface can accept.
* See the [Picker API docs](../../picker/Picker) for the picker options.
*/
@Input() pickerOptions: any = {};
/**
* @output {any} Any expression to evaluate when the datetime selection has changed.
*/
@Output() change: EventEmitter<any> = new EventEmitter();
/**
* @output {any} Any expression to evaluate when the datetime selection was cancelled.
*/
@Output() cancel: EventEmitter<any> = new EventEmitter();
constructor(
private _form: Form,
private _config: Config,
@Optional() private _item: Item,
@Optional() private _nav: NavController
) {
this._form.register(this);
if (_item) {
this.id = 'dt-' + _item.registerInput('datetime');
this._labelId = 'lbl-' + _item.id;
this._item.setCssClass('item-datetime', true);
}
if (!_nav) {
console.error('parent <ion-nav> required for <ion-datetime>');
}
}
@HostListener('click', ['$event'])
private _click(ev) {
if (ev.detail === 0) {
// do not continue if the click event came from a form submit
return;
}
ev.preventDefault();
ev.stopPropagation();
this.open();
}
@HostListener('keyup.space', ['$event'])
private _keyup(ev) {
if (!this._isOpen) {
this.open();
}
}
/**
* @private
*/
open() {
if (this._disabled) {
return;
}
console.debug('datetime, open picker');
// the user may have assigned some options specifically for the alert
let pickerOptions = merge({}, this.pickerOptions);
let picker = Picker.create(pickerOptions);
pickerOptions.buttons = [
{
text: this.cancelText,
role: 'cancel',
handler: () => {
this.cancel.emit(null);
}
},
{
text: this.doneText,
handler: (data) => {
console.log('datetime, done', data);
this.onChange(data);
this.change.emit(data);
}
}
];
this.generate(picker);
this.validate(picker);
picker.change.subscribe(() => {
this.validate(picker);
});
this._nav.present(picker, pickerOptions);
this._isOpen = true;
picker.onDismiss(() => {
this._isOpen = false;
});
}
/**
* @private
*/
generate(picker: Picker) {
// if a picker format wasn't provided, then fallback
// to use the display format
let template = this.pickerFormat || this.displayFormat;
if (isPresent(template)) {
// make sure we've got up to date sizing information
this.calcMinMax();
// does not support selecting by day name
// automaticallly remove any day name formats
template = template.replace('DDDD', '{~}').replace('DDD', '{~}');
if (template.indexOf('D') === -1) {
// there is not a day in the template
// replace the day name with a numeric one if it exists
template = template.replace('{~}', 'D');
}
// make sure no day name replacer is left in the string
template = template.replace(/{~}/g, '');
// parse apart the given template into an array of "formats"
parseTemplate(template).forEach(format => {
// loop through each format in the template
// create a new picker column to build up with data
let key = convertFormatToKey(format);
let values: any[];
// first see if they have exact values to use for this input
if (isPresent(this[key + 'Values'])) {
// user provide exact values for this date part
values = convertToArrayOfNumbers(this[key + 'Values'], key);
} else {
// use the default date part values
values = dateValueRange(format, this._min, this._max);
}
let column: PickerColumn = {
name: key,
options: values.map(val => {
return {
value: val,
text: renderTextFormat(format, val, null, this._locale),
};
})
};
if (column.options.length) {
// cool, we've loaded up the columns with options
// preselect the option for this column
var selected = column.options.find(opt => opt.value === getValueFromFormat(this._value, format));
if (selected) {
// set the select index for this column's options
column.selectedIndex = column.options.indexOf(selected);
}
// add our newly created column to the picker
picker.addColumn(column);
}
});
this.divyColumns(picker);
}
}
/**
* @private
*/
validate(picker: Picker) {
let i: number;
let today = new Date();
let columns = picker.getColumns();
// find the columns used
let yearCol = columns.find(col => col.name === 'year');
let monthCol = columns.find(col => col.name === 'month');
let dayCol = columns.find(col => col.name === 'day');
let yearOpt: PickerColumnOption;
let monthOpt: PickerColumnOption;
let dayOpt: PickerColumnOption;
// default to assuming today's year
let selectedYear = today.getFullYear();
if (yearCol) {
yearOpt = yearCol.options[yearCol.selectedIndex];
if (yearOpt) {
// they have a selected year value
selectedYear = yearOpt.value;
}
}
// default to assuming this month has 31 days
let numDaysInMonth = 31;
let selectedMonth;
if (monthCol) {
monthOpt = monthCol.options[monthCol.selectedIndex];
if (monthOpt) {
// they have a selected month value
selectedMonth = monthOpt.value;
// calculate how many days are in this month
numDaysInMonth = daysInMonth(selectedMonth, selectedYear);
}
}
// create sort values for the min/max datetimes
let minCompareVal = dateDataSortValue(this._min);
let maxCompareVal = dateDataSortValue(this._max);
if (monthCol) {
// enable/disable which months are valid
// to show within the min/max date range
for (i = 0; i < monthCol.options.length; i++) {
monthOpt = monthCol.options[i];
// loop through each month and see if it
// is within the min/max date range
monthOpt.disabled = (dateSortValue(selectedYear, monthOpt.value, 31) < minCompareVal ||
dateSortValue(selectedYear, monthOpt.value, 1) > maxCompareVal);
}
}
if (dayCol) {
if (isPresent(selectedMonth)) {
// enable/disable which days are valid
// to show within the min/max date range
for (i = 0; i < 31; i++) {
dayOpt = dayCol.options[i];
// loop through each day and see if it
// is within the min/max date range
var compareVal = dateSortValue(selectedYear, selectedMonth, dayOpt.value);
dayOpt.disabled = (compareVal < minCompareVal ||
compareVal > maxCompareVal ||
numDaysInMonth <= i);
}
} else {
// enable/disable which numbers of days to show in this month
for (i = 0; i < 31; i++) {
dayCol.options[i].disabled = (numDaysInMonth <= i);
}
}
}
picker.refresh();
}
/**
* @private
*/
divyColumns(picker: Picker) {
let pickerColumns = picker.getColumns();
let columns = [];
pickerColumns.forEach((col, i) => {
columns.push(0);
col.options.forEach(opt => {
if (opt.text.length > columns[i]) {
columns[i] = opt.text.length;
}
});
});
if (columns.length === 2) {
var width = Math.max(columns[0], columns[1]);
pickerColumns[0].columnWidth = pickerColumns[1].columnWidth = `${width * 16}px`;
} else if (columns.length === 3) {
var width = Math.max(columns[0], columns[2]);
pickerColumns[1].columnWidth = `${columns[1] * 16}px`;
pickerColumns[0].columnWidth = pickerColumns[2].columnWidth = `${width * 16}px`;
} else if (columns.length > 3) {
columns.forEach((col, i) => {
pickerColumns[i].columnWidth = `${col * 12}px`;
});
}
}
/**
* @private
*/
setValue(newData: any) {
updateDate(this._value, newData);
}
/**
* @private
*/
getValue(): DateTimeData {
return this._value;
}
/**
* @private
*/
updateText() {
// create the text of the formatted data
this._text = renderDateTime(this.displayFormat, this._value, this._locale);
}
/**
* @private
*/
calcMinMax() {
let todaysYear = new Date().getFullYear();
if (isBlank(this.min)) {
if (isPresent(this.yearValues)) {
this.min = Math.min.apply(Math, convertToArrayOfNumbers(this.yearValues, 'year'));
} else {
this.min = (todaysYear - 100).toString();
}
}
if (isBlank(this.max)) {
if (isPresent(this.yearValues)) {
this.max = Math.max.apply(Math, convertToArrayOfNumbers(this.yearValues, 'year'));
} else {
this.max = todaysYear.toString();
}
}
let min = this._min = parseDate(this.min);
let max = this._max = parseDate(this.max);
min.month = min.month || 1;
min.day = min.day || 1;
min.hour = min.hour || 0;
min.minute = min.minute || 0;
min.second = min.second || 0;
max.month = max.month || 12;
max.day = max.day || 31;
max.hour = max.hour || 23;
max.minute = max.minute || 59;
max.second = max.second || 59;
}
/**
* @input {boolean} Whether or not the datetime component is disabled. Default `false`.
*/
@Input()
get disabled() {
return this._disabled;
}
set disabled(val) {
this._disabled = isTrueProperty(val);
this._item && this._item.setCssClass('item-datetime-disabled', this._disabled);
}
/**
* @private
*/
writeValue(val: any) {
console.debug('datetime, writeValue', val);
this.setValue(val);
this.updateText();
}
/**
* @private
*/
ngAfterContentInit() {
// first see if locale names were provided in the inputs
// then check to see if they're in the config
// if neither were provided then it will use default English names
['monthNames', 'monthShortNames', 'dayNames', 'dayShortNames'].forEach(type => {
this._locale[type] = convertToArrayOfStrings(isPresent(this[type]) ? this[type] : this._config.get(type), type);
});
// update how the datetime value is displayed as formatted text
this.updateText();
}
/**
* @private
*/
registerOnChange(fn: Function): void {
this._fn = fn;
this.onChange = (val: any) => {
console.debug('datetime, onChange', val);
this.setValue(val);
this.updateText();
// convert DateTimeData value to iso datetime format
fn(convertDataToISO(this._value));
this.onTouched();
};
}
/**
* @private
*/
registerOnTouched(fn) { this.onTouched = fn; }
/**
* @private
*/
onChange(val: any) {
// onChange used when there is not an ngControl
console.debug('datetime, onChange w/out ngControl', val);
this.setValue(val);
this.updateText();
this.onTouched();
}
/**
* @private
*/
onTouched() { }
/**
* @private
*/
ngOnDestroy() {
this._form.deregister(this);
}
}
/**
* @private
* Use to convert a string of comma separated numbers or
* an array of numbers, and clean up any user input
*/
function convertToArrayOfNumbers(input: any, type: string): number[] {
var values: number[] = [];
if (isString(input)) {
// convert the string to an array of strings
// auto remove any whitespace and [] characters
input = input.replace(/\[|\]|\s/g, '').split(',');
}
if (isArray(input)) {
// ensure each value is an actual number in the returned array
input.forEach(num => {
num = parseInt(num, 10);
if (!isNaN(num)) {
values.push(num);
}
});
}
if (!values.length) {
console.warn(`Invalid "${type}Values". Must be an array of numbers, or a comma separated string of numbers.`);
}
return values;
}
/**
* @private
* Use to convert a string of comma separated strings or
* an array of strings, and clean up any user input
*/
function convertToArrayOfStrings(input: any, type: string): string[] {
if (isPresent(input)) {
var values: string[] = [];
if (isString(input)) {
// convert the string to an array of strings
// auto remove any [] characters
input = input.replace(/\[|\]/g, '').split(',');
}
if (isArray(input)) {
// trim up each string value
input.forEach(val => {
val = val.trim();
if (val) {
values.push(val);
}
});
}
if (!values.length) {
console.warn(`Invalid "${type}Names". Must be an array of strings, or a comma separated string.`);
}
return values;
}
}

8
src/components/datetime/test/basic/e2e.ts Normal file
View File

@@ -0,0 +1,8 @@
it('should open basic datetime picker', function() {
element(by.css('.e2eOpenMMDDYYYY')).click();
});
it('should close with Done button click', function() {
element(by.css('.picker-button:last-child')).click();
});

41
src/components/datetime/test/basic/index.ts Normal file
View File

@@ -0,0 +1,41 @@
import {App, Page} from '../../../../../ionic';
@Page({
templateUrl: 'main.html'
})
class E2EPage {
wwwInvented = '1989';
time = '13:47';
netscapeReleased = '1994-12-15T13:47:20.789';
operaReleased = '1995-04-15';
firefoxReleased = '2002-09-23T15:03:46.789';
webkitOpenSourced = '2005-06-17T11:06Z';
chromeReleased = '2008-09-02';
leapYearsSummerMonths = '';
leapYearsArray = [2020, 2016, 2008, 2004, 2000, 1996];
customShortDay = [
's\u00f8n',
'man',
'tir',
'ons',
'tor',
'fre',
'l\u00f8r'
];
}
@App({
template: '<ion-nav [root]="root"></ion-nav>'
})
class E2EApp {
root;
constructor() {
this.root = E2EPage;
}
}

71
src/components/datetime/test/basic/main.html Normal file
View File

@@ -0,0 +1,71 @@
<ion-toolbar>
<ion-title>Datetime</ion-title>
</ion-toolbar>
<ion-content class="outer-content">
<ion-item>
<ion-label>YYYY</ion-label>
<ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MMMM YY</ion-label>
<ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased" class="e2eOpenMMDDYYYY"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
<ion-datetime [(ngModel)]="operaReleased" min="1990-02" max="2000"
displayFormat="DDD. MMM DD, YY"
monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
[dayShortNames]="customShortDay"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>D MMM YYYY H:mm</ion-label>
<ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" [(ngModel)]="webkitOpenSourced"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>DDDD MMM D, YYYY</ion-label>
<ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>HH:mm</ion-label>
<ion-datetime displayFormat="HH:mm" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>h:mm a</ion-label>
<ion-datetime displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>hh:mm A (15 min steps)</ion-label>
<ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>Leap years, summer months</ion-label>
<ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
</ion-item>
<p aria-hidden="true" padding>
<code>wwwInvented: {{wwwInvented}}</code><br>
<code>netscapeReleased: {{netscapeReleased}}</code><br>
<code>operaReleased: {{operaReleased}}</code><br>
<code>firefoxReleased: {{firefoxReleased}}</code><br>
<code>webkitOpenSourced: {{webkitOpenSourced}}</code><br>
<code>chromeReleased: {{chromeReleased}}</code><br>
<code>time: {{time}}</code><br>
<code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
</p>
</ion-content>

518
src/components/datetime/test/datetime.spec.ts Normal file
View File

@@ -0,0 +1,518 @@
import {DateTime, Form, Picker, Config, NavController} from '../../../../src';
import * as datetime from '../../../../src/util/datetime-util';
export function run() {
describe('DateTime', () => {
describe('validate', () => {
it('should restrict January 1-14, 2000 from selection, then allow it, and restrict December 15-31, 2001', () => {
datetime.max = '2001-12-15';
datetime.min = '2000-01-15';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
columns[0].selectedIndex = 0; // January
columns[1].selectedIndex = 0; // January 1st
columns[2].selectedIndex = 1; // January 1st, 2000
datetime.validate(picker);
expect(columns[1].options[0].disabled).toEqual(true);
expect(columns[1].options[13].disabled).toEqual(true);
expect(columns[1].options[14].disabled).toEqual(false);
columns[0].selectedIndex = 11; // December
columns[2].selectedIndex = 0; // December 1st, 2001
datetime.validate(picker);
expect(columns[0].options[11].disabled).toEqual(false);
expect(columns[1].options[14].disabled).toEqual(false);
expect(columns[1].options[15].disabled).toEqual(true);
expect(columns[1].options[30].disabled).toEqual(true);
});
it('should restrict January 2000 from selection, then allow it, and restrict December 2010', () => {
datetime.max = '2010-11-15';
datetime.min = '2000-02-15';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
columns[0].selectedIndex = 1; // February
columns[1].selectedIndex = 0; // February 1st
columns[2].selectedIndex = columns[2].options.length - 1; // February 1st, 2000
datetime.validate(picker);
expect(columns[0].options[0].disabled).toEqual(true);
expect(columns[0].options[1].disabled).toEqual(false);
expect(columns[0].options[11].disabled).toEqual(false);
columns[2].selectedIndex = 0; // December 1st, 2010
datetime.validate(picker);
expect(columns[0].options[0].disabled).toEqual(false);
expect(columns[0].options[10].disabled).toEqual(false);
expect(columns[0].options[11].disabled).toEqual(true);
});
it('should only show 31 valid days in the selected 31 day month, then reset for 28 day, then to 30', () => {
datetime.max = '2010-12-31';
datetime.min = '2000-01-01';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
columns[0].selectedIndex = 0; // January
columns[1].selectedIndex = 0; // January 1st
columns[2].selectedIndex = 0; // January 1st, 2010
datetime.validate(picker);
for (var i = 0; i < 31; i++) {
expect(columns[1].options[i].disabled).toEqual(false);
}
columns[0].selectedIndex = 1; // February
datetime.validate(picker);
for (var i = 0; i < 28; i++) {
expect(columns[1].options[i].disabled).toEqual(false);
}
expect(columns[1].options[28].disabled).toEqual(true);
expect(columns[1].options[29].disabled).toEqual(true);
expect(columns[1].options[30].disabled).toEqual(true);
columns[0].selectedIndex = 3; // April
datetime.validate(picker);
for (var i = 0; i < 30; i++) {
expect(columns[1].options[i].disabled).toEqual(false);
}
expect(columns[1].options[30].disabled).toEqual(true);
});
});
describe('generate', () => {
it('should generate with custom locale short month names from input property', () => {
datetime.monthShortNames = customLocale.monthShortNames;
datetime.ngAfterContentInit();
datetime.pickerFormat = 'MMM YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(2);
expect(columns[0].name).toEqual('month');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('jan');
});
it('should generate with custom locale full month names from input property', () => {
datetime.monthNames = customLocale.monthNames;
datetime.ngAfterContentInit();
datetime.pickerFormat = 'MMMM YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(2);
expect(columns[0].name).toEqual('month');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('janeiro');
});
it('should replace a picker format with both a day name and a numeric day to use only the numeric day', () => {
datetime.pickerFormat = 'DDDD D M YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(3);
expect(columns[0].name).toEqual('day');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('1');
});
it('should replace a picker format with only a day name to use a numeric day instead', () => {
datetime.pickerFormat = 'DDDD M YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(3);
expect(columns[0].name).toEqual('day');
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[0].text).toEqual('1');
});
it('should generate MM DD YYYY pickerFormat with min/max', () => {
datetime.max = '2010-12-31';
datetime.min = '2000-01-01';
datetime.pickerFormat = 'MM DD YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(3);
expect(columns[0].options.length).toEqual(12);
expect(columns[0].options[0].value).toEqual(1);
expect(columns[0].options[11].value).toEqual(12);
expect(columns[1].options.length).toEqual(31);
expect(columns[1].options[0].value).toEqual(1);
expect(columns[1].options[30].value).toEqual(31);
expect(columns[2].options.length).toEqual(11);
expect(columns[2].options[0].value).toEqual(2010);
expect(columns[2].options[10].value).toEqual(2000);
});
it('should generate YYYY pickerFormat with min/max', () => {
datetime.max = '2010-01-01';
datetime.min = '2000-01-01';
datetime.pickerFormat = 'YYYY';
var picker = new Picker();
datetime.generate(picker);
var columns = picker.getColumns();
expect(columns.length).toEqual(1);
expect(columns[0].options.length).toEqual(11);
expect(columns[0].options[0].value).toEqual(2010);
expect(columns[0].options[10].value).toEqual(2000);
});
});
describe('calcMinMax', () => {
it('should max date with no max input, but has yearValues input', () => {
datetime.yearValues = '2000,1996,1992';
datetime.calcMinMax();
expect(datetime._max.year).toEqual(2000);
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(31);
expect(datetime._max.hour).toEqual(23);
expect(datetime._max.minute).toEqual(59);
expect(datetime._max.second).toEqual(59);
});
it('should min date with no min input, but has yearValues input', () => {
datetime.yearValues = '2000,1996,1992';
datetime.calcMinMax();
expect(datetime._min.year).toEqual(1992);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(1);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(0);
expect(datetime._min.second).toEqual(0);
});
it('should min date with only YYYY', () => {
datetime.min = '1994';
datetime.calcMinMax();
expect(datetime._min.year).toEqual(1994);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(1);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(0);
expect(datetime._min.second).toEqual(0);
});
it('should max date with only YYYY', () => {
datetime.max = '1994';
datetime.calcMinMax();
expect(datetime._max.year).toEqual(1994);
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(31);
expect(datetime._max.hour).toEqual(23);
expect(datetime._max.minute).toEqual(59);
expect(datetime._max.second).toEqual(59);
});
it('should max date from max input string', () => {
datetime.max = '1994-12-15T13:47:20.789Z';
datetime.calcMinMax();
expect(datetime._max.year).toEqual(1994);
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(15);
expect(datetime._max.hour).toEqual(13);
expect(datetime._max.minute).toEqual(47);
expect(datetime._max.second).toEqual(20);
expect(datetime._max.millisecond).toEqual(789);
});
it('should min date from max input string', () => {
datetime.min = '0123-01-05T00:05:00.009Z';
datetime.calcMinMax();
expect(datetime._min.year).toEqual(123);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(5);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(5);
expect(datetime._min.second).toEqual(0);
expect(datetime._min.millisecond).toEqual(9);
});
it('should default max date when not set', () => {
datetime.calcMinMax();
expect(datetime._max.year).toEqual(new Date().getFullYear());
expect(datetime._max.month).toEqual(12);
expect(datetime._max.day).toEqual(31);
expect(datetime._max.hour).toEqual(23);
expect(datetime._max.minute).toEqual(59);
expect(datetime._max.second).toEqual(59);
});
it('should default min date when not set', () => {
datetime.calcMinMax();
expect(datetime._min.year).toEqual(new Date().getFullYear() - 100);
expect(datetime._min.month).toEqual(1);
expect(datetime._min.day).toEqual(1);
expect(datetime._min.hour).toEqual(0);
expect(datetime._min.minute).toEqual(0);
expect(datetime._min.second).toEqual(0);
});
});
describe('setValue', () => {
it('should update existing time value with 12-hour PM DateTimeData value', () => {
var d = '13:47:20.789Z';
datetime.setValue(d);
var dateTimeData = {
hour: {
text: '12',
value: 12,
},
minute: {
text: '09',
value: 9,
},
ampm: {
text: 'pm',
value: 'pm',
},
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(12);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
dateTimeData.hour.value = 1;
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(13);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
});
it('should update existing time value with 12-hour AM DateTimeData value', () => {
var d = '13:47:20.789Z';
datetime.setValue(d);
var dateTimeData = {
hour: {
text: '12',
value: 12,
},
minute: {
text: '09',
value: 9,
},
ampm: {
text: 'am',
value: 'am',
},
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(0);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
dateTimeData.hour.value = 11;
datetime.setValue(dateTimeData);
expect(datetime.getValue().hour).toEqual(11);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
});
it('should update existing time value with new DateTimeData value', () => {
var d = '13:47:20.789Z';
datetime.setValue(d);
expect(datetime.getValue().hour).toEqual(13);
expect(datetime.getValue().minute).toEqual(47);
expect(datetime.getValue().second).toEqual(20);
var dateTimeData = {
hour: {
text: '15',
value: 15,
},
minute: {
text: '09',
value: 9,
},
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().year).toEqual(null);
expect(datetime.getValue().month).toEqual(null);
expect(datetime.getValue().day).toEqual(null);
expect(datetime.getValue().hour).toEqual(15);
expect(datetime.getValue().minute).toEqual(9);
expect(datetime.getValue().second).toEqual(20);
});
it('should update existing DateTimeData value with new DateTimeData value', () => {
var d = '1994-12-15T13:47:20.789Z';
datetime.setValue(d);
expect(datetime.getValue().year).toEqual(1994);
var dateTimeData = {
year: {
text: '1995',
value: 1995,
},
month: {
text: 'December',
value: 12,
},
day: {
text: '20',
value: 20
},
whatevaIDoWhatIWant: -99,
};
datetime.setValue(dateTimeData);
expect(datetime.getValue().year).toEqual(1995);
expect(datetime.getValue().month).toEqual(12);
expect(datetime.getValue().day).toEqual(20);
expect(datetime.getValue().hour).toEqual(13);
expect(datetime.getValue().minute).toEqual(47);
});
it('should parse a ISO date string with no existing DateTimeData value', () => {
var d = '1994-12-15T13:47:20.789Z';
datetime.setValue(d);
expect(datetime.getValue().year).toEqual(1994);
expect(datetime.getValue().month).toEqual(12);
expect(datetime.getValue().day).toEqual(15);
});
it('should not parse a Date object', () => {
var d = new Date(1994, 11, 15);
datetime.setValue(d);
expect(datetime.getValue()).toEqual({});
});
it('should not parse a value with bad data', () => {
var d = 'umm 1994 i think';
datetime.setValue(d);
expect(datetime.getValue()).toEqual({});
});
it('should not parse a value with blank value', () => {
datetime.setValue(null);
expect(datetime.getValue()).toEqual({});
datetime.setValue(undefined);
expect(datetime.getValue()).toEqual({});
datetime.setValue('');
expect(datetime.getValue()).toEqual({});
});
});
var datetime: DateTime;
beforeEach(() => {
datetime = new DateTime(new Form(), new Config(), null, <NavController>{});
});
console.warn = function(){};
// pt-br
var customLocale: datetime.LocaleData = {
dayNames: [
'domingo',
'segunda-feira',
'ter\u00e7a-feira',
'quarta-feira',
'quinta-feira',
'sexta-feira',
's\u00e1bado'
],
dayShortNames: [
'dom',
'seg',
'ter',
'qua',
'qui',
'sex',
's\u00e1b'
],
monthNames: [
'janeiro',
'fevereiro',
'mar\u00e7o',
'abril',
'maio',
'junho',
'julho',
'agosto',
'setembro',
'outubro',
'novembro',
'dezembro'
],
monthShortNames: [
'jan',
'fev',
'mar',
'abr',
'mai',
'jun',
'jul',
'ago',
'set',
'out',
'nov',
'dez'
],
};
});
}