Merge 468c8b5 into 07f7ef2

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Added
 - Button group component now allows resetting the selection state via the `selectedItems` property [#1168](https://github.com/IgniteUI/igniteui-webcomponents/pull/1168)
+- Date picker component [#174](https://github.com/IgniteUI/igniteui-webcomponents/issues/174)
 
 ### Changed
 - Combo, Select and Dropdown components now use the native Popover API [#1082](https://github.com/IgniteUI/igniteui-webcomponents/pull/1082)

src/components/common/definitions/defineAllComponents.ts

@@ -15,6 +15,7 @@ import IgcCheckboxComponent from '../../checkbox/checkbox.js';
 import IgcSwitchComponent from '../../checkbox/switch.js';
 import IgcChipComponent from '../../chip/chip.js';
 import IgcComboComponent from '../../combo/combo.js';
+import IgcDatepickerComponent from '../../date-picker/date-picker.js';
 import IgcDateTimeInputComponent from '../../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../../dialog/dialog.js';
 import IgcDropdownGroupComponent from '../../dropdown/dropdown-group.js';
@@ -78,6 +79,7 @@ const allComponents: IgniteComponent[] = [
   IgcCheckboxComponent,
   IgcChipComponent,
   IgcComboComponent,
+  IgcDatepickerComponent,
   IgcDropdownComponent,
   IgcDropdownGroupComponent,
   IgcDropdownHeaderComponent,

src/components/common/localization/validation-en.ts

@@ -8,4 +8,5 @@ export default {
   max: 'A value no more than {0} should be entered',
   email: 'A valid email address should be entered',
   url: 'A valid url address should be entered',
+  disabledDate: 'The entered value {0} is within the disabled dates range',
 } as const;

src/components/common/util.ts

@@ -8,6 +8,8 @@ export const partNameMap = (partNameInfo: PartNameInfo) => {
     .join(' ');
 };
 
+export function noop() {}
+
 export const asPercent = (part: number, whole: number) => (part / whole) * 100;
 
 export const clamp = (number: number, min: number, max: number) =>

src/components/common/validators.ts

@@ -1,3 +1,4 @@
+import { DateTimeUtil } from '../date-time-input/date-util.js';
 import validatorMessages from './localization/validation-en.js';
 import { asNumber, format, isDefined } from './util.js';
 
@@ -10,9 +11,12 @@ export interface Validator<T = any> {
   isValid: ValidatorHandler<T>;
 }
 
+const emailRegex =
+  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+
 export const requiredValidator: Validator<{
   required: boolean;
-  value?: string;
+  value?: unknown;
 }> = {
   key: 'valueMissing',
   message: validatorMessages.required,
@@ -103,9 +107,6 @@ export const stepValidator: Validator<{
       : true,
 };
 
-const emailRegex =
-  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-
 export const emailValidator: Validator<{ value: string }> = {
   key: 'typeMismatch',
   message: validatorMessages.email,
@@ -117,3 +118,27 @@ export const urlValidator: Validator<{ value: string }> = {
   message: validatorMessages.url,
   isValid: ({ value }) => URL.canParse(value),
 };
+
+export const minDateValidator: Validator<{
+  value?: Date | null;
+  min?: Date | null;
+}> = {
+  key: 'rangeUnderflow',
+  message: ({ min }) => format(validatorMessages.min, `${min}`),
+  isValid: ({ value, min }) =>
+    min
+      ? !DateTimeUtil.lessThanMinValue(value ?? new Date(), min, false, true)
+      : true,
+};
+
+export const maxDateValidator: Validator<{
+  value?: Date | null;
+  max?: Date | null;
+}> = {
+  key: 'rangeOverflow',
+  message: ({ max }) => format(validatorMessages.max, `${max}`),
+  isValid: ({ value, max }) =>
+    max
+      ? !DateTimeUtil.greaterThanMaxValue(value ?? new Date(), max, false, true)
+      : true,
+};