- Selecionador de Tempo
🧬 Montar componentes
Selecionador de Tempo
ContributeO que é o Seletor de Tempo
Componente Time picker é um componente UI que permite aos usuários selecionar um tempo específico em uma interface de 24 horas normalmente usado em formulários ou interfaces de entrada de dados onde o usuário precisa especificar um horário específico.
Quando um componente Seletor de Tempo é adicionado à tela, ele exibe uma interface de 24 horas que mostra horas, minutos e segundos. O usuário pode ajustar o tempo movendo o cursor do mouse ou usando as setas para cima e para baixo.
Properties
Opções de tempo disponíveis. JavaScript pode ser escrito para ler ou alterar informações sobre componentes.
| propriedades | Descrição: |
|---|---|
| Valor padrão | O valor inicial do componente. Você pode alterar dinamicamente o valor inicial digitando JavaScript na {{}}. |
| Formato | Uma string de formato de data válida. Ver o diaJS. |
| Espaço reservado | O valor será exibido quando o campo de entrada estiver vazio. |
| Tamanho da etapa | o tamanho da etapa na unidade de minutos |
| Descrição | O nome do campo exibido ao usuário |
| Legenda | Uma legenda usada para descrever o campo em detalhes |
| Etiqueta oculta | Definir se deve exibir o rótulo |
| Posição | Definir a posição do rótulo relativo ao componente |
| Alinhamento | Definir o alinhamento (alinhar com a esquerda ou direita) da etiqueta |
| Width | Quando a etiqueta estiver no lado esquerdo do componente, defina a largura proporcional do rótulo. |
| Gerenciador de Eventos | Acionar consultas, componentes de controle ou chamar outras APIs em resposta a eventos de componentes. |
| Desabilitado | Controla o estado de se o componente está desabilitado. O componente não pode ser modificado ou focado quando está desabilitado. |
| Somente leitura | Controla o status de se o componente é somente leitura. Um componente somente leitura pode ser selecionado e focado mas não pode ser modificado. |
| Dica | Os usuários podem inserir a dica do componente aqui. A dica será exibida quando estiver focada. O formato Markdown é suportado. |
| Exibir botão Limpar | controle se um botão limpar é exibido no campo de entrada |
| Dica | O usuário pode inserir dica do componente aqui. A dica será exibida quando estiver focada. O formato Markdown é suportado. |
| Campo obrigatório | Válido somente quando o interruptor está ligado. |
| Regra personalizada | Cria a sua lógica de validação aqui. As regras devem ser feitas em JavaScript e cobertas pela {{}}. |
| Ocultar mensagem de validação | Você pode ocultar a mensagem de erro alterando o status oculto quando o valor de entrada está incorreto. Você pode alterar dinamicamente o status oculto por JavaScript. |
| Chave de Dados do Formulário | Especificar uma chave de um componente de formulários de embalagem ao construir o atributo de dados. |
| Hidden | Controle dinamicamente se o componente está oculto. Você pode alterar o status oculto através de um valor booleano dinâmico. |
| Cor do Tema | Permite aos usuários especificar a cor e a opacidade do fundo do botão |
Methods
Você pode usar outros componentes para controlar o componente. Apoiamos os seguintes quatro métodos:
- definirValor
Para definir o valor de tempo de entrada, por exemplo, {{“value1”}}
| propriedades | Descrição: |
|---|---|
| Valor | Input value |
- ValorDeLimite
Para limpar o valor do componente selecionado
- validate
Para verificar se a informação de entrada é legal
- validação
Para limpar a mensagem de validação
Manipulador de eventos
| Evento | Descrição: |
|---|---|
| Troca | Quando um usuário muda o valor de tempo selecionado, executar uma ação específica personalizada pelos usuários. |
Dado
O componente tem alguns dados comumente usados, que podem ser chamados via {{componentName.propertyName}} no aplicativo.
| Nome da propriedade | Descrição: |
|---|---|
| colorEsquema | a propriedade cor da Data |
| regra personalizada | a regra personalizada que o usuário especificou |
| desabilitado | um valor booleano indica o status de desabilitado |
| mostrarNome | o nome deste componente (iie button1) |
| Eventos | um valor matriz para sequência de eventos |
| formato | o formato de data e hora |
| formaChaveDeDados | a Chave de Dados de Formulário de Data |
| hidden | status oculto (verdadeiro ou falso) |
| hideValidationMessage | um valor booleano indica se a mensagem de validação está escondida |
| Etiqueta | valor de rótulo |
| Alinhar | Alinhamento da etiqueta de troca (esquerda ou direita) |
| posiçãoRótulo | posição do rótulo do interruptor (esquerda ou direita) |
| largura-rótulo | o inteiro que representa a largura da etiqueta. |
| nomeCheio | um valor booleano indica se a etiqueta está cheia. |
| Passo de minutos | tamanho da etapa de minuto |
| espaço reservado | valor do espaço reservado |
| Obrigatório | um valor booleano indica o status necessário de entrada. |
| mostrarLimpar | um valor booleano indica se a data será mostrada clara |
| dicaTexto | valor da dica de texto |
| Valor | Inserir valor de data e hora |
Exemplo: {{timePicker1.format}}
Usar caso
Em seguida, vamos demonstrar como mapear os dados da fonte de dados para o selecionador de tempo e definir a hora atual com um botão.
Passo 1 Adicionar uma ação
Vamos criar uma tabela na API REST chamada promoteCodes, incluindo 6 colunas: code, id, createdAt, expiredAt, startedAt, updatedAt. Usaremos a atualização No momento para uso de amostra.
Em seguida, podemos criar uma nova ação para REST API a partir da lista de ação, listando todos os dados em promoteCodes e nomeado restapi1.
Clique em Salvar e Executar para ativar esta ação.
Componentes adicionados à etapa 2
Em seguida, podemos adicionar um componente time picker e um componente button à tela. Para o valor padrão do componente de tempo, configuramos esse valor como o último tempo de atualização da primeira promoção do código a partir dos dados do api restante.
{{restapi1.data.promoteCodes[0].updatedAt}}Nós também rotulamos o botão como “Agora” como mostrado abaixo
Passo 3 Configure o componente
Para o componente button, podemos configurá-lo para definir a data no componente time picker para a data e hora atuais.
- No manipulador de Editar evento, selecione
componente de controleem ação, selecione o componentetime pickerque você deseja atualizar como o alvo do evento. - Escolha a ação
setValuee defina o valor como{{currentUserInfo.updatedAt}}
Teste de Passo 4
Agora que quando você clicar no botão “Agora”, a hora deve mudar para a hora atual. Quanto a isso, temos 20:03:05, mas pode ser diferente quando o testamos.
