sbmdkl / nepali-datepicker-reactjs

20 stars 16 forks source link

Types of the date picker #10

Open Parasbuda opened 2 years ago

Parasbuda commented 2 years ago

Currently there is no types defined in this date picker. Can you define the types .

samundra commented 1 year ago

@Parasbuda Here is basic types that we can use.

Create a .d.ts file in your src/types folder. Create types folder if it doesn't exist already. Inside types folder create a file named nepali-datepicker-reactjs.d.ts then copy and paste below code as file content. The name of file doesn't matte, only extension of .d.ts matters.

// filename: src/types/nepali-datepicker-reactjs.d.ts

declare module '@sbmdkl/nepali-datepicker-reactjs' {
  interface onChangeValue {
    bsDate: string
    adDate: string
  }

  interface Props {
    onChange: (value: onChangeValue) => void
    className?: string
    language: 'NE' | 'EN' | 'ENGLISH'
    theme: 'default' | 'red' | 'blue' | 'green' | 'dark' | 'deepdark'
    dateFormat?: string
    style?: React.CSSProperties
    minDate?: string
    maxDate?: string
    defaultDate?: string
    hideDefaultValue?: boolean
    placeholder?: string
  }

  export default class Calendar extends React.Component<Props> {}
}

Example of import

// import calendar
import NepaliCalendar, { onChangeValue } from '@sbmdkl/nepali-datepicker-reactjs'
import '@sbmdkl/nepali-datepicker-reactjs/dist/index.css'

Usage

<NepaliCalendar
  onChange={(value: onChangeValue) => {
    console.log(value);
  }}
  theme="blue"
  language="EN"
/>