날짜 선택기 API · Needless UI

가져오기

import-date-picker.ts

import {
  NuiDateField,
  NuiDatePicker,
  NuiDateRangePicker,
  NuiTimeField,
} from '@needless-ui/angular/date-picker';

세그먼트별로 입력하는 날짜, 또는 날짜와 시간입니다.

NuiDateField: 속성
이름	타입	기본값	설명
`value`양방향	`NuiDate \| NuiDateTime \| null`	`null`	값. 모든 세그먼트가 채워질 때까지는 null입니다.
`granularity`입력	`'day' \| 'hour' \| 'minute' \| 'second'`	`'day'`	일에서 멈출지, 시, 분, 초까지 이어 갈지 정합니다.
`min, max`입력	`string \| null`		가장 이른 값과 가장 늦은 값. 범위를 벗어나면 필드가 유효하지 않습니다.
`placeholder`입력	`string \| null`	`now`	빈 세그먼트에서 화살표 키를 누를 때 시작하는 값.
`hourCycle`입력	`12 \| 24`		12시간제 또는 24시간제. 기본값은 로케일을 따릅니다.
`minuteStep`입력	`number`	`1`	화살표 키로 분을 움직이는 간격.
`disabled, readonly`입력	`boolean`	`false`	값을 바꿀 수 없게 합니다.
`locale`입력	`string`	`LOCALE_ID`	순서, 구분 기호, 숫자, 시간제를 정하는 로케일.
`labels`입력	`Partial<NuiDateFieldLabels>`		필드가 읽어 주는 모든 텍스트. 번역할 때 사용합니다.
`invalid`속성	`Signal<boolean>`		값이 `min`과 `max` 범위를 벗어났는지 여부.
`focus`메서드	`() => void`		첫 번째 빈 세그먼트에 포커스를 줍니다.

세그먼트별로 입력하는 시각입니다. 날짜 필드와 같은 입력을 받습니다.

NuiTimeField: 속성
이름	타입	기본값	설명
`granularity`입력	`'hour' \| 'minute' \| 'second'`	`'minute'`	시, 분, 초 중 어디에서 멈출지 정합니다.

팝오버 캘린더가 달린 날짜 필드입니다. 날짜 필드의 입력과 함께 다음 입력을 받습니다.

NuiDatePicker: 속성
이름	타입	설명
`unavailable`입력	`(date: NuiDate) => boolean`	캘린더에서 선택할 수 없는 날짜.
`firstDay, weekNumbers`입력	`1 … 7, boolean`	캘린더에 전달됩니다.
`labels`입력	`Partial<NuiDatePickerLabels>`	필드, 버튼, 캘린더의 텍스트.
`corners`입력	`NuiCorners`	모서리 모양: `round`, `squircle`, `bevel`, `scoop`, `notch`, `square` 중 하나.
`radius`입력	`NuiRadius`	모서리 크기: `none`, `small`, `medium`, `large`, `full` 중 하나.
`density`입력	`NuiDensity`	차지하는 공간: `compact`, `regular`, `roomy` 중 하나.
`show`메서드	`() => void`	캘린더를 엽니다.

설정하지 않은 커스터마이징 입력은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

기간 캘린더가 달린 날짜 필드 두 개입니다. 날짜 선택기의 입력과 함께 다음 입력을 받습니다.

이름이 붙은 기간입니다. 고정된 기간이거나, 선택할 때 만들어지는 기간입니다.

NuiDateRangePreset: 속성
이름	타입	기본값	설명
`label`속성	`string`		기간의 이름.
`range`속성	`NuiDateRange \| (() => NuiDateRange)`		기간, 또는 기간을 만드는 함수.