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)`		ਰੇਂਜ, ਜਾਂ ਉਸ ਨੂੰ ਬਣਾਉਣ ਵਾਲਾ ਫ਼ੰਕਸ਼ਨ।