Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@compeon/monthpicker

Package Overview
Dependencies
2
Maintainers
11
Versions
45
Issues
File Explorer

Advanced tools

@compeon/monthpicker

Simple monthpicker using react & date-fns

    0.4.13latest

Version published
Maintainers
11
Yearly downloads
11,755
increased by110.06%

Weekly downloads

Changelog

Source

[0.4.13] - 2021-09-21

Changed

  • dependency updates

Readme

Source

Simple, clean monthpicker component built with react, styled-components and date-fns

Screenshot

Installation

yarn add @compeon/monthpicker

You also need to have styled-components installed, so if that's not the case already

yarn add styled-components

Usage

import Monthpicker from '@compeon/monthpicker' <Monthpicker format='MM.yyyy' onChange={this.handleChange}> <div>Click me</div> </Monthpicker>

Props

propdescriptiondefault
monththe currently selected monthnew Date().getMonth()
yearthe currently selected yearnew Date().getFullYear()
localethe locale that is used for displaying monthnamesde
formatformat the onChange function is called with. Can be anything from this listMM.yyyy
onBlurfunction that is called when the picker is blurred-
onFocusfunction that is called when the picker is focussed-
onChangefunction that is called when the selected month changes. Will be called with { month: 1, year: 2018 } as the first param when no format is specified. Second param is always the triggering event.-
childrennode(s) which on click trigger the opening of the picker-
allowedYearseither an object in the format { before: 2019, after: 2016 } (also works with only one of after or before) or an array with the allowed years [2016, 2017, 2018]-
primaryColorthe primary color that is used#27718c
secondaryColorthe secondary color that is usedwhite
hoverColorthe color that is used for hovering over a month#d3d3d330

Author

baahrens ([email protected])

COMPEON

License

MIT

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc