[祝GA] lightning:input の DatePicker は入力可能な日を制限できる

3093 ワード
Lightning Salesforce Salesforce テキストリンク

永らく 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 なのは本当にありがたいですね