3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

永らく 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;
}

このコンポーネントを配置すると、以下のようになりました。
(赤線は「選択可能な部分の説明用」で、実際には表示されません)
datepicker.png

aura:attribute 経由で controller/helper で min/max の値を指定してやれば、動的に変更することも可能です。
実際の業務では

  • n日以降から入力可能としたい
  • n日以前は入力不可としたい

のようなケースが多々あると思いますので、この機能が GA なのは本当にありがたいですね :smile:

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?