Installations

npm install ftc-datepicker

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

1

Closed

1

Releases

11

Release 5.1.0

v5.1.0

Published on 17 Aug 2023

Release 5.0.0

v5.0.0

Published on 17 Aug 2023

Release 4.1.1

v4.1.1

Published on 19 Jul 2023

Release 4.1.0

v4.1.0

Published on 18 Jul 2023

Release 4.0.1

v4.0.1

Published on 18 Jul 2023

Release 3.3.1

v3.3.1

Published on 12 Jul 2023

View all 11 releases

Developer

ftc-development

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

18.17.1

NPM Version

9.6.7 Statistics

57 Commits

2 Watching

1 Branches

4 Contributors

Updated on 01 Dec 2021

Languages

JavaScript (84.58%)

CSS (15.42%)

Total Downloads

Cumulative downloads

Total Downloads

19,736

Last day

-33.3%

14

Compared to previous day

Last week

-31.1%

71

Compared to previous week

Last month

5.9%

412

Compared to previous month

Last year

-3.8%

8,052

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

15

@babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-arrow-functions @babel/preset-env @babel/preset-react babel-loader css-loader prop-types react react-dom style-loader webpack webpack-cli webpack-dev-server

Peer Dependencies

2

react react-dom

Versions

ftc-datepicker

Ultimate calendar for your React app.
Supports range selection

tl;dr

Install by executing npm install ftc-datepicker or yarn add ftc-datepicker
Import by adding import DatePicker from 'ftc-datepicker';
Use by adding <DatePicker />
For getting selected date/range use this prop: selectCallbackFN

Getting started

Installation

Add ftc-datepicker to your project by executing

npm install ftc-datepicker

or

yarn add ftc-datepicker

Usage

Here's an example of basic usage:

1import React, { Component } from 'react';
2import DatePicker from 'ftc-datepicker';
3
4class MyApp extends Component {
5  constructor() {
6    super();
7    this.state = {
8      startDate: new Date(2020, 5, 1),
9      endDate: new Date(2020, 6, 4)
10    }
11  }
12  
13  onSelect = ({startDate, endDate}) => this.setState({
14    startDate: startDate,
15    endDate: endDate
16  });
17
18  render() {
19    return (
20      <div>
21        <div>{this.state.startDate} - {this.state.endDate}</div>
22        <DatePicker
23          startDate={new Date(2020, 5, 1)}
24          endDate={new Date(2020, 6, 4)}
25          onSelect={this.onSelect}
26        />
27      </div>
28    );
29  }
30}

User guide

Props

