
Security News
GitHub Actions Supply Chain Attack Puts Thousands of Projects at Risk
A compromised GitHub Action exposed secrets in CI/CD logs, putting thousands of projects at risk and forcing developers to urgently secure their workflows.
react-carbon-datepicker
Advanced tools
An Awesome flexible date picker | Fully Customizable Color Theme | Light weight | opensource | No MomentJS | No other dependancies | Notes / Reminders
npm install --save react-carbon-datepicker
This is a demo of react-carbon-datepicker
import React, { Component } from 'react'
import CarbonDatePicker from 'react-carbon-datepicker'
class Example extends Component {
render () {
return (
<CarbonDatePicker onChange={this.onChange} config={this.config}/>
)
}
}
The default date, should be passed in this format - 'yyyy-mm-dd'. example - '2019-12-23'
The Configuration for the date picker
Prop | Defenition | Data type |
---|---|---|
alwaysShow | If passed as true, The DatePicker will be always on the visible state | boolean |
showCalendar | If passed as true, The DatePicker will be on visible state initially | boolean |
themePreset | To set the default theme, 'dark' and 'default' is available | string |
reminders | Array of reminder objects | array |
theme | Theme config object | object |
The Reminders / Notes that will show in the given date
Prop | Defenition | Data Type |
---|---|---|
note | The text which will be displayed as the reminder | string |
color | The color of the tag of reminder | string |
timestamp | The timestamp of the day | int |
Theme for the DatePicker
{
squareEdge: false,
background: '#fff',
dateHeaderColor: '#777',
button: {
background: '#fff',
color: '#999',
hover: {
background: '#f9f9f9',
color: '#555',
}
},
input: {
background: '#f4f4f4',
color: '#555',
},
year: {
selector: {
background: '#fff',
pointerColor: 'rgba(0,0,0,0.03)',
listItem: {
background: 'transparent',
color: '#999',
hover: {
background: 'transparent',
color: '#333',
},
active: {
background: 'transparent',
color: '#333',
hover: {
background: 'transparent',
color: '#222',
},
}
},
button: {
background: '#fff',
color: '#999',
hover: {
background: '#f9f9f9',
color: '#555',
}
},
},
button: {
background: '#fff',
color: '#555',
hover: {
background: '#f9f9f9',
color: '#222',
}
},
},
month: {
button: {
background: '#fff',
color: '#555',
hover: {
background: '#f9f9f9',
color: '#222',
}
},
selector: {
background: 'rgba(255,255,255,0.95)',
button: {
background: 'transparent',
color: '#777',
hover: {
background: '#f5f5f5',
color: '#444',
},
active: {
background: '#c1e2c0',
color: '#555',
hover: {
background: '#b0d8af',
color: '#444',
},
}
}
}
},
date: {
background: 'transparent',
color: '#555',
hover: {
background: '#f9f9f9',
color: '#333',
},
active: {
background: '#ed1f4f',
color: '#fff',
hover: {
background: '#ed1f4f',
color: '#fff',
}
},
highlight: {
background: '#fde1e7',
color: '#333',
hover: {
background: '#fde1e7',
color: '#333',
}
},
disabled: {
opacity: 0.4,
color: '#555',
background: 'transparent'
}
},
reminder: {
headerColor: '#666',
descriptionColor: '#999'
}
}
MIT © rinasm
FAQs
An Awesome flexible opensource date picker.
The npm package react-carbon-datepicker receives a total of 3 weekly downloads. As such, react-carbon-datepicker popularity was classified as not popular.
We found that react-carbon-datepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A compromised GitHub Action exposed secrets in CI/CD logs, putting thousands of projects at risk and forcing developers to urgently secure their workflows.
Research
Security News
A malicious Maven package typosquatting a popular library is secretly stealing OAuth credentials on the 15th of each month, putting Java developers at risk.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.