diff --git a/_data/components/dateRangeInput.yml b/_data/components/dateRangeInput.yml index 9f408850f..a1a2bbba2 100644 --- a/_data/components/dateRangeInput.yml +++ b/_data/components/dateRangeInput.yml @@ -1,5 +1,5 @@ directive: "o-daterange-input" -version: "4.0.6" +version: "15.4.0" apiTitle: "ODateRangeInputComponent" @@ -60,11 +60,17 @@ attributes: [{ required: "", description: "Type of the component data" },{ - name: "mode", - type: "auto | desktop | mobile", - default: "auto", + name: "placeholder-startday", + type: "string", + default: "Start date", + required: "", + description: "Field placeholder, must be the key in the translation file for the start date input" +},{ + name: "placeholder-endday", + type: "string", + default: "Start date", required: "", - description: "Indicates the component performance mode" + description: "Field placeholder, must be the key in the translation file for the end date input" }] inheritedOutputs: [{ diff --git a/_data/components/dateRangeLegacyInput.yml b/_data/components/dateRangeLegacyInput.yml new file mode 100644 index 000000000..edab929d0 --- /dev/null +++ b/_data/components/dateRangeLegacyInput.yml @@ -0,0 +1,74 @@ +directive: "o-daterange-legacy-input" +version: "4.0.6" + +apiTitle: "ODateRangeLegacyInputComponent" + +inheritedAttributes: [{ + component: "FormDataComponent", + path: "components/input/overview/api", + attributes: ["attr", "label", "tooltip", "tooltip-position", "tooltip-show-delay", "automatic-binding", "automatic-registering", "data", "enabled", "required", "clear-button", "sql-type", "width", "read-only", "validators", "label-visible", "hide-required-marker", "select-all-on-click"] +}] + +attributes: [{ + name: "format", + type: "string", + default: "MomentJS localized format L (see Localized formats in [MomentJS format](http://momentjs.com/docs/#/displaying/format){:target='_blank'})", + required: "", + description: "Date format. See [MomentJS format](http://momentjs.com/docs/#/displaying/format){:target='_blank'}" +},{ + name: "locale" +},{ + name: "startKey", + type: "string", + default: "startDate", + required: "", + description: "" +},{ + name: "endKey", + type: "string", + default: "endDate", + required: "", + description: "" +},{ + name: "min", + type: "string", + default: "", + required: "", + description: "Minimum selectable date" +},{ + name: "max", + type: "string", + default: "", + required: "", + description: "Maximum selectable date" +},{ + name: "touch-ui", + type: "no | false | yes | true", + default: "no", + required: "", + description: "Indicates wheter to use the datepicker 'touch-ui' mode" +},{ + name: "text-input-enabled", + type: "no | false | yes | true", + default: "yes", + required: "", + description: "Indicates whether or not to allow the user to edit the input manually" + },{ + name: "value-type", + type: "string | date | timestamp | iso-8601", + default: "timestamp", + required: "", + description: "Type of the component data" +},{ + name: "mode", + type: "auto | desktop | mobile", + default: "auto", + required: "", + description: "Indicates the component performance mode" +}] + +inheritedOutputs: [{ + component: "FormDataComponent", + path: "components/input/overview/api", + outputs: ["onChange", "onValueChange","onFocus", "onBlur"] +}] diff --git a/_data/menu_descriptions.yml b/_data/menu_descriptions.yml index a73d476f3..ea819a0fa 100644 --- a/_data/menu_descriptions.yml +++ b/_data/menu_descriptions.yml @@ -93,6 +93,9 @@ sections: - url: "/components/input/daterange/overview" title: "Date range" imagepath: "/assets/images/menus/input/daterange" + - url: "/components/input/daterangelegacy/overview" + title: "Date range legacy" + imagepath: "/assets/images/menus/input/daterange" - url: "/components/input/hour/overview" title: "Hour" imagepath: "/assets/images/menus/input/hour" diff --git a/assets/images/components/inputs/o-daterange-format.png b/assets/images/components/inputs/o-daterange-format.png index f65d77f92..6981162af 100644 Binary files a/assets/images/components/inputs/o-daterange-format.png and b/assets/images/components/inputs/o-daterange-format.png differ diff --git a/assets/images/components/inputs/o-daterange-input-validation-minmax-1.png b/assets/images/components/inputs/o-daterange-input-validation-minmax-1.png new file mode 100644 index 000000000..6da7cbe1d Binary files /dev/null and b/assets/images/components/inputs/o-daterange-input-validation-minmax-1.png differ diff --git a/assets/images/components/inputs/o-daterange-input-validation-minmax-2.png b/assets/images/components/inputs/o-daterange-input-validation-minmax-2.png new file mode 100644 index 000000000..b60bf1706 Binary files /dev/null and b/assets/images/components/inputs/o-daterange-input-validation-minmax-2.png differ diff --git a/assets/images/components/inputs/o-daterange-input.png b/assets/images/components/inputs/o-daterange-input.png index 45bcd1c14..394bd1ff9 100644 Binary files a/assets/images/components/inputs/o-daterange-input.png and b/assets/images/components/inputs/o-daterange-input.png differ diff --git a/assets/images/components/inputs/o-daterange-legacy-format.png b/assets/images/components/inputs/o-daterange-legacy-format.png new file mode 100644 index 000000000..f65d77f92 Binary files /dev/null and b/assets/images/components/inputs/o-daterange-legacy-format.png differ diff --git a/assets/images/components/inputs/o-daterange-input-validation-minmax.png b/assets/images/components/inputs/o-daterange-legacy-input-validation-minmax.png similarity index 100% rename from assets/images/components/inputs/o-daterange-input-validation-minmax.png rename to assets/images/components/inputs/o-daterange-legacy-input-validation-minmax.png diff --git a/assets/images/components/inputs/o-daterange-legacy-input.png b/assets/images/components/inputs/o-daterange-legacy-input.png new file mode 100644 index 000000000..45bcd1c14 Binary files /dev/null and b/assets/images/components/inputs/o-daterange-legacy-input.png differ diff --git a/assets/images/components/inputs/o-daterange-mode-mobile.png b/assets/images/components/inputs/o-daterange-legacy-mode-mobile.png similarity index 100% rename from assets/images/components/inputs/o-daterange-mode-mobile.png rename to assets/images/components/inputs/o-daterange-legacy-mode-mobile.png diff --git a/assets/images/components/inputs/o-daterange-legacy-touchui.png b/assets/images/components/inputs/o-daterange-legacy-touchui.png new file mode 100644 index 000000000..89c4cf7d2 Binary files /dev/null and b/assets/images/components/inputs/o-daterange-legacy-touchui.png differ diff --git a/assets/images/components/inputs/o-daterange-touchui.png b/assets/images/components/inputs/o-daterange-touchui.png index 89c4cf7d2..ba1b3987d 100644 Binary files a/assets/images/components/inputs/o-daterange-touchui.png and b/assets/images/components/inputs/o-daterange-touchui.png differ diff --git a/docs/components/input/041-o-daterange-input.component.md b/docs/components/input/041-o-daterange-input.component.md index ada1146d4..5f9495799 100644 --- a/docs/components/input/041-o-daterange-input.component.md +++ b/docs/components/input/041-o-daterange-input.component.md @@ -11,7 +11,7 @@ nav_order: 9 {% include base_path %} {% include toc %} -The `o-daterange-input` component is used in [forms]({{ base_path }}/components/data/form/overview) for getting or displaying start and end date values as a range from a calendar pop-up or by entering the value directly in an HTML input text box. +The `o-daterange-input` component is based on **Angular Material** and is used in [forms]({{ base_path }}/components/data/form/overview) for getting or displaying start and end date values as a range from a calendar pop-up or by entering the value directly in an HTML input text box. . The date range input is automatically registered on its parent `o-form`, which provides the value for the input programatically. Its value can be also set manually via the `data` parameter. This and other attributes are explained on the **API** section of this page. @@ -20,28 +20,44 @@ The date range input is automatically registered on its parent `o-form`, which p ![Daterange input component]({{ "/assets/images/components/inputs/o-daterange-input.png" | absolute_url }}){: .comp-example-img width='65%'} ```html - - - - - + +
+ + + +
+
+ + + +
+
+ + + +
+ ``` -``` + +```ts export class InputDateRangeComponent { public selected = {}; + public valueTimestamp: { startDate: number; endDate: number; }; constructor() { - this.selected = { + this.selected = { startDate: moment('2019-05-15T00:00Z'), endDate: moment('2019-05-20T00:00Z') }; - } - getValue(){ - return this.selected; + this.valueTimestamp = { + startDate: this.selected['startDate'].valueOf(), + endDate: this.selected['endDate'].valueOf() + } } } @@ -51,36 +67,11 @@ export class InputDateRangeComponent { It is possible to disable the date range input by adding the `text-input-enabled` property is set to “no”. By default, the value is true . -## Changing the date range's behaviour new - -The `o-daterange-input` can render in two differents ways based on the `mode` property. - -| Mode | Description | -|------|--------------| -| *desktop* | Show **two** calendars to select date range | -| *mobile* | Show **one** calendar to select date range | -| *auto* | Show **mode mobile** if the device is a mobile otherwise **mode desktop**. - - -

Mode mobile example

-![Date range mode ]({{ "/assets/images/components/inputs/o-daterange-mode-mobile.png" | absolute_url }}){: .comp-example-img} -```html -
- desktop_mac{{'MODE.DESKTOP' | oTranslate}} - - smartphone {{'MODE.MOBILE'| oTranslate}} - -
- - - - -``` ## Touch UI mode -The `o-daterange-input` normally opens as a popup under the input, however the component has a `touch-ui` property that can be set to `true` where the calendar opens in a large dialog. +The `o-daterange-input` normally opens as a popup under the input, however the component has a `touch-ui` property that can be set to `true` in order to enable a more touch friendly UI where the calendar opens in a large dialog. +![ Touch UI mode]({{ "/assets/images/components/inputs/o-daterange-touchui.png" | absolute_url }}){: .comp-example-img} ## Customizing the parse and display formats @@ -91,7 +82,7 @@ The `o-daterange-input` supports date Moments formats setting, all you have to d ```html
+ required="yes" [data]="valueTimestamp" format="LL" separator=" to " text-input-enabled="no">
``` @@ -99,17 +90,19 @@ The `o-daterange-input` supports date Moments formats setting, all you have to d export class InputDateRangeComponent { public selected = {}; + public valueTimestamp: { startDate: number; endDate: number; }; constructor() { - this.selected = { + this.selected = { startDate: moment('2019-05-15T00:00Z'), endDate: moment('2019-05-20T00:00Z') }; - } - getValue(){ - return this.selected; + this.valueTimestamp = { + startDate: this.selected['startDate'].valueOf(), + endDate: this.selected['endDate'].valueOf() + } } } ``` @@ -122,45 +115,27 @@ Specifying startKey and endKey would have different model. For example, the mod ```html + required="yes" [data]="valueTimestamp" format="LL" separator=" to " text-input-enabled="no"> ``` - -## Ranges predefined - -The `o-daterange-input` have available 7 predefined date ranges that you can select from. For displaying you must set `show-ranges="true"`. -- Today -- Yesterday -- Last 7 days -- Last 30 days -- This month - -![Touch UI in date range]({{ "/assets/images/components/inputs/o-daterange-touchui.png" | absolute_url }}){: .comp-example-img} - -```html - - -``` - ## Validation The `o-daterange-input` shows automatically an error message when the `required` attribute is set to "yes" and there is no value on the input. The `min` and `max` properties will disable all dates on the calendar popup before or after the respective values and prevent the user from advancing the calendar past the month or year (depending on current view) containing the min or max date. ```html - - + + ``` -``` +```ts export class InputDateRangeComponent { public selected = {}; + public valueTimestamp: { startDate: number; endDate: number; }; constructor() { @@ -168,17 +143,17 @@ export class InputDateRangeComponent { startDate: moment('2019-05-15T00:00Z'), endDate: moment('2019-05-20T00:00Z') }; - } - getValue(){ - return this.selected; + this.valueString = { + startDate: '2019/05/15', + endDate: '2019/05/20' + }; } } ``` -![Validation min and max in date range]({{ "/assets/images/components/inputs/o-daterange-input-validation-minmax.png" | absolute_url }}){: .comp-example-img} - - +![Validation min and max in date range]({{ "/assets/images/components/inputs/o-daterange-input-validation-minmax-1.png" | absolute_url }}){: .comp-example-img} +![Validation min and max in date range]({{ "/assets/images/components/inputs/o-daterange-input-validation-minmax-2.png" | absolute_url }}){: .comp-example-img} You can see this and more examples of this component in the [OntimizeWeb playground]({{site.playgroundurl}}/main/inputs/daterange){:target="_blank"}. \ No newline at end of file diff --git a/docs/components/input/042-o-daterange-legacy-input.component-api.md b/docs/components/input/042-o-daterange-legacy-input.component-api.md new file mode 100644 index 000000000..613e79c14 --- /dev/null +++ b/docs/components/input/042-o-daterange-legacy-input.component-api.md @@ -0,0 +1,7 @@ +--- +layout: o-component +permalink: /components/input/daterangelegacy/api +title: "Date range legacy" +comp: dateRangeLegacyInput +nav_exclude: true +--- diff --git a/docs/components/input/042-o-daterange-legacy-input.component.md b/docs/components/input/042-o-daterange-legacy-input.component.md new file mode 100644 index 000000000..2191a58c8 --- /dev/null +++ b/docs/components/input/042-o-daterange-legacy-input.component.md @@ -0,0 +1,182 @@ +--- +layout: o-component +permalink: /components/input/daterangelegacy/overview +title: "Date range legacy" +comp: dateRangeLegacyInput +parent: Input +grand_parent: Components +nav_order: 9 +--- + +{% include base_path %} +{% include toc %} + +The `o-daterange-legacy-input` component is used in [forms]({{ base_path }}/components/data/form/overview) for getting or displaying start and end date values as a range from a calendar pop-up or by entering the value directly in an HTML input text box. +. + +The date range input is automatically registered on its parent `o-form`, which provides the value for the input programatically. Its value can be also set manually via the `data` parameter. This and other attributes are explained on the **API** section of this page. + +## Basic example +![Daterange input component]({{ "/assets/images/components/inputs/o-daterange-legacy-input.png" | absolute_url }}){: .comp-example-img width='65%'} + +```html + + + + + +``` + +``` +export class InputDateRangeComponent { + + public selected = {}; + + constructor() { + + this.selected = { + startDate: moment('2019-05-15T00:00Z'), + endDate: moment('2019-05-20T00:00Z') + }; + } + + getValue(){ + return this.selected; + } +} + +``` + +## Disable the text input + +It is possible to disable the date range input by adding the `text-input-enabled` property is set to “no”. By default, the value is true . + +## Changing the date range's behaviour + +The `o-daterange-legacy-input` can render in two differents ways based on the `mode` property. + +| Mode | Description | +|------|--------------| +| *desktop* | Show **two** calendars to select date range | +| *mobile* | Show **one** calendar to select date range | +| *auto* | Show **mode mobile** if the device is a mobile otherwise **mode desktop**. + + +

Mode mobile example

+![Date range mode ]({{ "/assets/images/components/inputs/o-daterange-legacy-mode-mobile.png" | absolute_url }}){: .comp-example-img} +```html +
+ desktop_mac{{'MODE.DESKTOP' | oTranslate}} + + smartphone {{'MODE.MOBILE'| oTranslate}} + +
+ + + + +``` +## Touch UI mode + +The `o-daterange-legacy-input` normally opens as a popup under the input, however the component has a `touch-ui` property that can be set to `true` where the calendar opens in a large dialog. + + +## Customizing the parse and display formats + +The `o-daterange-legacy-input` supports date Moments formats setting, all you have to do is to set the format via `format` input. The format MomentJS by default is L (see Localized formats in [MomentJS format](http://momentjs.com/docs/#/displaying/format){:target='_blank'}) + +![Format int daterang input component]({{ "/assets/images/components/inputs/o-daterange-legacy-format.png" | absolute_url }}){: .comp-example-img} + +```html +
+ + +
+``` +```ts +export class InputDateRangeComponent { + + public selected = {}; + + constructor() { + + this.selected = { + startDate: moment('2019-05-15T00:00Z'), + endDate: moment('2019-05-20T00:00Z') + }; + } + + getValue(){ + return this.selected; + } +} +``` + +## StartKey and endKey + +Theses 2 options are for the key you want for the value, default are *startDate* and *endDate*, it means the value we have from ngModel are: *{startDate: Date, endDate: Date}* by default; + +Specifying startKey and endKey would have different model. For example, the model in the example below would be *{start:Date, endDate:Date}*. + +```html + + + +``` + + +## Ranges predefined + +The `o-daterange-legacy-input` have available 7 predefined date ranges that you can select from. For displaying you must set `show-ranges="true"`. +- Today +- Yesterday +- Last 7 days +- Last 30 days +- This month + +![Touch UI in date range]({{ "/assets/images/components/inputs/o-daterange-legacy-touchui.png" | absolute_url }}){: .comp-example-img} + +```html + + +``` + +## Validation +The `o-daterange-legacy-input` shows automatically an error message when the `required` attribute is set to "yes" and there is no value on the input. + +The `min` and `max` properties will disable all dates on the calendar popup before or after the respective values and prevent the user from advancing the calendar past the month or year (depending on current view) containing the min or max date. + +```html + + +``` + +``` +export class InputDateRangeComponent { + + public selected = {}; + + constructor() { + + this.selected = { + startDate: moment('2019-05-15T00:00Z'), + endDate: moment('2019-05-20T00:00Z') + }; + } + + getValue(){ + return this.selected; + } +} +``` + +![Validation min and max in date range]({{ "/assets/images/components/inputs/o-daterange-legacy-input-validation-minmax.png" | absolute_url }}){: .comp-example-img} + + +You can see this and more examples of this component in the [OntimizeWeb playground]({{site.playgroundurl}}/main/inputs/daterangelegacy){:target="_blank"}. \ No newline at end of file