-1

Tenho um date picker assim

$('#datepicker2').on('change', function() {
			console.log('Submiting form');
			console.log(this.value);
			$('#form1').submit();
			
		}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />

<form action="" name="form1" id="form1" onsubmit="return false" method="POST">
<input type="date" id="datepicker2" name="datepicker2" value="<?php echo date('Y-m-d'); ?>">

</form>

E gostaria de saber como posso obter o valor do datepicker para fazer um select. Uso a função onchange pois não quero ter um botão para fazer o submit mas sim quando o utilizador muda a data do datepicker.

2
  • Não basta submeter o form (retirando o onsubmit return false) e manipular os dados no seu action? Commented 13/06/2019 às 12:36
  • Se tirar o onsubmit return false a página fica num loop infinito a dar refresh Commented 13/06/2019 às 12:56

1 Resposta 1

0

Você precisa ajustar 3 coisas em seu código:

  1. Configurar o datepicker para fazer o submit do form quando usuário selecionar uma data
  2. Setar o atributo readonly no input para evitar que o usuário digite datas inválidas
  3. Previnir o evento de submit do form com event.preventDefault() para não dar refresh na página e enviar os dados via ajax

$("#datepicker2").datepicker({
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
    nextText: 'Próximo',
    prevText: 'Anterior',

    /**
     * @See http://api.jqueryui.com/datepicker/#option-onSelect
     */
    onSelect: function (dateText) {
      console.log(dateText);
      // usar o this aqui dentro faz referência ao campo
      //console.log($(this));
      $(this).parents('form').submit();
    }
});

$('#form1').on('submit', function (e) {
    e.preventDefault();
    var $this = $(this);
    var data = $this.serialize();
    var url = $this.attr('action');
    
    // debug
    console.log(data);
    
    $.post(url, data, function (response) {
       // debug
      console.log(response);
      alert('sucesso');  
    })
    .fail(function () {
      alert('Erro no ajax');
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- <input type="date" id="datepicker2" name="datepicker2" value="<?php echo date('Y-m-d'); ?>"> -->
<form action="ajax.php" name="form1" id="form1" method="POST">
  <input type="text" id="datepicker2" name="datepicker2" value="13/06/2019" readonly>
</form>

Arquivo ajax.php

<?php 
/**
 * A data virá no formato que o datepicker enviar
 * Nesse caso d/m/Y, Mysql trabalha no formato Y-m-d
 */
$data = $_POST['datepicker2'];

/**
 * Transforma a data para Y-m-d
 * Você poderia fazer isso com a classe DateTime também
 */
$data = join('-', array_reverse(explode('/', $data)));


/**
 * TO DO 
 * - Connectar no banco
 * - Preparar a query
 * - Obter o resultado da query
 * - Retornar o resultado para o ajax 
 */
echo 'Data recebdida e já transformada no formado do mysql'. $data;

Referências

Sugestões de leitura

12
  • Até aqui tudo certo, porém como é que eu posso usar a variável $data para inserir na base de dados? diz-me que o index não existe. Commented 13/06/2019 às 13:48
  • Atualiza sua pergunta e inclui a query que você está utilizando para inserir na base de dados para podermos te ajudar Commented 13/06/2019 às 13:49
  • A minha query é esta ``` $query = "SELECT sum(dinheiro) as dinheiro, nome FROM gastos g, subcategorias s where s.codsubcategoria=g.codsubcategoria AND dataa='".$_POST['data']."' AND utilizador='".$_SESSION['email']."' group by s.codsubcategoria"; ``` Eu preciso de usar a variável na mesma página ou seja a inserção está na mesma página "dashboard.php" Commented 13/06/2019 às 13:53
  • Se você estiver usando o exemplo do php que postei acima, trocar $_POST['data'] para $data pode te ajudar. O nome da coluna usada na query é dataa mesmo (com 2 a) ou seria data. Commented 13/06/2019 às 13:56
  • Sim também já tentei com $data e diz que a variável não existe. Sim o nome da coluna é dataa na base de dados Commented 13/06/2019 às 13:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .