shankytiwari / react-month-picker-dropdown

📅 This is a slim library for month picker as dropdown menu for React Project

react-month-picker-dropdown

Month picker as dropdown menu for React Projects

Why react-month-picker-dropdown?

The main goal of this package is to deliver a slim and Skinny Month picker as dropdown menu for React Projects, that can fit into any kind of projects with no muss, no fuss. This menu is completely customizable, in fact, you write your own theme as you like.

Demo

Check the Month picker in action, click here.

Install

You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.

NPM

npm install --save react-month-picker-dropdown

YARN

yarn add --save react-month-picker-dropdown

Usage

import React from 'react'

import {
  MonthPickerDropdown
} from 'react-month-picker-dropdown'
import 'react-month-picker-dropdown/dist/index.css'

import './green-theme.scss';

const App = () => {

  const handleAMonthChange = (event) => {
    console.log(event)
  }

  const getMarkUpForOkButton = () => {
    return (
      <button className='button'> Select Me</button>
    )
  }

  const getMarkUpForCancelButton = () => {
    return (
      <button className='button'> Cancel Me</button>
    )
  }

  return (
    <div className="dropdown-demo">
      <MonthPickerDropdown
        CTabIndex={3}
        label="Select Months"
        searchTextLabel="Filter the months by typing here"
        startYear={2018}
        startMonth={1}
        endYear={2020}
        endMonth={5}
        displayShortMonthName={true}
        displayShortYearName={false}
        hideCheckBox={true}
        displayOkAndCancelButton={true}
        markUpForOkButton={getMarkUpForOkButton}
        markUpForCancelButton={getMarkUpForCancelButton}
        onChange={handleAMonthChange}
      />
    </div>
  );
}

export default App

Props

Prop	Type	Default	Description
CTabIndex	number	1	To give the tab index
label	string	Select Months	This will is display the Month Picker label as Select Months.
startYear	number	Current Year	Here you can specify the Start year, from where Month dropdown will start.
startMonth	number	January	Here you can specify the Start Month.
endYear	number	Current Year	Here you can specify the End year, from where Month dropdown will end.
endMonth	number	December	Here you can specify the End Month.
displayShortMonthName	boolean	false	This option will allow you to set how Months should be display on screen for example, Jan or January.
displayShortYearName	boolean	false	This option will allow you to set how Years should be display on screen for example, 20 or 2020.
hideCheckBox	boolean	false	With the help of this option you hide the checkboxes shown in the list.
displayOkAndCancelButton	boolean	false	With this You can show the Submit and Cancel button in the end of the list of months.
markUpForOkButton, markUpForCancelButton	function	func	These two props will expect the function which should return the JSX. This is useful if you want to display custom Submit or Cancel button.
onChange	function	func	Callback function will invoked on select event. Params are startYear, startMonth, endYear & endMonth.

---

Creating your own theme

.month-picker-dropdown .select-months {
    border: solid 0.5px #022424;
    background-color: #00a699;
    color: #fff;
}

.month-picker-dropdown .select-picker {
    border-bottom: solid 0.5px #022424;
    border-left: solid 0.5px #022424;
    border-right: solid 0.5px #022424;
}

.month-picker-dropdown .select-picker .select-picker-options .options .option-title {
    text-align: center;
}

.month-picker-dropdown .select-picker .select-picker-options .selected-month-background-color {
    background: #00a699;
    color: #fff;
}

.month-picker-dropdown .select-picker .select-picker-options .hovered-month-background-color {
    background-color: #66e2da;
    color: #fff;
}

Thanks

This Project is build using create-react-library.

License

MIT © ShankyTiwari