dayzed

Primitives to build simple, flexible, WAI-ARIA compliant React date-picker
components.

[![version][version-badge]][package] [![MIT License][license-badge]][license]
![All Contributors](#contributors)

[![Supports React and Preact][react-badge]][react]
[![size][size-badge]][unpkg-dist] [![gzip size][gzip-badge]][unpkg-dist]
[![module formats: umd, cjs, and es][module-formats-badge]][unpkg-dist]

The problem

You need a date-picker in your application that is accessible, can fit a number
of use cases (single date, multi date, range), and has styling and layout that
can be easily extended.

This solution

This is a component that focuses on controlling user interactions so you can
focus on creating beautiful, accessible, and useful date-pickers. It uses a
custom [Hook][react-hooks] or a [render function as
children][render-function-as-children]. This means you are responsible for
rendering everything, but props are provided by the Hook or render function,
through a pattern called [prop getters][prop-getters], which can be used to help
enhance what you are rendering.

This differs from other solutions which render things for their use case and
then expose many options to allow for extensibility resulting in a bigger API
that is less flexible as well as making the implementation more complicated and
harder to contribute to.

- Installation
- Usage
- Props
- date
- maxDate
- minDate
- monthsToDisplay
- firstDayOfWeek
- showOutsideDays
- selected
- onDateSelected
- render
- offset
- onOffsetChanged
- Control Props
- Custom Hook
- Render Prop Function
- prop getters
- state
- Inspiration and Thanks!
- Other Solutions
- Contributors
- LICENSE

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's dependencies:

``npm install --save dayzed`

Or, you can install this module through the [yarn][yarn] package manager.

`yarn add dayzed`

> This package also depends on react@>=16.8.0 and prop-types. Please make > sure you have those installed as well.

> Note also this library supports preact@>=10out of the box. If you are using >preact then use the corresponding module in the preact/distfolder. You > can evenimport Dayzed from 'dayzed/preact'or >import { useDayzed } from 'dayzed/preact'

`Usage`

`jsx import React from 'react'; import Dayzed, { useDayzed } from 'dayzed';

const monthNamesShort = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; const weekdayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

function Calendar({ calendars, getBackProps, getForwardProps, getDateProps }) { if (calendars.length) { return (


        
          
          
        

        {calendars.map(calendar => (
                      key={

${calendar.month}${calendar.year}

}
            style={{
              display: 'inline-block',
              width: '50%',
              padding: '0 10px 30px',
              boxSizing: 'border-box'
            }}
          >
            
              {monthNamesShort[calendar.month]} {calendar.year}
            

            {weekdayNamesShort.map(weekday => (
                              key={

${calendar.month}${calendar.year}${weekday}

}
                style={{
                  display: 'inline-block',
                  width: 'calc(100% / 7)',
                  border: 'none',
                  background: 'transparent'
                }}
              >
                {weekday}


            ))}
            {calendar.weeks.map((week, weekIndex) =>
              week.map((dateObj, index) => {
                let key =

${calendar.month}${calendar.year}${weekIndex}${index}

;
                if (!dateObj) {
                  return (
                                          key={key}
                      style={{
                        display: 'inline-block',
                        width: 'calc(100% / 7)',
                        border: 'none',
                        background: 'transparent'
                      }}
                    />
                  );
                }
                let { date, selected, selectable, today } = dateObj;
                let background = today ? 'cornflowerblue' : '';
                background = selected ? 'purple' : background;
                background = !selectable ? 'teal' : background;
                return (
                                      style={{
                      display: 'inline-block',
                      width: 'calc(100% / 7)',
                      border: 'none',
                      background
                    }}
                    key={key}
                    {...getDateProps({ dateObj })}
                  >
                    {selectable ? date.getDate() : 'X'}
                  
                );
              })
            )}

dayzed

dayzed

The problem

This solution

Table of Contents

Installation

`Usage`

`Props`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Control Props`

`Custom Hook`

Render Prop Function

`$3`

`$3`

Inspiration and Thanks!

Other Solutions

Contributors

LICENSE

Dist Tags