Datepicker

Warning

Rework pending, no delivery date. The Front App SDK (ReactJS) and the Front API SDK (NodeJS) are both being replaced. This page documents the current release, remains accurate, and is maintained until the replacement ships. Code written against it keeps working.

The Datepicker allows you to select a date range to filter the data in a chart.

Configuration

Here is a configuration example followed by further explanations.

{
  "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

Dates are defined with the momentjs library (see below for more information).

field	description
`reference`	field to `filter` when linked to a chart (`range_` must be added the field name)
`format`	(optionnal) Display format inside the datepicker. If not given, will use the one in `./config/formatter.json`.
`startAt`	(optionnal) Default start date of the datepicker
`endAt`	(optionnal) Default end date for the datepicker
`minDate`	(optionnal) Minimum date selectable in the datepicker
`maxDate`	(optionnal) Maximum date selectable in the datepicker
`request`	(optionnal) dynamically get `min` and `max` dates from underlying data
`ranges`	Allows you to display selectable ranges directly via a shortcut bar. With parameters `start` and `end` to select the beginning and end of the range proposed, as well as `label` to be displayed.

Configuring minimum and maximum dates available

The following rules explains how to control the datepicker edges :

in case a request is provided
- datepicker will look for the first field in the query, looking for min and max compute mode
- if only max is given, min takes same value as max
if request is not set :
- max is set to now()
- min is set to now()
maxDate, startAt, endAt are defined relative to max
minDate is defined relative to min
if minDate is not provided, it will be the beginning of previous year relative to max
in all case, you may specifiy a precise date by set({'year': 2020, 'month': 0, 'date': 1})

To wrap it up, to define selectable dates :

by default it goes :
- from beginning of previous year
- until today
you may define them using minDate and maxDate properties relative from today
you may define a request to select min and/or max date

Warning

When getting a min from request, minDate is relative to min and not anymore from max

Adding it in another React component

Example:

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 Library

The datepicker uses the library momentjs. This allows you to easily select a desired period. In code you can directly supply an object in momentjs format for each parameter. However, in JSON format, momentjs is used through a "string" format.

For instance:

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

becomes

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

Datepicker#

#Configuration

#Configuring minimum and maximum dates available

#Adding it in another React component

#moment.js Library

Datepicker

Configuration

Configuring minimum and maximum dates available

Adding it in another React component

moment.js Library