@coveops/date-range-picker
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    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

    1. Install the component into your project.
    npm i @coveops/date-range-picker
    
    1. Use the Component or extend it

    Typescript:

    import { DateRangePicker, IDateRangePickerOptions } from '@coveops/date-range-picker';

    Javascript

    const DateRangePicker = require('@coveops/date-range-picker').DateRangePicker;
    1. You can also expose the component alongside other components being built in your project.
    export * from '@coveops/date-range-picker'
    1. 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.

    1. 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

    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

    1. Clone the project
    2. 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.
    3. Build the code base: npm run build
    4. Serve the sandbox for live development npm run serve or: .\node_modules.bin\coveops serve --port 6001 --token TOKEN

    Keywords

    none

    Install

    npm i @coveops/date-range-picker

    DownloadsWeekly Downloads

    8

    Version

    1.1.4

    License

    Apache-2.0

    Unpacked Size

    1.14 MB

    Total Files

    22

    Last publish

    Collaborators

    • ehsanshahneh
    • dsisodraker
    • watallah
    • coveoit
    • gfoumbi
    • rvundavalli
    • jwolfe-coveo
    • sfecteau
    • mthusscoveo
    • jfleurent
    • eqcoveo
    • jmdro
    • davebouffard
    • jfallaire
    • achouan
    • hsinghcoveo
    • wnijmeijer
    • lgcarrierbedard
    • elafleur_coveo
    • plavigueur
    • eaubin
    • lpblais-coveo
    • jpdery26
    • cricha