Nanoprogrammed Penultimate Musicianship

    TypeScript icon, indicating that this package has built-in type declarations

    2.17.1 • Public • Published

    📆 react-semantic-ui-datepickers

    Datepickers built with Semantic UI for React and Dayzed

    version MIT License All Contributors


    Semantic UI for React doesn't have a datepicker and the best solutions don't fit with its design. This library tries to solve this problem providing a component that can act as a basic or range datepicker.

    It supports most props of Form.Input and Dayzed components. Check the supported props section for more information.

    Table of Contents


    npm install --save react-semantic-ui-datepickers
    yarn add react-semantic-ui-datepickers

    This package also depends on react and semantic-ui-react. Please make sure you have them installed as well.


    import React, { useState } from 'react';
    import SemanticDatepicker from 'react-semantic-ui-datepickers';
    import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
    const AppWithBasic = () => {
      const [currentDate, setNewDate] = useState(null);
      const onChange = (event, data) => setNewDate(data.value);
      return <SemanticDatepicker onChange={onChange} />;
    const AppWithRangeAndInPortuguese = () => {
      const [currentRange, setNewRange] = useState([]);
      const onChange = (event, data) => setNewRange(data.value);
      return <SemanticDatepicker locale="pt-BR" onChange={onChange} type="range" />;

    More examples here.

    Supported Props

    Own Props

    property type required default description
    allowOnlyNumbers boolean no true Allows the user enter only numbers
    autoComplete string no -- Specifies if the input should have autocomplete enabled
    clearIcon SemanticICONS | React.ReactElement no 'close' An icon from semantic-ui-react or a custom component. The custom component will get two props: data-testid and onClick.
    clearOnSameDateClick boolean no true Controls whether the datepicker's state resets if the same date is selected in succession.
    clearable boolean no true Allows the user to clear the value
    datePickerOnly boolean no false Allows the date to be selected only via the date picker and disables the text input
    filterDate function no (date) => true Function that receives each date and returns a boolean to indicate whether it is enabled or not
    format string no 'YYYY-MM-DD' Specifies how to format the date using the date-fns' format
    formatOptions options no -- Specifies the options to format the date using the date-fns' format
    icon SemanticICONS | React.ReactElement no 'calendar' An icon from semantic-ui-react or a custom component. The custom component will get two props: data-testid and onClick.
    inline boolean no false Uses an inline variant, without the input and the features related to it, e.g. clearable datepicker
    keepOpenOnClear boolean no false Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked
    keepOpenOnSelect boolean no false Keeps the datepicker open when a date is selected
    locale string no 'en-US' Filename of the locale to be used. PS: Feel free to submit PR's with more locales!
    onBlur function no (event) => {} Callback fired when the input loses focus
    onFocus function no (event) => {} Callback fired when the input gets focused focus
    onChange function no (event, data) => {} Callback fired when the value changes
    pointing string no 'left' Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'
    showToday boolean no true Hides the "Today" button if false
    type string no basic Type of input to render. Available options: 'basic' and 'range'
    value Date|Date[] no -- The value of the datepicker

    Form.Input Props

    • autoComplete
    • className
    • disabled
    • error
    • iconPosition
    • id
    • inverted
    • label
    • loading
    • name
    • placeholder
    • size
    • transparent
    • readOnly

    Dayzed Props

    • date
    • maxDate
    • minDate
    • firstDayOfWeek
    • showOutsideDays
    • selected


    In order to customize the elements, you can override the styles of the classes below:

    • clndr-cell
    • clndr-cell-today
    • clndr-cell-inrange
    • clndr-cell-disabled
    • clndr-cell-selected
    • clndr-cell-other-month

    If you think this way of customizing is not a good idea, feel free to open an issue suggesting something else. This was the simplest solution I thought.


    • Add more tests (including e2e)

    Feel free to open issues and/or create PRs to improve other aspects of the library!


    Thanks goes to these wonderful people (emoji key):

    Arthur Denner

    💻 🎨 📖 💡 🤔

    Emerson Laurentino

    💻 🤔 📖 💡

    Lucas Borges

    💻 📖 💡



    Samin Yousefnia


    James J. Alavosus

    💻 💡 🤔

    Jakub Wietrzyk

    💻 🌍

    Ben Hancock




    Adam Grawender






    Colin Ramsay


    Gencer W. Genç




    Christian Moen


    Artawood Chitamitara



    💻 🐛

    Shin YeongJae


    Jørgen Vatle








    Daniel Huisman


    This project follows the all-contributors specification. Contributions of any kind welcome!




    npm i react-semantic-ui-datepickers

    DownloadsWeekly Downloads






    Unpacked Size

    360 kB

    Total Files


    Last publish


    • arthurdenner