@hudoro/date
v1.0.1-beta.11
Published
date component for Hudoro UI
Downloads
1,306
Readme
Hudoro date
Hudoro date is a strict and customizable date component for web development projects, designed for simplicity and adherence to strict design guidelines.
Screenshots
Package instalation
Instal package using pnpm
pnpm add @hudoro/date
Instal package using yarn
yarn add @hudoro/date
Instal package using npm
npm i @hudoro/date
Usage/Examples
import React from "react";
import {HudoroDate, IDateRange} from "@hudoro/date";
import ReactDOM from "react-dom/client";
import {useState} from "react";
const App = () => {
// NOTE! IF YOU WANT TO USE ONLY DATE ,THEN JUST PAST DATE,IN EXAMPLE BELLOW IS dateDays, BUT IF U WANT TO USE DATE RANGE THEN YOU SHOULD PAS DATE RANGE, IN EXAMPLE BLLEO IS dateRange OR PERHAPS YOU WILL GET ERROR,PLEASE FOLLOW THE INSTRUCTURE BELLOW
const [dateDays, setDateDays] = (useState < IDateRange) | (Date > new Date());
const [dateRange, setDateRange] =
(useState < IDateRange) |
(Date >
{
from: new Date(),
to: new Date(),
});
return (
<div
style={{
maxWidth: "300px",
margin: "100px auto",
}}
>
// DATE RANGE EXAMPLE
<HudoroDate
value={dateRange}
onChange={(e: IDateRange) => setDateRange(e)}
filter="days"
rangedDate
/>
// DATE
<HudoroDate
value={dateDays}
onChange={(e: DATE) => setDateRange(e)}
filter="days"
/>
</div>
);
};
Props
Props that you can pass to <ToastContainer {...props} />
| Prop Name | Value | required | | :--------- | :------------------------ | :------- | | value | Date | true | | onChange | (props: any) => void | true | | filter | 'days', 'months', 'years' | true | | input | boolean | false | | rangedDate | boolean | false |