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

fix(inputs): disabled handling (#16071)

Browse Source
This commit is contained in:
Manu MA
2018-10-25 22:50:06 +02:00
committed by GitHub
parent 4d3ad67740
commit ef6895acbd
36 changed files with 320 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/datetime/datetime.tsx
View File

@@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
import { clamp, deferEvent } from '../../utils/helpers';
import { clamp } 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';
@@ -179,7 +179,7 @@ export class Datetime implements ComponentInterface {
/**
* The value of the datetime as a valid ISO 8601 datetime string.
*/
@Prop({ mutable: true }) value?: string;
@Prop({ mutable: true }) value?: string | null;
/**
* Update the datetime value when the value changes
@@ -212,7 +212,6 @@ export class Datetime implements ComponentInterface {
// 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
this.ionStyle = deferEvent(this.ionStyle);
this.locale = {
// this.locale[type] = convertToArrayOfStrings((this[type] ? this[type] : this.config.get(type), type);
monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
@@ -222,9 +221,6 @@ export class Datetime implements ComponentInterface {
};
this.updateDatetimeValue(this.value);
}
componentDidLoad() {
this.emitStyle();
}
@@ -502,7 +498,7 @@ export class Datetime implements ComponentInterface {
this.text = renderDatetime(template, this.datetimeValue, this.locale);
}
hasValue(): boolean {
private hasValue(): boolean {
const val = this.datetimeValue;
return Object.keys(val).length > 0;
}
@@ -538,7 +534,6 @@ export class Datetime implements ComponentInterface {
onClick={this.open.bind(this)}
class="datetime-cover"
>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
];
}

2
core/src/components/datetime/readme.md
View File

@@ -224,7 +224,7 @@ dates in JavaScript.
| `pickerFormat` | `picker-format` | 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`. | `string \| undefined` |
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `PickerOptions \| undefined` |
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` |
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `string \| undefined` |
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` |
| `yearValues` | -- | 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 a number, 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"`. | `number \| number[] \| string \| undefined` |

2
core/src/components/datetime/test/basic/index.html
View File

@@ -42,7 +42,7 @@
</ion-item>
<ion-item>
<ion-label>MM DD YY</ion-label>
<ion-label position="floating">MM DD YY</ion-label>
<ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
</ion-item>