- Encontro
🧬 Montar componentes
Encontro
ContributeO que é data?
O componente de Data é um componente que permite aos usuários selecionar uma data de uma interface de calendário. O componente de Data é normalmente usado em formulários ou interfaces de entrada de dados onde o usuário precisa selecionar uma data específica.
Quando um componente de Data é adicionado à tela, ele exibe uma interface de calendário por padrão. O usuário pode navegar pelo calendário clicando nas setas anteriores ou próximas para se mover para outro mês. ou clicando em uma data específica para selecioná-la. A data selecionada será exibida no campo de entrada.
Properties
Propriedades disponíveis da data. 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. |
| Data máxima | defina a data máxima que um usuário pode selecionar na interface do calendário. |
| Data max. | especifique a data mais recente que o usuário pode selecionar na interface do calendário. |
| 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 |
| 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 da data 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 da data selecionada, 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 |
| formato | o formato da data |
| desabilitado | um valor booleano indica o status de desabilitado |
| mostrarNome | o nome deste componente (iie button1) |
| 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. |
| maxDate | o valor da data máxima |
| minDate | o valor da data mínima |
| espaço reservado | valor do espaço reservado |
| somenteLeitura | um valor booleano indica o status somente pronto de entrada. |
| 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 | Input value |
Exemplo: {{date1.value}}
Usar caso
Em seguida, vamos demonstrar como mapear os dados da fonte de dados até a data e definir a data 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 date e um componente button à tela. Para o valor padrão do componente de data, configuramos esse valor como a última atualização do primeiro código promocional a partir dos dados do api restante.
{{restapi1.data.promoteCodes[0].updatedAt}}Nós também rotulamos o botão como “Hoje” como mostrado abaixo
Passo 3 Configure o componente
Para o componente button, podemos configurá-lo para definir a data no componente date para a data de hoje.
- No manipulador de Editar evento, selecione
componente de controleem ação, selecione o componentedateque 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 você clica no botão “hoje”, a hora deve mudar para a data de hoje. Quanto a este aspecto, temos 2023-5-6, mas pode ser diferente quando o testamos.
