OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> |
| 10 <link rel="import" href="../polymer/polymer.html"> |
| 11 <link rel="import" href="../paper-input/paper-input-behavior.html"> |
| 12 <link rel="import" href="../paper-input/paper-input-container.html"> |
| 13 <link rel="import" href="../paper-input/paper-input-error.html"> |
| 14 <link rel="import" href="../iron-input/iron-input.html"> |
| 15 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio
r.html"> |
| 16 |
| 17 <link rel="import" href="date-input.html"> |
| 18 |
| 19 <!-- |
| 20 `gold-cc-expiration-input` is a single-line text field with Material Design sty
ling |
| 21 for entering a credit card's expiration date |
| 22 |
| 23 <gold-cc-expiration-input></gold-cc-expiration-input> |
| 24 <gold-cc-expiration-input value="11/15"></gold-cc-expiration-input> |
| 25 |
| 26 It may include an optional label, which by default is "Expiration Date". |
| 27 |
| 28 <gold-cc-expiration-input label="Date"></gold-cc-expiration-input> |
| 29 |
| 30 |
| 31 ### Validation |
| 32 |
| 33 The input can check whether the entered date is a valid, future date. |
| 34 |
| 35 The input can be automatically validated as the user is typing by using |
| 36 the `auto-validate` and `required` attributes. For manual validation, the |
| 37 element also has a `validate()` method, which returns the validity of the |
| 38 input as well sets any appropriate error messages and styles. |
| 39 |
| 40 See `Polymer.PaperInputBehavior` for more API docs. |
| 41 |
| 42 ### Styling |
| 43 |
| 44 See `Polymer.PaperInputContainer` for a list of custom properties used to |
| 45 style this element. |
| 46 |
| 47 @group Gold Elements |
| 48 @hero hero.svg |
| 49 @demo demo/index.html |
| 50 @class gold-cc-expiration-input |
| 51 --> |
| 52 |
| 53 <dom-module id="gold-cc-expiration-input"> |
| 54 <style> |
| 55 :host { |
| 56 display: block; |
| 57 } |
| 58 </style> |
| 59 |
| 60 <template> |
| 61 |
| 62 <paper-input-container id="container" |
| 63 always-float-label |
| 64 auto-validate="[[autoValidate]]" |
| 65 attr-for-value="date"> |
| 66 |
| 67 <label hidden$="[[!label]]">[[label]]</label> |
| 68 |
| 69 <date-input class="paper-input-input" id="input" |
| 70 aria-label-prefix="[[_ariaLabelledBy]]" |
| 71 required$="[[required]]" |
| 72 month="[[_computeMonth(value)]]" |
| 73 year="[[_computeYear(value)]]" |
| 74 autocomplete$="[[autocomplete]]"> |
| 75 </date-input> |
| 76 |
| 77 <template is="dom-if" if="[[errorMessage]]"> |
| 78 <paper-input-error>[[errorMessage]]</paper-input-error> |
| 79 </template> |
| 80 |
| 81 </paper-input-container> |
| 82 </template> |
| 83 |
| 84 </dom-module> |
| 85 |
| 86 <script> |
| 87 (function() { |
| 88 |
| 89 Polymer({ |
| 90 |
| 91 is: 'gold-cc-expiration-input', |
| 92 |
| 93 behaviors: [ |
| 94 Polymer.PaperInputBehavior, |
| 95 Polymer.IronFormElementBehavior |
| 96 ], |
| 97 |
| 98 properties: { |
| 99 /** |
| 100 * The label for this input. |
| 101 */ |
| 102 label: { |
| 103 type: String, |
| 104 value: "Expiration Date" |
| 105 } |
| 106 }, |
| 107 |
| 108 listeners: { |
| 109 'dateChanged': '_dateChanged' |
| 110 }, |
| 111 |
| 112 _dateChanged: function(event) { |
| 113 if (event.detail.month && event.detail.year) |
| 114 this.value = event.detail.month + '/' + event.detail.year; |
| 115 }, |
| 116 |
| 117 _computeMonth: function(value) { |
| 118 // Date is in MM/YY format. |
| 119 return value.split('/')[0]; |
| 120 }, |
| 121 |
| 122 _computeYear: function(value) { |
| 123 // Date is in MM/YY format. |
| 124 return value.split('/')[1]; |
| 125 } |
| 126 |
| 127 }) |
| 128 |
| 129 })(); |
| 130 |
| 131 </script> |
OLD | NEW |