DateRangePicker
Provides a From and To Date Picker to select a date range.
Disclaimer: This component was built by the community at large and is not an official Coveo JSUI Component. Use this component at your own risk.
Getting Started
- Install the component into your project.
npm i @coveops/date-range-picker
- Use the Component or extend it
Typescript:
import { DateRangePicker, IDateRangePickerOptions } from '@coveops/date-range-picker';
Javascript
const DateRangePicker = require('@coveops/date-range-picker').DateRangePicker;
- You can also expose the component alongside other components being built in your project.
export * from '@coveops/date-range-picker'
- Or for quick testing, you can add the script from unpkg
<script src="https://unpkg.com/@coveops/date-range-picker@latest/dist/index.min.js"></script>
Disclaimer: Unpkg should be used for testing but not for production.
- Include the component in your template as follows:
Place the component in your markup:
<div class="CoveoDateRangePicker"></div>
Options
The following options can be configured:
Option | Required | Type | Default | Notes |
---|---|---|---|---|
id |
No | string | fieldFrom-fieldTo |
id of the control |
title |
No | string | NoTitle |
Specifies the title to display at the top of the Component |
startCaption |
No | string | Start |
Specifies what the caption of "start" should be |
endCaption |
No | string | End |
Specifies what the caption of "end" should be |
todayCaption |
No | string | Today |
Specifies what the caption of "today" radio button should be |
thisWeekCaption |
No | string | This Week |
Specifies what the caption of "thisweek" radio button should be |
lastWeekCaption |
No | string | Last Week |
Specifies what the caption of "lastweek" radio button should be |
thisMonthCaption |
No | string | This Month |
Specifies what the caption of "thismonth" radio button should be |
fieldFrom |
Yes | string | @sysdate |
Index field to use for the from date |
fieldTo |
Yes | string | @sysdate |
Index field to use for the to date |
enableRadioButton |
No | boolean | false |
Show radiobuttons with today, thisweek etc. |
langCode |
No | string | en |
Language code. Currently supports English (en ), French (fr ), Dutch (de ) and Spanish (es or es-es ) |
format |
No | string | YYYY-MM-DD |
Date format to accept |
inputPlaceholder |
No | string | YYYY-MM-DD |
A placeholder in the date component input |
firstDay |
No | number | 0 |
Defines the first day of the week on the calendar, 0 being Sunday and 6 being Saturday |
readOnlyInput |
No | boolean | true |
Sets the readonly attribute on the date picker input field. |
yearsBack |
No | number | 100 |
A positive number that defines by how many years we want to go back from the current year. |
yearsAhead |
No | number | 0 |
A positive number that defines by how many years we want to go forward from the current year. |
Regarding localization
Since we have many different captions, this is how we perform localization for the form's elements (assuming you set the component langCode
to fr
):
{
"Start": "Début", // where "Start" is the value of `startCaption`
"End": "Fin", // where "End" is the value of `endCaption`
"Today": "Aujourd'hui", // where "Today" is the value of `todayCaption`
"This Week": "Cette semaine", // where "This Week" is the value of `thisWeekCaption`
"Last Week": "La semaine dernière", // where "Last Week" is the value of `lastWeekCaption`
"This Month": "Ce mois-ci", // where "This Month" is the value of `thisMonthCaption`
"Title": "Titre", // where "Title" is the value of `title`
};
Extending
Extending the component can be done as follows:
import { DateRangePicker, IDateRangePickerOptions } from "@coveops/date-range-picker";
export interface IExtendedDateRangePickerOptions extends IDateRangePickerOptions {}
export class ExtendedDateRangePicker extends DateRangePicker {
protected buildPickerInputSection(): HTMLElement {
return inputelement;
}
protected buildPickerinputRow(labelCaption: string, id: string, inputElement: HTMLInputElement): HTMLElement {
return rowelement;
}
protected buildHeader(): HTMLElement {
return headerelement;
}
protected buildEraser(): HTMLElement {
return eraserelement;
}
}
The following methods can be extended to provide additional functionalities or handle more complex use cases.
buildPickerInputSection
Build the input selection, normally a picker element
protected buildPickerInputSection(): HTMLElement
buildPickerinputRow
Build the input row for the selection for one of the fields
protected buildPickerinputRow(labelCaption: string, id: string, inputElement: HTMLInputElement): HTMLElement
buildHeader
Build the header of the component
protected buildHeader(): HTMLElement
buildEraser
Build the eraser component
protected buildEraser(): HTMLElement
Contribute
- Clone the project
- Copy
.env.dist
to.env
and update the COVEO_ORG_ID and COVEO_TOKEN fields in the.env
file to use your Coveo credentials and SERVER_PORT to configure the port of the sandbox - it will use 8080 by default. - Build the code base:
npm run build
- Serve the sandbox for live development
npm run serve
or: .\node_modules.bin\coveops serve --port 6001 --token TOKEN