Componente DateTime para Zeedhi
Instalação | Uso Básico | Propriedades |
O component zd-date-time é um componente onde é possivel definer uma data e hora.
Instalação
Para instalar o pacote basta rodar o seguinte comando:
npm i @zeedhi/zd-date-time
Com isso, dois pacotes serão instalados: o @zeedhi/zd-date-time-common e o @zeedhi/zd-date-time-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-date-time dentro de seu arquivo de configuração zeedhi.ts
import { ZdDateTime } from '@zeedhi/zd-date-time';
Vue.component('ZdDateTime', ZdDateTime);
Ou instale os pacotes separadamente:
npm install @zeedhi/zd-date-time-vue @zeedhi/zd-date-time-common
Uso Básico
Para usar, defina a propriedade component como 'ZdDateTime'.
{
"name": "date-time-example",
"component": "ZdDateTime",
"label": "Date Time Picker"
}
Propriedades
| Nome | Tipo | Default | Descrição |
|---|---|---|---|
| allowedDates | ((date: string) => boolean) | string[] | undefined | undefined | Restringe quais datas podem ser selecionadas |
| ampmInTitle | boolean | true | Coloque a chave AM/PM no título, não perto do relógio |
| dateFormat | string | MM-DD-YYYY | Define o formato da data |
| dateInputFormat | string | undefined | undefined | Define o formato de digitação da data. Este formato deve ser um formato simples, que use apenas números |
| displayDateFormat | string | Config.displayFormat | Define o formato da data exibida |
| displayTimeFormat | string | Config.displayTimeFormat || 'HH:mm:ss' | Define o formato da hora exibida |
| events | ITextEvents | [] | Defines text input events |
| firstDayOfWeek | string | number | 0 | Define o primeiro dia da semana, começando com 0 para o Domingo |
| locale | string | undefined | Define a localidade. Aceita uma string no formato de idioma BCP 47 |
| maxTime | string | '' | Tempo máximo permitido |
| minTime | string | '' | Tempo mínimo permitido |
| showDateTimePicker | boolean | false | Mostra o date time picker |
| showWeek | boolean | false | Alterna a visibilidade dos números da semana no corpo do calendário |
| timeFormat | string | Config.valueTimeFormat || 'HH:mm' || 'HH:mm:ss' | Define o formato da propriedade value |
| timeInputFormat | string | undefined | undefined | Define o formato de digitação da data. Este formato deve ser um formato simples, que use apenas números |
| timePickerFormat | string | Config.timeFormat || 'ampm' | Define o formato de um horário exibido no seletor. As opções disponíveis são ampm e 24hr |
| useSeconds | boolean | false | Alterna o uso de segundos no seletor |
| value | string | Date | null | Valor do ZdDateTime o seu formato é definido pelo dateFormat mais o timeFormat |