永らく beta であった lightning:input
タグ。
先週くらいにふと見ますと、GA になっていました。これで何のためらいもなく使える!
使いたかったのは、件名の通り「入力可能な日を制限する」機能。
lightning:input - example - Salesforce Lightning Component Library
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example
を参考に、試しに以下のようにコーディング。
(2018-07-05 から 2018-07-20 まで選択可能にしてみる。css はキャプチャ用に見た目を整えるだけ)
<!-- sample.ccmp -->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<div class="row">
<h2 class="header">Advanced Input Date</h2>
<lightning:input type="date" name="input8" label="Date field with min and max values"
value="2018-07-10" min="2018-07-05" max="2018-07-20" />
</div>
</aura:component>
/* sample.css */
.THIS {
background-color: white;
margin: 5rem;
height: 30rem;
padding: 2rem;
}
このコンポーネントを配置すると、以下のようになりました。
(赤線は「選択可能な部分の説明用」で、実際には表示されません)
aura:attribute
経由で controller/helper で min/max の値を指定してやれば、動的に変更することも可能です。
実際の業務では
- n日以降から入力可能としたい
- n日以前は入力不可としたい
のようなケースが多々あると思いますので、この機能が GA なのは本当にありがたいですね