mark-tate / use-date-input

A React library (including useDateInput/useDateRange hooks) to help compose a Date Picker/Calendar around your components

use-date-input

This project is a React library to help compose your own date picker and calendar UI components.

From simple to advanced, you can build your own date picker component in minutes.

The key features of this projects

• Lightweight - Optimized bundle size
• Control - built with React hooks and the reducer pattern, the API gives you full control of the component's state
• Themeable - built as a naked UI component, use the simple theming API to style
• Date Frameworks - can be used with the date framework of your choice
  Either use the ready-made adapters (dayjs, date-fns, luxon, moment) or write your own adapter
• Composable - can be used with any UI Framework
  Compose with your own UI components, to create date inputs, date dialogs or calendars with shortcut lists
• Accessible - designed and tested for A11y, with full keyboard and screen-reader support
• Localisation - customize region and labels
• Documentation - fully documented with editable examples

To get up and running quickly, refer to the getting started guide.

For the full documentation, refer to the documentation.

Pay It Forward

This project was built to give something back to the OpenSource community.

Please raise a PR for this project or be inspired to create (or contribute) to another Open Source project.

Building this component took alot of effort, so to show your appreciation, please let me know how you are using it, where you
are using it and what themes you create.

All feedback appreciated, message me on Linked-In.

Credits

When I started out, I wanted to create the Downshift of DatePickers.
So a special mention to Kent, who inspired the journey.

Documentation site built with docz

use-date-input's Issues

Project Maintened ?

This project are maintened ?

TypeScript Support

Add TypeScript typings or convert repo to TypeScript

Background color & AnitmatedGroup

Hi 👋🏻

use-date-input/packages/core/src/AnimatedGroup/style.js

Lines 45 to 50 in de568c8

	theme &&
	theme.calendarOverrides &&
	theme.calendarOverrides.Root &&
	theme.calendarOverrides.Root.background
	? theme.calendarOverrides.Root.background
	: "white"

I believe there is an issue here, if you override the Root theme by passing a backgroundColor instead of a background it does not get overridden and stay white which forces to override multiple other components to remove margins & apply the Root BackgroundColor again.

This is somewhat problematic in cases where you don't have full control on the CSS generated.

In the specific case that brought me to trip on this, I was using twin.macro to make use of Tailwind styles.

tw`bg-gray-800`
// {
//  --tw-bg-opacity: "1"
//  backgroundColor: "rgba(31, 41, 55, var(--tw-bg-opacity))"
// }

Is there a particular reason for this background not to be transparent ?
Best

Error: require() of ES Module

Getting this error when trying to import:

Error: require() of ES Module [rootpath]/node_modules/@babel/runtime/helpers/esm/construct.js from [rootpath]/node_modules/@use-date-input/date-fns-adapter/dist/index.js not supported.
Instead change the require of construct.js in [rootpath]/node_modules/@use-date-input/date-fns-adapter/dist/index.js to a dynamic import() which is available in all CommonJS modules.

Here's what I'm trying to import

import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
import { Calendar, Day } from '@use-date-input/core';

The project is a pretty basic nextjs setup. Can't tell if it's my webpack and/or babel configuration or something I'm missing about how to interact with this package. Any help would be much appreciated! Thanks.

package.json if it's helpful:

{
  "private": true,
  "scripts": {
    "dev": "doppler run -- next",
    "build": "next build",
    "build:local": "doppler run -- next build",
    "start": "next start",
    "start:local": "doppler run -- next start",
    "prepare": "husky install",
    "test:unit": "jest --config=jest.config.js",
    "test:unit:watch": "jest --config=jest.config.js --watchAll",
    "test:feature": "wdio wdio.conf.js --cucumberOpts.tagExpression",
    "test:feature:watch": "wdio wdio.conf.js --watch --cucumberOpts.tagExpression",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@apollo/client": "3.1.1",
    "@use-date-input/core": "^0.2.1-beta.0",
    "@use-date-input/date-fns-adapter": "^0.2.0-beta.0",
    "babel-plugin-styled-components": "^2.0.2",
    "classnames": "^2.3.1",
    "date-fns": "^2.28.0",
    "deepmerge": "^4.2.2",
    "graphql": "^15.3.0",
    "gsap": "^3.9.1",
    "lodash": "^4.17.21",
    "next": "latest",
    "prop-types": "^15.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/eslint-parser": "^7.16.3",
    "@storybook/addon-actions": "^6.4.14",
    "@storybook/addon-essentials": "^6.4.14",
    "@storybook/addon-links": "^6.4.14",
    "@storybook/react": "^6.4.14",
    "@wdio/cli": "^7.16.13",
    "@wdio/cucumber-framework": "^7.16.13",
    "@wdio/local-runner": "^7.16.13",
    "@wdio/selenium-standalone-service": "^7.16.13",
    "@wdio/spec-reporter": "^7.16.13",
    "autoprefixer": "^10.4.0",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^8.4.1",
    "eslint-config-airbnb": "^19.0.2",
    "eslint-config-next": "^12.0.7",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-storybook": "^0.5.6",
    "husky": "^7.0.4",
    "jest": "^27.5.1",
    "jest-circus": "^27.5.1",
    "lint-staged": "^12.1.2",
    "prettier": "^2.5.1",
    "webpack": "^4.46.0"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "eslint --cache --fix"
    ]
  }
}

Default Font on Docz Site not defined

Default fonts on the docz site are not defined so it uses Times New Roman

https://mark-tate.github.io/use-date-input/

ACCEPTANCE CRITERIA

Suggest we use the Roboto default font and see how it looks

Adding calendar events

Is there any option to add and display calendar events?

How to use theme for hooks ?

Hi,

Great package ! I love the integration with dayjs library

But I'm having problems on activating styles for Calendar component when using hooks. It is not working.

const calendarTheme = {
  Root: {
    borderRadius: '20px',
  },
  Day: {
    fontSize: '20px',
    padding: '20px',
  },
};

    <>
      <input className="input" {...getInputProps({ onChange: handleInputChange })} value={date} />
      <CalendarProvider
        {...getCalendarProviderProps({
          adapter: dateAdapter,
          onCalendarChange: handleCalendarChange,
        })}
      >
        <Popper {...getPopperProps({ placement: 'bottom-start' })}>
          <Box>
            <Calendar theme={calendarTheme} />
          </Box>
        </Popper>
      </CalendarProvider>
    </>

In the docs you stated

If using input components with the useDateInput/useDateRangeInput hooks, then simply style the elements yourself, before composing with Calendar.

How to achieve this? Can you give a sample .. thanks

Calendar Date buttons are not accessible using Keyboard navigation

While navigating if events are linked with calendar, then it is not accessible via "Enter" key.
We tried with "initialEnableKeyboardNavigation" but still not working.

Component used: https://mark-tate.github.io/use-date-input/calendarProvider

Is there any way to make it accessible via "Enter" key??