Date picker API · Needless UI

ಇಂಪೋರ್ಟ್

import-date-picker.ts

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

NuiDateField

ಭಾಗಗಳಾಗಿ ಟೈಪ್ ಮಾಡುವ ದಿನಾಂಕ, ಅಥವಾ ದಿನಾಂಕ ಮತ್ತು ಸಮಯ.

ಸೆಲೆಕ್ಟರ್: nui-date-field

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

ಭಾಗಗಳಾಗಿ ಟೈಪ್ ಮಾಡುವ ದಿನದ ಸಮಯ. ಡೇಟ್ ಫೀಲ್ಡ್‌ನ ಅದೇ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಸೆಲೆಕ್ಟರ್: nui-time-field

NuiTimeField: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`granularity`ಇನ್‌ಪುಟ್	`'hour' \| 'minute' \| 'second'`	`'minute'`	ಗಂಟೆ, ನಿಮಿಷ ಅಥವಾ ಸೆಕೆಂಡ್‌ನಲ್ಲಿ ನಿಲ್ಲುತ್ತದೆ.

NuiDatePicker

ಪಾಪ್‌ಓವರ್‌ನಲ್ಲಿ ಕ್ಯಾಲೆಂಡರ್ ಇರುವ ಡೇಟ್ ಫೀಲ್ಡ್. ಡೇಟ್ ಫೀಲ್ಡ್‌ನ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಮತ್ತು ಇವುಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಸೆಲೆಕ್ಟರ್: nui-date-picker

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-* ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಅನುಸರಿಸುತ್ತವೆ. ಕಸ್ಟಮೈಸೇಶನ್ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ನೋಡಿ.

NuiDateRangePicker

ಶ್ರೇಣಿ ಕ್ಯಾಲೆಂಡರ್ ಇರುವ ಎರಡು ಡೇಟ್ ಫೀಲ್ಡ್‌ಗಳು. ಡೇಟ್ ಪಿಕರ್‌ನ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಮತ್ತು ಇವುಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಸೆಲೆಕ್ಟರ್: nui-date-range-picker

NuiDateRangePicker: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`value`ದ್ವಿಮುಖ	`NuiDateRange \| null`	`null`	ಶ್ರೇಣಿ, ಅಥವಾ ಎರಡೂ ತುದಿಗಳು ಕ್ರಮವಾಗಿ ಹೊಂದುವವರೆಗೆ null.
`presets`ಇನ್‌ಪುಟ್	`NuiDateRangePreset[]`	`[]`	ಒಂದೇ ಕ್ಲಿಕ್‌ನಲ್ಲಿ ಆರಿಸಲು ಹೆಸರಿರುವ ಶ್ರೇಣಿಗಳು.
`months`ಇನ್‌ಪುಟ್	`number`	`2`	ಕ್ಯಾಲೆಂಡರ್‌ನಲ್ಲಿ ಅಕ್ಕಪಕ್ಕದ ತಿಂಗಳುಗಳು.

NuiDateRangePreset

ಹೆಸರಿರುವ ಶ್ರೇಣಿ: ಸ್ಥಿರವಾದದ್ದು, ಅಥವಾ ಆರಿಸಿದಾಗ ರಚನೆಯಾಗುವುದು.

NuiDateRangePreset: ಪ್ರಾಪರ್ಟಿಗಳು
ಹೆಸರು	ಪ್ರಕಾರ	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`label`ಪ್ರಾಪರ್ಟಿ	`string`		ಅದರ ಹೆಸರು.
`range`ಪ್ರಾಪರ್ಟಿ	`NuiDateRange \| (() => NuiDateRange)`		ಶ್ರೇಣಿ, ಅಥವಾ ಅದನ್ನು ರಚಿಸುವ ಫಂಕ್ಷನ್.