{"id":14779,"date":"2023-12-04T17:56:58","date_gmt":"2023-12-04T20:56:58","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=14779"},"modified":"2023-12-05T13:40:33","modified_gmt":"2023-12-05T16:40:33","slug":"plugin-de-data-para-formularios-do-bootstrap","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=14779","title":{"rendered":"Plugin de Data para Formul\u00e1rios do Bootstrap"},"content":{"rendered":"\n

Nesse post iremos ver um plugin data para formul\u00e1rios do Bootstrap e, ao clicarmos no campo data, aparecer\u00e1 um calend\u00e1rio para selecionar a data.<\/p>\n\n\n

\n
\"Plugin
Plugin de Data para Formul\u00e1rios do Bootstrap<\/figcaption><\/figure><\/div>\n\n\n

Links CDN<\/h2>\n\n\n\n

N\u00e3o sabe o que \u00e9 um link CDN? Clique aqui para saber.<\/a><\/p>\n\n\n\n

Mas, resumindo, <\/p>\n\n\n\n

\n

,\u00a0CDN<\/strong>\u00a0significa\u00a0Content Delivery Network<\/strong>\u00a0e s\u00e3o servidores localizados em algum local seguro que cont\u00e9m c\u00f3pias de conte\u00fado est\u00e1tico (como imagens, arquivos CSS e JavaScript) de um site.<\/p>\n\n\n\n

Temos duas op\u00e7\u00f5es quando queremos adicionar um framework dentro de nosso site:<\/p>\n\n\n\n

    \n
  1. baixar o arquivo do framework e enviar para nosso site<\/li>\n\n\n\n
  2. apenas inserir um link do framework disponibilizado por um servidor CDN.<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n

    Bom, vamos usar links CDNs ao inv\u00e9s de baixar os pacotes do framework para nosso computador. Isso porque, para usarmos o Bootstrap e seus plugins, temos que inserir seus respectivos links: <\/p>\n\n\n\n

    insera, dentro da tag <head><\/strong>, os links<\/p>\n\n\n\n

    \n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"\/\/code.jquery.com\/jquery.js"<\/font>><\/<\/font>script<\/font>><\/font>\n  <\/font><<\/font>link<\/font> <\/font>href<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n\n<\/pre>\n\n\n\n
    E os links do nosso calend\u00e1rio:<\/p>\n\n\n\n
    \n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"<\/font>\nhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap-datepicker@1.10.0\/dist\/js\/bootstrap-datepicker.min.js<\/font>\n"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<<\/font>link<\/font> <\/font>href<\/font>=<\/font>"<\/font>\nhttps:\/\/cdn.jsdelivr.net\/npm\/bootstrap-datepicker@1.10.0\/dist\/css\/bootstrap-datepicker3.min.css<\/font>\n"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n\n<\/pre>\n\n\n\n
    Agora, antes da tag de fechamento <\/body>, insira esse outro link:<\/p>\n\n\n\n
    \n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Plugin Bootstrap-Datepicker<\/h2>\n\n\n\n
    Eu usarei o plugin chamado Bootstrap-Datepicker<\/strong> para fazer aparecer aparecer um pequeno calend\u00e1rio ao clicarmos no campo da data. <\/p>\n\n\n\n
    O plug-in \u00e9 apenas um seletor de datas para formul\u00e1rios. Existem v\u00e1rias op\u00e7\u00f5es de seletores de data, mas Bootstrap-Datepicker \u00e9 uma das bibliotecas mais populares e completas dispon\u00edveis. <\/p>\n\n\n\n
    O plugin do seletor de data Bootstrap-Datepicker<\/strong> est\u00e1 dispon\u00edvel no CD<\/a>N Jsdeliv<\/a> ou voc\u00ea pode baix\u00e1-lo no Github<\/a>.<\/p>\n\n\n\n
    Criando um Formul\u00e1rio de Exemplo e Iniciando o Plugin<\/h2>\n\n\n\n
    Agora, precisamos criar um formul\u00e1rio para testarmos o plugin. <\/p>\n\n\n\n
    Esse \u00e9 o formul\u00e1rio que estarei criando \u00e9 bem simples, cont\u00e9m apenas o campo de data e o bot\u00e3o para enviar, mas ele j\u00e1 ir\u00e1 fazer o calend\u00e1rio aparecer ao clicarmos, isso \u00e9 devido \u00e0 op\u00e7\u00e3o data-provide=”datepicker”<\/strong> no input<\/p>\n\n\n\n
    \n\n<<\/font>form<\/font>><\/font>\n    <<\/font>input<\/font> <\/font>type<\/font>=<\/font>"text"<\/font> data-provide=<\/font>"datepicker"<\/font>  <\/font>class<\/font>=<\/font>"form-text"<\/font>><\/font>\n    <<\/font>button<\/font> <\/font>type<\/font>=<\/font>"submit"<\/font> <\/font>class<\/font>=<\/font>"btn btn-primary btn-sm"<\/font>><\/font>Enviar<\/<\/font>button<\/font>><\/font>\n    <\/<\/font>form<\/font>><\/font>  <\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    J\u00e1 sobre as classes de bot\u00f5es(btn btn-primary<\/strong> btn-sm<\/strong>) poder\u00e1 ver mais detalhes aqui: Classes para Bot\u00f5es no Bootstrap<\/a><\/p>\n\n\n\n
    Alterando o formato da data do plugin datepicker – de mm\/dd\/yyyy para dd\/mm\/yyyy<\/h2>\n\n\n\n
    Se voc\u00ea pegar o valor do calend\u00e1rio acima, ver\u00e1 que a data estar\u00e1 com o dia e m\u00eas invertidos, no formato americano, para colocarmos no formato correto, podemos usar data-date-format=”dd\/mm<\/strong>\/yyyy”<\/strong> dentro do input. <\/p>\n\n\n\n
        \n\n<<\/font>form<\/font> <\/font>action<\/font>=<\/font>"index.php"<\/font> <\/font>method<\/font>=<\/font>"post"<\/font>><\/font>\n    <<\/font>input<\/font> <\/font>type<\/font>=<\/font>"text"<\/font> <\/font>name<\/font>=<\/font>"data"<\/font>  <\/font>data<\/font>-provide=<\/font>"datepicker-inline"<\/font> <\/font>data<\/font>-date-format=<\/font>"dd\/mm\/yyyy"<\/font>  <\/font>class<\/font>=<\/font>"form-text"<\/font>><\/font>\n    <<\/font>button<\/font> <\/font>type<\/font>=<\/font>"submit"<\/font> <\/font>class<\/font>=<\/font>"btn btn-primary btn-sm"<\/font>><\/font>Enviar<\/<\/font>button<\/font>><\/font>\n    <\/<\/font>form<\/font>><\/font>\n\n<\/pre>\n\n\n\n
    Pronto, com isso voc\u00ea obter\u00e1 a data no formato correto brasileiro.<\/p>\n\n\n\n
    Veja que incrementei um pouco nosso formul\u00e1rio, coloquei para os valores serem enviados para a pr\u00f3pria p\u00e1gina atrav\u00e9s de action=”index.php”<\/strong>, usando o m\u00e9todo post com method=”post”<\/strong><\/p>\n\n\n\n
    Tamb\u00e9m usei PHP para pegar o resultado:<\/p>\n\n\n\n
    <?php<\/font>\n echo<\/font> $<\/font>_POST<\/font>[<\/font>'data'<\/font>]<\/font>;\n?><\/font><\/pre>\n\n\n\n
    Muitas op\u00e7\u00f5es podem ser passadas dentro do input ou atrav\u00e9s de script:<\/p>\n\n\n\n
    $('.datepicker').datepicker({\n    format: 'dd\/mm\/yyyy',\n    startDate: '-3d'\n});<\/code><\/pre>\n\n\n\n
    Op\u00e7\u00f5es do datepicker<\/h2>\n\n\n\n
    Vimos acima que a maioria das op\u00e7\u00f5es pode ser fornecida por meio de atributos de dados, como em ata-date-format=”dd\/mm\/yyyy”<\/strong> que colocamos dentro do input. <\/p>\n\n\n\n
    \n
    Uma op\u00e7\u00e3o pode ser convertida em um atributo de dados tomando seu nome, substituindo cada letra mai\u00fascula por seu equivalente min\u00fasculo precedido por um travess\u00e3o e acrescentando \u201cdata-data-\u201d ao resultado.<\/p>\n<\/blockquote>\n\n\n\n
    Exemplo,<\/p>\n\n\n\n