Prop name	Prop description	Prop type	Default value	Example values
isPopUp	A boolean determines whether it will be a popup or not	Boolean	`false`	`true` or `false`
isRangePicker	A boolean determines whether it will be a date range selector or not (It cannot be used in combination with `isFlexibleDate`)	Boolean	`false`	`true` or `false`
isFlexibleDate	A boolean determines whether it will be a flexible selector or not (It cannot be used in combination with `isRangePicker`)	Boolean	`false`	`true` or `false`
showDateRangeDetails	A boolean determines whether it will show the selected date/range details in the date picker	Boolean	`false`	`true` or `false`
showTitleDropDown	A boolean determines whether it will show a dropdown with a list of months in each month title or not.	Boolean	`false`	`true` or `false`
showInputLabel	Only activated if `isPopUp` is `true`, and it determines whether it will show the label of the date picker input or not	Boolean	`false`	`true` or `false`
selectedDateCanBeOutOfAllowedRange	A boolean determines whether selected date can be (before `minDate` or after `maxDate`) or not.	Boolean	`false`	`true` or `false`
flexibleDateRanges	Only activated if `isFlexibleDate` is set to `true`. It is an array of all flexible date ranges	Array of Numbers	`[]`	`[1, 2, 3]`
flexibleDateRangesLabels	Only activated if `isFlexibleDate` is set to `true`. It is an array of all flexible date ranges labels	Array of Strings	`['± 1 day', '± 2 days', ...]`	`['± 1 day', '± 2 days', '± 3 days']`
flexibleDateRange	Only activated if `isFlexibleDate` is set to `true`. It is the default flexible date range. It should be one of the `flexibleDateRanges` array.	Number	0	2
flexibleDateTitle	Only activated if `isFlexibleDate` is set to `true`. It is a title that will be shown above the flexible date ranges buttons	String	`'Arrival day earlier or later'`	`'Any title ...'`
flexibleDateSelectButtonLabel	Only activated if `isFlexibleDate` is set to `true`.	String	`'Select'`	`'Any label ...'`
firstDayInWeekShift	A number between `0` and `6` sets the beginning of the week. `0` is for Monday and `6` is for Sunday	Number	`0`	`4`
monthsInDatePicker	A number sets how many months to show	Number	`1`	`2`
monthStep	A number sets the value of the months change step when the previous or next buttons are pressed	Number	`1`	`2`
selectedDaysInOneClick	Only activated if `isRangePicker` is set to `false`. And by giving it a value more than `1` you can select more than one day in one click	Number	`1`	`3`
dayNameLength	A number that sets the length of day names in the month table header	Number	`3`	`9`
weekEnds	An array that sets the indexes of the weekends. Monday's index is is `0` and Sunday's index is `6`	Array of Numbers	`[5, 6]`	`[6]`
inputDateFormat	Only activated when `isPopUp` is set to `true` and it can be a function or a string specifies how the selected date in the date picker input will be shown. For example 8/March/2019: yyyy: 2019 yy: 19 MMMM: March MMM: Mar MM: Ma M: M mm: 03 m: 3 DDDD: Friday DDD: Fri DD: Fr D: F dd: 08 d: 8	String OR Function(Date) => String	`'DDD, MMM dd yyyy'`	`'d/m/yyyy'`
headerDateFormat	ِIt can be a function or a string specifies how the month header will be shown. The same format pattern used in `inputDateFormat`	String OR Function(Date) => String	`'MMMM yyyy'`	`'mm-yyyy'`
datePickerRangeFormat	ِIt can be a function or a string specifies how the selected date/range will be shown. The same format pattern used in `inputDateFormat`	String OR Function(Date) => String	`'dd/mm/yyyy'`	`'d-m-yyyy'`
inputPlaceholder	Only activated if `isPopUp` is `true`, and it sets the placeholder text for the date picker input	String	`'Click here to select date'`	`'Select date'`
inputLabel	Only activated if both `isPopUp` & `showInputLabel` are `true`, and it sets the label text for the date picker input	String	`'Click here to select date'`	`'Select date'`
monthNames	Use it to provide your own month names	Array of Strings	`['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']`	`['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']`
dayNames	Use it to provide your own day names. Please note that the array should start with Monday's name	Array of Strings	`['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']`	`['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']`
minDate	To prevent showing or selecting dates before this date. If not provided, there will be no minimum limit	Date	`null`	`new Date(2010, 2, 4)`
maxDate	To prevent showing or selecting dates after this date. If not provided, there will be no maximum limit	Date	`null`	`new Date(2025, 3, 2)`
startDate	If `isRangePicker` is set to `true` then this will be the initial start date, if not then it will be the initial selected date	Date	`null`	`new Date(2019, 2, 9)`
endDate	Only activated when `isRangePicker` is set to `true` and it represents the initial end date	Date	`null`	`new Date(2019, 5, 4)`
shownMonth	The initial shown month	Date	`null`	`new Date()`
firstMonthInMonthsDropDown	Only activated if `showTitleDropDown` is set to `true`, It sets the first month in the month title dropdown	Date	Current month	`new Date(2019, 2, 17)`
lastMonthInMonthsDropDown	Only activated if `showTitleDropDown` is set to `true`, It sets the last month in the month title dropdown	Date	After 2 years from current month	`new Date(2021, 5, 21)`
blackList	Array of dates/ranges that you want to prevent the user from selecting them	[Date, {start: Date, end: Date}, Date, ...]	`[]`	`[new Date(2019, 9, 30), new Date(2019, 11, 1), {start: new Date(2020, 2, 3), end: new Date(2020, 8, 1)}, ...]`
onSelect	A callback function that will be called each time the user selects a date	Function	`null`	`({startDate, endDate, shownMonth, flexibleDateRange}) => this.setState({start: startDate, end: endDate})`
onMonthChange	A callback function that will be called each time the user shows a different month	Function	`null`	`({startDate, endDate, shownMonth}) => this.setState({start: startDate, end: endDate})`
onToggle	Only activated if `isPopUp` is `true`. It ia a callback function that will be called each time the popup toggles	Function	`null`	`(isOpen) => console.log('popup is ' + (isOpen ? 'open' : 'closed'))`
dayTileTemplate	To provide your own template for day tiles	Function	`null`	`({startDate, endDate, shownMonth, dayDate, dayLabel}) => <div><h1>{dayDate.getDate()}</h1><p>Some text</p></div>`
inputPlaceholderIconTemplate	To add a template for the input placeholder icon	Function	`null`	`({isOpen, startDate, endDate, shownMonth, flexibleDateRange}) => (isOpen ? <Some open icon /> : <Some closed icon />)`
inputTemplate	A template for the date picker input button	Function	`null`	`({startDate, endDate, shownMonth, flexibleDateRange}) => <Some button />`
inputClearButtonTemplate	This is a template to add a clear selection button to the date picker input	Function	`null`	`({startDate, endDate, shownMonth, flexibleDateRange}) => (startDate ? <Some clear icon /> : <Some picker icon />)`
footerTemplate	To add a template for the date picker footer	Function	`null`	`({startDate, endDate, shownMonth}) => <div></div>`
previousButtonTemplate	To provide your own template for previous month button	Function	`null`	`({startDate, endDate, shownMonth}) => <button>Previous</button>`
nextButtonTemplate	To provide your own template for next month button	Function	`null`	`({startDate, endDate, shownMonth}) => <button>Next</button>`
monthTitleDropDownIconTemplate	To provide a template for the icon of the month dropdown title	Function	`null`	`({startDate, endDate, shownMonth, open}) => (open ? <Some icon /> : <Other icon />)`

Authors

Mustapha Idrissi & Yaser Somaf
m.idrissi@freetimecompany.nl
y.somaf@freetimecompany.nl

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.3

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ftc-datepicker

ftc-datepicker

Installations

Pull Requests

0

1

0

1

Issues

0

1

1

Releases

Developer

ftc-development

Developer Guide

CommonJS

No

18.17.1

9.6.7

Statistics

Languages

Total Downloads

19,736

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

ftc-datepicker

tl;dr

Getting started

Installation

Usage

User guide

Props

Authors

10

0

0

0

0

0

0

0

0

0

1.3

/10

Other packages similar to ftc-datepicker