refactor(datetime): change capitalization from DateTime to Datetime

packages/core/src/components.d.ts

@@ -601,7 +601,7 @@ declare global {
   }
 }
 
-import { DateTime as IonDatetime } from './components/datetime/datetime';
+import { Datetime as IonDatetime } from './components/datetime/datetime';
 
 interface HTMLIonDatetimeElement extends IonDatetime, HTMLElement {
 }

packages/core/src/components/datetime/datetime-util.ts

@@ -1,7 +1,7 @@
 import { isArray, isBlank, isString } from '../../utils/helpers';
 
 
-export function renderDateTime(template: string, value: DateTimeData, locale: LocaleData) {
+export function renderDatetime(template: string, value: DatetimeData, locale: LocaleData) {
   if (isBlank(value)) {
     return '';
   }
@@ -35,7 +35,7 @@ export function renderDateTime(template: string, value: DateTimeData, locale: Lo
 }
 
 
-export function renderTextFormat(format: string, value: any, date: DateTimeData, locale: LocaleData): string {
+export function renderTextFormat(format: string, value: any, date: DatetimeData, locale: LocaleData): string {
 
   if (format === FORMAT_DDDD || format === FORMAT_DDD) {
     try {
@@ -98,7 +98,7 @@ export function renderTextFormat(format: string, value: any, date: DateTimeData,
 }
 
 
-export function dateValueRange(format: string, min: DateTimeData, max: DateTimeData): any[] {
+export function dateValueRange(format: string, min: DatetimeData, max: DatetimeData): any[] {
   let opts: any[] = [];
   let i: number;
 
@@ -154,7 +154,7 @@ export function dateSortValue(year: number, month: number, day: number, hour: nu
   return parseInt(`1${fourDigit(year)}${twoDigit(month)}${twoDigit(day)}${twoDigit(hour)}${twoDigit(minute)}`, 10);
 }
 
-export function dateDataSortValue(data: DateTimeData): number {
+export function dateDataSortValue(data: DatetimeData): number {
   if (data) {
     return dateSortValue(data.year, data.month, data.day, data.hour, data.minute);
   }
@@ -173,7 +173,7 @@ export function isLeapYear(year: number): boolean {
 const ISO_8601_REGEXP = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
 const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
 
-export function parseDate(val: any): DateTimeData {
+export function parseDate(val: any): DatetimeData {
   // manually parse IS0 cuz Date.parse cannot be trusted
   // ISO 8601 format: 1994-12-15T13:47:20Z
   let parse: any[];
@@ -229,22 +229,22 @@ export function parseDate(val: any): DateTimeData {
 }
 
 
-export function updateDate(existingData: DateTimeData, newData: any): boolean {
+export function updateDate(existingData: DatetimeData, newData: any): boolean {
   if (newData && newData !== '') {
 
     if (isString(newData)) {
       // new date is a string, and hopefully in the ISO format
-      // convert it to our DateTimeData if a valid ISO
+      // convert it to our DatetimeData if a valid ISO
       newData = parseDate(newData);
       if (newData) {
-        // successfully parsed the ISO string to our DateTimeData
+        // successfully parsed the ISO string to our DatetimeData
         Object.assign(existingData, newData);
         return true;
       }
 
     } else if ((newData.year || newData.hour || newData.month || newData.day || newData.minute || newData.second)) {
       // newData is from of a datetime picker's selected values
-      // update the existing DateTimeData data with the new values
+      // update the existing DatetimeData data with the new values
 
       // do some magic for 12-hour values
       if (newData.ampm && newData.hour) {
@@ -257,7 +257,7 @@ export function updateDate(existingData: DateTimeData, newData: any): boolean {
       }
 
       // merge new values from the picker's selection
-      // to the existing DateTimeData values
+      // to the existing DatetimeData values
       for (var k in newData) {
         (<any>existingData)[k] = newData[k].value;
       }
@@ -312,7 +312,7 @@ export function parseTemplate(template: string): string[] {
 }
 
 
-export function getValueFromFormat(date: DateTimeData, format: string) {
+export function getValueFromFormat(date: DatetimeData, format: string) {
   if (format === FORMAT_A || format === FORMAT_a) {
     return (date.hour < 12 ? 'am' : 'pm');
   }
@@ -333,7 +333,7 @@ export function convertFormatToKey(format: string): string {
 }
 
 
-export function convertDataToISO(data: DateTimeData): string {
+export function convertDataToISO(data: DatetimeData): string {
   // https://www.w3.org/TR/NOTE-datetime
   let rtn = '';
 
@@ -460,7 +460,7 @@ function fourDigit(val: number): string {
 }
 
 
-export interface DateTimeData {
+export interface DatetimeData {
   [key: string]: any;
   year?: number;
   month?: number;

packages/core/src/components/datetime/datetime.ios.scss

@@ -1,22 +1,22 @@
 @import "../../themes/ionic.globals.ios";
 @import "./datetime";
 
-// iOS DateTime
+// iOS Datetime
 // --------------------------------------------------
 
-/// @prop - Padding top of the DateTime component
+/// @prop - Padding top of the Datetime component
 $datetime-ios-padding-top:         $item-ios-padding-top !default;
 
-/// @prop - Padding end of the DateTime component
+/// @prop - Padding end of the Datetime component
 $datetime-ios-padding-end:         ($item-ios-padding-end / 2) !default;
 
-/// @prop - Padding bottom of the DateTime component
+/// @prop - Padding bottom of the Datetime component
 $datetime-ios-padding-bottom:      $item-ios-padding-bottom !default;
 
-/// @prop - Padding start of the DateTime component
+/// @prop - Padding start of the Datetime component
 $datetime-ios-padding-start:       $item-ios-padding-start !default;
 
-/// @prop - Color of the DateTime placeholder
+/// @prop - Color of the Datetime placeholder
 $datetime-ios-placeholder-color:   #999 !default;
 
 

packages/core/src/components/datetime/datetime.md.scss

@@ -1,22 +1,22 @@
 @import "../../themes/ionic.globals.md";
 @import "./datetime";
 
-// Material Design DateTime
+// Material Design Datetime
 // --------------------------------------------------
 
-/// @prop - Padding top of the DateTime component
+/// @prop - Padding top of the Datetime component
 $datetime-md-padding-top:         $item-md-padding-top !default;
 
-/// @prop - Padding end of the DateTime component
+/// @prop - Padding end of the Datetime component
 $datetime-md-padding-end:         ($item-md-padding-end / 2) !default;
 
-/// @prop - Padding bottom of the DateTime component
+/// @prop - Padding bottom of the Datetime component
 $datetime-md-padding-bottom:      $item-md-padding-bottom !default;
 
-/// @prop - Padding start of the DateTime component
+/// @prop - Padding start of the Datetime component
 $datetime-md-padding-start:       $item-md-padding-start !default;
 
-/// @prop - Color of the DateTime placeholder
+/// @prop - Color of the Datetime placeholder
 $datetime-md-placeholder-color:   #999 !default;
 
 

packages/core/src/components/datetime/datetime.scss

@@ -1,6 +1,6 @@
 @import "../../themes/ionic.globals";
 
-// DateTime
+// Datetime
 // --------------------------------------------------
 
 ion-datetime {

packages/core/src/components/datetime/datetime.tsx

@@ -1,20 +1,20 @@
 import { Component, CssClassMap, Event, EventEmitter, Prop, PropDidChange, State } from '@stencil/core';
 
-import { convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, DateTimeData, dateValueRange, daysInMonth, getValueFromFormat, LocaleData, parseDate, parseTemplate, renderTextFormat, renderDateTime, updateDate } from './datetime-util';
+import { convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, DatetimeData, dateValueRange, daysInMonth, getValueFromFormat, LocaleData, parseDate, parseTemplate, renderTextFormat, renderDatetime, updateDate } from './datetime-util';
 
 import { clamp, isBlank, isObject } from '../../utils/helpers';
 
 import { Picker, PickerColumn, PickerController, PickerOptions } from '../../index';
 
 /**
- * @name DateTime
+ * @name Datetime
  * @description
- * The DateTime component is used to present an interface which makes it easy for
+ * 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
+ * hours and minute values. The Datetime component is similar to the native
- * `<input type="datetime-local">` element, however, Ionic's DateTime component makes
+ * `<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.
  *
@@ -28,7 +28,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind
  *
  * ## Display and Picker Formats
  *
- * The DateTime component displays the values in two places: in the `<ion-datetime>`
+ * 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.
  *
@@ -172,7 +172,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind
  * 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)
+ * [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
@@ -254,7 +254,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind
     theme: 'datetime'
   }
 })
-export class DateTime {
+export class Datetime {
   [key: string]: any;
 
   private datetimeId: string;
@@ -262,9 +262,9 @@ export class DateTime {
   private picker: Picker;
 
   locale: LocaleData = {};
-  dateTimeMin: DateTimeData = {};
+  datetimeMin: DatetimeData = {};
-  dateTimeMax: DateTimeData = {};
+  datetimeMax: DatetimeData = {};
-  dateTimeValue: DateTimeData = {};
+  datetimeValue: DatetimeData = {};
 
   @State() text: any;
 
@@ -448,7 +448,7 @@ export class DateTime {
    * Update the datetime text and datetime value
    */
   updateValue() {
-    updateDate(this.dateTimeValue, this.value);
+    updateDate(this.datetimeValue, this.value);
     this.updateText();
   }
 
@@ -546,7 +546,7 @@ export class DateTime {
           values = convertToArrayOfNumbers(this[key + 'Values'], key);
         } else {
           // use the default date part values
-          values = dateValueRange(format, this.dateTimeMin, this.dateTimeMax);
+          values = dateValueRange(format, this.datetimeMin, this.datetimeMax);
         }
 
         const column: PickerColumn = {
@@ -562,7 +562,7 @@ export class DateTime {
 
         // cool, we've loaded up the columns with options
         // preselect the option for this column
-        const optValue = getValueFromFormat(this.dateTimeValue, format);
+        const optValue = getValueFromFormat(this.datetimeValue, format);
         const selectedIndex = column.options.findIndex(opt => opt.value === optValue);
         if (selectedIndex >= 0) {
           // set the select index for this column's options
@@ -574,8 +574,8 @@ export class DateTime {
       });
 
       // Normalize min/max
-      const min = this.dateTimeMin;
+      const min = this.datetimeMin;
-      const max = this.dateTimeMax;
+      const max = this.datetimeMax;
       ['month', 'day', 'hour', 'minute']
         .filter(name => !columns.find(column => column.name === name))
         .forEach(name => {
@@ -594,8 +594,8 @@ export class DateTime {
    */
   validate() {
     const today = new Date();
-    const minCompareVal = dateDataSortValue(this.dateTimeMin);
+    const minCompareVal = dateDataSortValue(this.datetimeMin);
-    const maxCompareVal = dateDataSortValue(this.dateTimeMax);
+    const maxCompareVal = dateDataSortValue(this.datetimeMax);
     const yearCol = this.picker.getColumn('year');
 
     let selectedYear: number = today.getFullYear();
@@ -665,8 +665,8 @@ export class DateTime {
         this.max = todaysYear.toString();
       }
     }
-    const min = this.dateTimeMin = parseDate(this.min);
+    const min = this.datetimeMin = parseDate(this.min);
-    const max = this.dateTimeMax = parseDate(this.max);
+    const max = this.datetimeMax = parseDate(this.max);
 
     min.year = min.year || todaysYear;
     max.year = max.year || todaysYear;
@@ -783,14 +783,14 @@ export class DateTime {
   updateText() {
     // create the text of the formatted data
     const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT;
-    this.text = renderDateTime(template, this.dateTimeValue, this.locale);
+    this.text = renderDatetime(template, this.datetimeValue, this.locale);
   }
 
   /**
    * @hidden
    */
   hasValue(): boolean {
-    const val = this.dateTimeValue;
+    const val = this.datetimeValue;
     return val
       && isObject(val)
       && Object.keys(val).length > 0;
@@ -808,19 +808,19 @@ export class DateTime {
     let addPlaceholderClass = false;
 
     // If selected text has been passed in, use that first
-    let dateTimeText = this.text;
+    let datetimeText = this.text;
-    if (!dateTimeText && this.placeholder) {
+    if (!datetimeText && this.placeholder) {
-      dateTimeText = this.placeholder;
+      datetimeText = this.placeholder;
       addPlaceholderClass = true;
     }
 
-    const dateTimeTextClasses: CssClassMap = {
+    const datetimeTextClasses: CssClassMap = {
       'datetime-text': true,
       'datetime-placeholder': addPlaceholderClass
     };
 
     return [
-      <div class={ dateTimeTextClasses }>{ dateTimeText }</div>,
+      <div class={ datetimeTextClasses }>{ datetimeText }</div>,
       <button
         aria-haspopup='true'
         id={this.datetimeId}

packages/core/src/components/datetime/datetime.wp.scss

@@ -1,31 +1,31 @@
 @import "../../themes/ionic.globals.wp";
 @import "./datetime";
 
-// Windows DateTime
+// Windows Datetime
 // --------------------------------------------------
 
-/// @prop - Min width of the DateTime component
+/// @prop - Min width of the Datetime component
 $datetime-wp-min-width:           45% !default;
 
-/// @prop - Padding top of the DateTime component
+/// @prop - Padding top of the Datetime component
 $datetime-wp-padding-top:         $item-wp-padding-top !default;
 
-/// @prop - Padding end of the DateTime component
+/// @prop - Padding end of the Datetime component
 $datetime-wp-padding-end:         ($item-wp-padding-end / 2) !default;
 
-/// @prop - Padding bottom of the DateTime component
+/// @prop - Padding bottom of the Datetime component
 $datetime-wp-padding-bottom:      $item-wp-padding-bottom !default;
 
-/// @prop - Padding start of the DateTime component
+/// @prop - Padding start of the Datetime component
 $datetime-wp-padding-start:       $item-wp-padding-start !default;
 
-/// @prop - Border width of the DateTime component
+/// @prop - Border width of the Datetime component
 $datetime-wp-border-width:        2px !default;
 
-/// @prop - Border color of the DateTime component
+/// @prop - Border color of the Datetime component
 $datetime-wp-border-color:        $input-wp-border-color !default;
 
-/// @prop - Color of the DateTime placeholder
+/// @prop - Color of the Datetime placeholder
 $datetime-wp-placeholder-color:   $input-wp-border-color !default;
 
 

packages/core/src/components/datetime/test/basic.html

@@ -2,7 +2,7 @@
 <html dir="ltr">
 <head>
   <meta charset="UTF-8">
-  <title>Ionic DateTime</title>
+  <title>Ionic Datetime</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
 </head>

packages/ionic-angular/BREAKING.md

@@ -6,6 +6,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
 - [Dynamic Mode](#dynamic-mode)
 - [Button](#button)
 - [Chip](#chip)
+- [Datetime](#datetime)
 - [FAB](#fab)
 - [Fixed Content](#fixed-content)
 - [Icon](#icon)
@@ -130,6 +131,23 @@ Buttons inside of an `<ion-chip>` container should now be written as an `<ion-ch
 </ion-chip>
 ```
 
+## Datetime
+
+The Datetime classes and interfaces have changed capitalization from `DateTime` to `Datetime`. This is more consistent with other components and their tags.
+
+**Old Usage Example:**
+
+```javascript
+import { DateTime } from 'ionic-angular';
+```
+
+**New Usage Example:**
+
+```javascript
+import { Datetime } from 'ionic-angular';
+```
+
+
 ## FAB
 
 ### Markup Changed