npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-single-calendar

v2.0.5

Published

## **Description:** **react-single-calendar** is a very useful and easy to use date picker, no external dependency is needed for this. You can chagne theme of it's color, by simply editing css variables.

Downloads

22

Readme

React Single Calendar

Description:

react-single-calendar is a very useful and easy to use date picker, no external dependency is needed for this. You can chagne theme of it's color, by simply editing css variables.

How to install?

npm i react-single-calendar

Implementation

import React, {useState} from 'react';
import SingleCalendar from 'react-single-calendar';


const App = () => {
    let [date, filterDate] = useState('');
    return (
        ....
        <SingleCalendar selectedDate={filterDate} />
    )
}
export default App;

In this date useState you will get the selectedDate, selectedDate is the props for SingleCalendar component. It will return this filterDate method, you can use your own method.

react-single-calendar returns a string value like March 21, 2019, if no formate has been provied. You can use Date.parse() method to convert it as a date.

react-single-calendar can be used with input field on, or off. If dateInput property is true, it will work as a form input field. If value is false you can open or close this component on a freedom of your own button click function

Getting Date Range

For getting date range, add a on for < SingleCalendar />, named as range={true}, by default range is false.

When using range, this filterDate method returns an array of to strings

Stateless or Functional Component

import React, {useState} from 'react';
import SingleCalendar from 'react-single-calendar';


const App = () => {
    let [date, filterDate] = useState('');
    return (
        ....
        <SingleCalendar selectedDate={filterDate} range={true} />
    )
}
export default App;

Class Component

import React from 'react';
import SingleCalendar from 'react-single-calendar';
class App extends React.Component {
  // let [nodes, setNodes] = useState(null);
  constructor(props) {
    super(props);
    this.state = {
      date: '21-09-2020',
      currentDate: "October 13, 2021"
    }
  }

  filterDate(date) {
    this.setState({
      date: date
    })
  }
  render() {
    return (
      <div>
        <SingleCalendar selectedDate={(date) => this.filterDate(date)} dateInput={true} />
      </div>
    )
  }
}

export default App;

In this example it the date variable will return:

Example: ['March 21, 2019', 'August 10, 2019']

Again you can use Date.parse() method, to gate a date value, or you can use this strings in your way.

Disable Future Dates

react-single-calendar has a feature to disable upcoming dates. For that you need to add upcoming as a prop and set the value to false. By default it is set to true.

<SingleCalendar selectedDate={filterDate} upcoming={false}/> 

You can use this feature with date range also, see the below code:

<SingleCalendar selectedDate={filterDate} range={true} upcoming={false}/>

Theming:

On your css/ scss add this variables. You can customize your theme color and width, height through this css variables.

:root {
  --weekend: rgba(0, 0, 0, 0);
  --date-light: #f8f9fa;
  --date-primary: #5644c1;
  --date-success: #37d37d;
  --date-primaryLight: #eceaf5;
  --date-primaryTitle: #dbd8f0;
  --date-hover: #262769;
  --date-highlight: #f83854;
  --date-disabled:#c2c1cc;
  --date-width: 260px;
  --date-height: 280px;

These fields are added, for the range:

  1. date-rangebg: is for highlighting dates between two selected dates
  2. date-rangetext: changing color of text in range area
  3. date-rangeDateBg: two main dates which will indicate "from" and "to" dates
  --date-rangebg:#8072d0;
  --date-rangetext:#f8f9fa;
  --date-rangeDateBg:#5644c1;
}

Options

| Properties | Type | Description | Values | | ------------- | ------------- | ------------- |------------- | | selectedDate | Function | Returns selected date or date range | | | format | String | Define the format of date, if not set it will return like Month day, year formate like "November 12, 1998", year will be always yyyy format and you can use your choice of seperator '-', '/' even 'a', 'b' also | dd-mm-yyyy, mm/dd/yyyy, yyyy|mm|dd| | currentDate | String | It need to be provided "month day, year" format, like "December 03, 2012" if not provided it will show date format on the input field | December 03, 2012| | max | String | If you want to put a limit, like user cannot entry after this date, then you will use it as a max date limit, To use max you need to provide format option and the format of this max should be same as the format option | dd-mm-yyyy, mm/dd/yyyy, yyyy|mm|dd| | min | String | If you want to put a limit, like user cannot entry beyond this date, then you will use it as a min date limit, To use min you need to provide format option and the format of this min should be same as the format option | dd-mm-yyyy, mm/dd/yyyy, yyyy|mm|dd| | icons | Object | You can change the default icon of this library, by providing svg or image files, import calendar from './assets/calendar.svg' | icons={{ 'calendar': calendarIcon, 'done': tickIcon, 'reset': resetIcon, 'previous': prevIcon, 'next': nextIcon }}| | upcoming | Boolean | By default its true, if set to false, means future dates will be hidden | true / false| | range | Boolean | If true, will use as a date reange selector, but max option will not be applicable here | true / false| | dateInput | Boolean | If true, calendar will have an input field, onFocus calendar will open, also calendar proerty from icon will have a small icon beside this input field | true / false| | cssClass | String | If dateInput is true this option will provide className to the input field, So if anyone using bootstrap and want to use form-control class, can provide from this option | form-control myClass| | cssClass | String | If This option will provide className to the input field, So if anyone using bootstrap and want to use form-control class, can provide from this option | form-control myClass| | placeHolder | String | This option will provide placeholder text to the input field | placeHolder={'Enter your DOB' }|


Raise an Issue

If you are facing any issue regarding installation and usage, raise your issue in Git repo.

https://github.com/devsubhajit/react-single-calendar/issues