Datepicker

Warning

再作業中、納期未定。 Front App SDK（ReactJS）とFront API SDK（NodeJS）の両方が置き換えられています。このページは現在のリリースをドキュメント化し、置き換えが出荷されるまで正確であり、維持されます。これに対して書かれたコードは動作を続けます。

Datepickerを使用すると、チャート内のデータをフィルタリングするための日付範囲を選択できます。

構成

以下に構成例を示し、さらに説明をします。

{
  "id": "datepicker",
  "type": "filter",
  "component": "datepicker",
  "reference": "range_date",
  "format": "YYYY-MM-DD",
  "startAt": "subtract(1,'year').startOf('day')",
  "endAt": "endOf('day')",
  "minDate": "startOf('day')",
  "maxDate": "endOf('day')",
  "request": {
    "data": {
      "fields": {
        "date": ["max", "min"]
      }
    }
  },
  "ranges": [
    {
      "label": "Past week",
      "start": "subtract(1, 'week').startOf('week')",
      "end": "subtract(1, 'week').endOf('week')"
    },
    {
      "label": "Current week",
      "start": "startOf('week')",
      "end": "endOf('day')"
    }
  ]
}

Warning

日付は、momentjsライブラリで定義されます（詳細は後述）。

フィールド	説明
`reference`	チャート（`range_` はフィールド名を追加する必要があります）にリンクされている場合のフィールドを`filter`
`format`	（オプション）日付ピッカー内の表示形式。指定されていない場合は、`./config/formatter.json`で使用されているものを使用します。
`startAt`	（オプション）日付ピッカーのデフォルト開始日
`endAt`	（オプション）日付ピッカーのデフォルト終了日
`minDate`	（オプション）日付ピッカーで選択可能な最小日付
`maxDate`	（オプション）日付ピッカーで選択可能な最大日付
`request`	（オプション）基礎となるデータから`min`と`max`の日付を動的に取得します
`ranges`	ショートカットバーを介して直接選択可能な範囲を表示することができます。パラメータ`start`と`end`を使用して、提案された範囲の開始と終了を選択し、`label`を表示します。

利用可能な最小および最大日付の設定

次のルールでは、日付ピッカーのエッジを制御する方法を説明します。

requestが提供されている場合
- datepickerはクエリの最初のフィールドを探し、minとmaxの計算モードを探します
- maxのみが与えられた場合、minはmaxと同じ値を取ります
requestが設定されていない場合：
- maxはnow()に設定されます
- minはnow()に設定されます
maxDate、startAt、endAtはmaxに対して相対的に定義されます
minDateはminに対して相対的に定義されます
minDateが提供されていない場合、それはmaxに対して前年の初めになります
すべての場合、set({'year': 2020, 'month': 0, 'date': 1})を指定して正確な日付を指定できます

まとめると、選択可能な日付を定義するには：

デフォルトでは、以下のようになります：
- 前年の初めから
- 今日まで
minDateとmaxDateのプロパティを使用して、今日から相対的に定義できます
requestを定義してminと/またはmaxの日付を選択できます

Warning

requestからminを取得する場合、minDateはminに対して相対的であり、maxからではなくなります

他のReactコンポーネントに追加する

例：

import React from 'react'
import FpDynamicParameter from 'forepaas/dynamic-parameter'
import moment from 'moment'

const myDynP =  {
  id: 'datepicker',
  type: 'filter',
  component: 'datepicker',
  reference: 'range_date',
  startAt: 'subtract(1,"year")',
  endAt: 'endOf("day")',
  minDate: moment().subtract(3, 'year'),
  maxDate: moment().endOf('day'),
  format: 'YYYY-MM-DD',
  request: {
    data: {
      fields: {
        date: ['max']
      }
    }
  },
  ranges: [{
    start: moment().subtract(1, 'week').startOf('week'),
    end: moment().subtract(1, 'week').endOf('week'),
    label: 'Past week'
  }, {
    start: moment().startOf('week'),
    end: moment().endOf('day'),
    label: 'Current week'
  }]
}
class MyComponent extends React.Component {
  render () {
    return (
      <div className='hello-world'>
        <FpDynamicParameter dynamic-parameter={myDynP} />
      </div>
    )
  }
}
export default MyComponent

moment.jsライブラリ

日付ピッカーは、momentjsライブラリを使用します。これにより、簡単に希望する期間を選択できます。コードでは、各パラメータに対して直接momentjs形式のオブジェクトを供給できます。ただし、JSON形式では、momentjsは「文字列」形式を介して使用されます。

例えば：

moment().subtract(1, 'week').endOf('week')

は

"subtract(1, 'week').endOf('week')"

になります

Datepicker#

#構成

#利用可能な最小および最大日付の設定

#他のReactコンポーネントに追加する

#moment.jsライブラリ

Datepicker

構成

利用可能な最小および最大日付の設定

他のReactコンポーネントに追加する

moment.jsライブラリ