From 36fd39442b654fede405364d4ce57515bb54c5d3 Mon Sep 17 00:00:00 2001 From: Carlos Vializ Date: Tue, 30 Oct 2018 18:14:24 -0400 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20binding=20for=20amp-date-pick?= =?UTF-8?q?er=20min=20attribute=20(#19035)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add binding for amp-date-picker min attribute * Clarify getDefaultMinDate behavior and remove extra moment call --- examples/date-picker.amp.html | 13 ++++ extensions/amp-bind/0.1/bind-validator.js | 4 + extensions/amp-bind/amp-bind.md | 11 +++ .../amp-date-picker/0.1/amp-date-picker.js | 26 ++++++- .../amp-date-picker/0.1/date-picker-common.js | 77 +++++++++++-------- .../0.1/test/test-amp-date-picker.js | 3 +- .../0.1/test/validator-amp-date-picker.html | 3 + .../0.1/test/validator-amp-date-picker.out | 55 ++++++------- extensions/amp-date-picker/amp-date-picker.md | 4 + .../validator-amp-date-picker.protoascii | 3 + 10 files changed, 140 insertions(+), 59 deletions(-) diff --git a/examples/date-picker.amp.html b/examples/date-picker.amp.html index 8e19ee7a364c..5df628d8d4f4 100644 --- a/examples/date-picker.amp.html +++ b/examples/date-picker.amp.html @@ -285,6 +285,19 @@

Start and End Today

+

amp-bind

+

min

+ +
2018-10-10
+ + + +

max

+ +
2018-10-10
+ + +
diff --git a/extensions/amp-bind/0.1/bind-validator.js b/extensions/amp-bind/0.1/bind-validator.js index aaf264b1dcdd..3a85a672d309 100644 --- a/extensions/amp-bind/0.1/bind-validator.js +++ b/extensions/amp-bind/0.1/bind-validator.js @@ -222,6 +222,10 @@ function createElementRules_() { 'AMP-CAROUSEL': { 'slide': null, }, + 'AMP-DATE-PICKER': { + 'max': null, + 'min': null, + }, 'AMP-GOOGLE-DOCUMENT-EMBED': { 'src': null, 'title': null, diff --git a/extensions/amp-bind/amp-bind.md b/extensions/amp-bind/amp-bind.md index 704322da74bb..dce63f550a17 100644 --- a/extensions/amp-bind/amp-bind.md +++ b/extensions/amp-bind/amp-bind.md @@ -426,6 +426,17 @@ Only binding to the following components and attributes are allowed: [slide]* Changes the currently displayed slide index. See an example. + + <amp-date-picker> + + [min]
+ [max] + + + Sets the earliest selectable date
+ Sets the latest selectable date + + <amp-google-document-embed> [src]
[title] diff --git a/extensions/amp-date-picker/0.1/amp-date-picker.js b/extensions/amp-date-picker/0.1/amp-date-picker.js index 9c073aa2b92a..341c0e5d70de 100644 --- a/extensions/amp-date-picker/0.1/amp-date-picker.js +++ b/extensions/amp-date-picker/0.1/amp-date-picker.js @@ -103,8 +103,6 @@ const TAG = 'amp-date-picker'; const DATE_SEPARATOR = ' '; const attributesToForward = [ - 'max', - 'min', 'month-format', 'number-of-months', 'minimum-nights', @@ -481,6 +479,23 @@ export class AmpDatePicker extends AMP.BaseElement { }); } + /** @override */ + mutatedAttributesCallback(mutations) { + const newState = map(); + + const min = mutations['min']; + if (min !== undefined) { + newState['min'] = min; + } + + const max = mutations['max']; + if (max !== undefined) { + newState['max'] = max; + } + + this.setState_(newState); + } + /** @override */ layoutCallback() { const srcAttributesPromise = this.setupSrcAttributes_(); @@ -743,6 +758,9 @@ export class AmpDatePicker extends AMP.BaseElement { this.endDateField_.value = this.getFormattedDate_(endDate); } + const max = element.getAttribute('max') || ''; + const min = element.getAttribute('min') || ''; + return map({ date, endDate, @@ -750,6 +768,8 @@ export class AmpDatePicker extends AMP.BaseElement { focusedInput: this.ReactDatesConstants_.START_DATE, isFocused: false, isOpen: this.mode_ == DatePickerMode.STATIC, + max, + min, startDate, }); } @@ -1676,6 +1696,8 @@ export class AmpDatePicker extends AMP.BaseElement { // in the month. this.reactRender_( this.react_.createElement(Picker, Object.assign({}, { + min: props.min, + max: props.max, date: props.date, startDate: props.startDate, endDate: props.endDate, diff --git a/extensions/amp-date-picker/0.1/date-picker-common.js b/extensions/amp-date-picker/0.1/date-picker-common.js index 5f5054b09e67..adeb0b55699e 100644 --- a/extensions/amp-date-picker/0.1/date-picker-common.js +++ b/extensions/amp-date-picker/0.1/date-picker-common.js @@ -33,13 +33,17 @@ export function withDatePickerCommon(WrappedComponent) { const moment = requireExternal('moment'); /** - * @param {!moment} max - * @return {!moment} + * If `max` is null, the default minimum date is the current date. + * If `max` is a Moment date and earlier than the current date, then + * there is no default minimum date. If `max` is later than the current date, + * then the default minimum date is the current date. + * @param {?moment} max + * @return {?moment} */ function getDefaultMinDate(max) { const today = moment(); if (max) { - return !isInclusivelyAfterDay(today, moment(max)) ? today : ''; + return !isInclusivelyAfterDay(today, max) ? today : null; } else { return today; } @@ -52,8 +56,8 @@ export function withDatePickerCommon(WrappedComponent) { * @return {boolean} */ function isOutsideRange(min, max, date) { - const maxInclusive = max && moment(max); - const minInclusive = min && moment(min); + const maxInclusive = max ? moment(max) : null; + const minInclusive = min ? moment(min) : getDefaultMinDate(maxInclusive); if (!maxInclusive && !minInclusive) { return false; } else if (!minInclusive) { @@ -65,6 +69,18 @@ export function withDatePickerCommon(WrappedComponent) { } } + /** + * @param {!./dates-list.DatesList} list + * @param {!moment} day + * @return {boolean} + */ + function datesListContains(list, day) { + if (!list) { + return false; + } + return list.contains(day); + } + const defaultProps = map({ blocked: null, highlighted: null, @@ -81,12 +97,16 @@ export function withDatePickerCommon(WrappedComponent) { constructor(props) { super(props); - /** @private @const */ - this.min_ = this.props.min || getDefaultMinDate(this.props.max); + const { + blocked, + highlighted, + min, + max, + } = props; - this.isDayBlocked = this.isDayBlocked.bind(this); - this.isDayHighlighted = this.isDayHighlighted.bind(this); - this.isOutsideRange = this.isOutsideRange.bind(this); + this.isDayBlocked = datesListContains.bind(null, blocked); + this.isDayHighlighted = datesListContains.bind(null, highlighted); + this.isOutsideRange = isOutsideRange.bind(null, min, max); } /** @override */ @@ -96,28 +116,25 @@ export function withDatePickerCommon(WrappedComponent) { } } - /** - * @param {!moment} day - * @return {boolean} - */ - isDayBlocked(day) { - return this.props.blocked.contains(day); - } + /** @override */ + componentWillReceiveProps(nextProps) { + const { + max, + min, + blocked, + highlighted, + } = nextProps; + if (min != this.props.min || max != this.props.max) { + this.isOutsideRange = isOutsideRange.bind(null, min, max); + } - /** - * @param {!moment} day - * @return {boolean} - */ - isDayHighlighted(day) { - return this.props.highlighted.contains(day); - } + if (blocked != this.props.blocked) { + this.isDayBlocked = datesListContains.bind(null, blocked); + } - /** - * @param {!moment} day - * @return {boolean} - */ - isOutsideRange(day) { - return isOutsideRange(this.min_, this.props.max, day); + if (highlighted != this.props.highlighted) { + this.isDayHighlighted = datesListContains.bind(null, highlighted); + } } /** @override */ diff --git a/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js b/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js index 312ae436bf20..7acdeb37b71c 100644 --- a/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js +++ b/extensions/amp-date-picker/0.1/test/test-amp-date-picker.js @@ -239,7 +239,8 @@ describes.realWin('amp-date-picker', { }); describe('src templates', () => { - it('should parse RRULE and date templates', () => { + it('should parse RRULE and date templates', function() { + this.timeout(4000); const template = createDateTemplate('{{val}}', { dates: '2018-01-01', id: 'srcTemplate', diff --git a/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.html b/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.html index c7f19b83f1bc..4ca2cc63acc0 100644 --- a/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.html +++ b/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.html @@ -112,6 +112,9 @@ + + + diff --git a/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out b/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out index 62d328c6f9ae..1f45e1544d12 100644 --- a/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out +++ b/extensions/amp-date-picker/0.1/test/validator-amp-date-picker.out @@ -113,106 +113,109 @@ FAIL | | | +| +| +| | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:117:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:120:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:117:2 The attribute 'mode' in tag 'amp-date-picker[type=single][mode=overlay]' is set to the invalid value 'static'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:120:2 The attribute 'mode' in tag 'amp-date-picker[type=single][mode=overlay]' is set to the invalid value 'static'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:117:2 The attribute 'start-input-selector' may not appear in tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:120:2 The attribute 'start-input-selector' may not appear in tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:120:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:123:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:120:2 The attribute 'type' in tag 'amp-date-picker[type=single][mode=overlay]' is set to the invalid value 'range'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:123:2 The attribute 'type' in tag 'amp-date-picker[type=single][mode=overlay]' is set to the invalid value 'range'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:123:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:126:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:125:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:128:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:128:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:131:2 Incomplete layout attributes specified for tag 'amp-date-picker[type=single][mode=static]'. For example, provide attributes 'width' and 'height'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:128:2 The attribute 'mode' in tag 'amp-date-picker[type=single][mode=static]' is set to the invalid value 'overlay'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:131:2 The attribute 'mode' in tag 'amp-date-picker[type=single][mode=static]' is set to the invalid value 'overlay'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:132:2 The implied layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:135:2 The implied layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:132:2 The attribute 'wdith' may not appear in tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:135:2 The attribute 'wdith' may not appear in tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | | | > ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:135:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:138:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:135:2 The attribute 'day-size' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value 'five'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:138:2 The attribute 'day-size' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value 'five'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | day-size="five"> | | | > ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:139:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:142:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:139:2 The attribute 'number-of-months' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value 'twele'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:142:2 The attribute 'number-of-months' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value 'twele'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | number-of-months="twele"> | | | > ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:143:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:146:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:143:2 The attribute 'first-day-of-week' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value '7'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:146:2 The attribute 'first-day-of-week' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value '7'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | first-day-of-week="7"> | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:147:2 The parent tag of tag 'amp-date-picker > template [info-template]' is 'body', but it can only be 'amp-date-picker'. (see https://www.ampproject.org/docs/reference/components/amp-mustache) [AMP_TAG_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:150:2 The parent tag of tag 'amp-date-picker > template [info-template]' is 'body', but it can only be 'amp-date-picker'. (see https://www.ampproject.org/docs/reference/components/amp-mustache) [AMP_TAG_PROBLEM] | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:148:2 The parent tag of tag 'amp-date-picker > template [date-template]' is 'body', but it can only be 'amp-date-picker'. (see https://www.ampproject.org/docs/reference/components/amp-mustache) [AMP_TAG_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:151:2 The parent tag of tag 'amp-date-picker > template [date-template]' is 'body', but it can only be 'amp-date-picker'. (see https://www.ampproject.org/docs/reference/components/amp-mustache) [AMP_TAG_PROBLEM] | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:150:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:153:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:150:2 The attribute 'minimum-nights' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value 'zero'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:153:2 The attribute 'minimum-nights' in tag 'amp-date-picker[type=range][mode=overlay]' is set to the invalid value 'zero'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:153:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:156:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:156:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:159:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=range][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:159:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:162:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:159:2 The attribute 'type' in tag 'amp-date-picker[type=single][mode=overlay]' is set to the invalid value 'range'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] +amp-date-picker/0.1/test/validator-amp-date-picker.html:162:2 The attribute 'type' in tag 'amp-date-picker[type=single][mode=overlay]' is set to the invalid value 'range'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [DISALLOWED_HTML] | | | >> ^~~~~~~~~ -amp-date-picker/0.1/test/validator-amp-date-picker.html:162:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] +amp-date-picker/0.1/test/validator-amp-date-picker.html:165:2 The specified layout 'FIXED_HEIGHT' is not supported by tag 'amp-date-picker[type=single][mode=overlay]'. (see https://www.ampproject.org/docs/reference/components/amp-date-picker) [AMP_LAYOUT_PROBLEM] | | | \ No newline at end of file diff --git a/extensions/amp-date-picker/amp-date-picker.md b/extensions/amp-date-picker/amp-date-picker.md index f3b7d2ebfecd..b61da2e72749 100644 --- a/extensions/amp-date-picker/amp-date-picker.md +++ b/extensions/amp-date-picker/amp-date-picker.md @@ -324,11 +324,15 @@ an initial end date dynamically. The earliest date that the user may select. This must be formatted as an ISO 8601 date. If no `min` attribute is present, the current date will be the minimum date. +The `min` attribute may be updated after a user gesture with [`amp-bind`](https://www.ampproject.org/docs/reference/components/amp-bind). + ##### max The latest date that the user may select. This must be formatted as an ISO 8601 date. If no `max` attribute is present, the date picker will have no maximum date. +The `max` attribute may be updated after a user gesture with [`amp-bind`](https://www.ampproject.org/docs/reference/components/amp-bind). + ##### month-format The format to use for displaying the month in the calendar view. diff --git a/extensions/amp-date-picker/validator-amp-date-picker.protoascii b/extensions/amp-date-picker/validator-amp-date-picker.protoascii index b95647ed1716..cd47d005ef3b 100644 --- a/extensions/amp-date-picker/validator-amp-date-picker.protoascii +++ b/extensions/amp-date-picker/validator-amp-date-picker.protoascii @@ -173,6 +173,9 @@ attr_lists: { blacklisted_value_regex: "__amp_source_origin" } attrs: { name: "week-day-format" } + # amp-bind + attrs: { name: "[max]" } + attrs: { name: "[min]" } } attr_lists: {