fix(datetime): default to current date when no value given (#17443)

* fix(datetime): default to current date when no value given

* test(datetime): add spec test

* move getDateValue to utils

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

@@ -1,3 +1,16 @@
+/**
+ * Gets a date value given a format
+ * Defaults to the current date if
+ * no date given
+ */
+export function getDateValue(date: DatetimeData, format: string): number {
+  const getValue = getValueFromFormat(date, format);
+
+  if (getValue) { return getValue; }
+
+  const defaultDate = parseDate(new Date().toISOString());
+  return getValueFromFormat((defaultDate as DatetimeData), format);
+}
 
 export function renderDatetime(template: string, value: DatetimeData | undefined, locale: LocaleData): string | undefined {
   if (value === undefined) {

core/src/components/datetime/datetime.tsx

@@ -4,7 +4,7 @@ import { DatetimeChangeEventDetail, DatetimeOptions, Mode, PickerColumn, PickerC
 import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { hostContext } from '../../utils/theme';
 
-import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
+import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
 @Component({
   tag: 'ion-datetime',
@@ -359,7 +359,7 @@ export class Datetime implements ComponentInterface {
 
       // cool, we've loaded up the columns with options
       // preselect the option for this column
-      const optValue = getValueFromFormat(this.datetimeValue, format);
+      const optValue = getDateValue(this.datetimeValue, format);
       const selectedIndex = colOptions.findIndex(opt => opt.value === optValue);
 
       return {

core/src/components/datetime/test/datetime.spec.ts

@@ -0,0 +1,35 @@
+import { DatetimeOptions } from '../datetime-interface';
+import { DatetimeData, getDateValue } from '../datetime-util';
+
+describe('Datetime', () => {
+  describe('getDateValue()', () => {
+    it('it should return the date value for the current day', () => {
+      const today = new Date();
+      
+      const dayValue = getDateValue({}, 'DD');
+      const monthvalue = getDateValue({}, 'MM');
+      const yearValue = getDateValue({}, 'YYYY');
+      
+      expect(dayValue).toEqual(today.getDate());
+      expect(monthvalue).toEqual(today.getMonth() + 1);
+      expect(yearValue).toEqual(today.getFullYear());
+    });
+    
+    it('it should return the date value for a given day', () => {
+      const date = new Date('15 October 1995');
+      const dateTimeData: DatetimeData = {
+        year: date.getFullYear(),
+        month: date.getMonth() + 1,
+        day: date.getDate()
+      }
+      
+      const dayValue = getDateValue(dateTimeData, 'DD');
+      const monthvalue = getDateValue(dateTimeData, 'MM');
+      const yearValue = getDateValue(dateTimeData, 'YYYY');
+      
+      expect(dayValue).toEqual(date.getDate());
+      expect(monthvalue).toEqual(date.getMonth() + 1);
+      expect(yearValue).toEqual(date.getFullYear());
+    });
+  });
+});