Receive the value of a datepicker

Question

I have a Picker date like this

$('#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>

And I’d like to know how I can get the datepicker value to make a select. I use the onchange function because I don’t want to have a button to do Submit but when the user changes the datepicker date.

Answer 1

You need to adjust 3 things in your code:

1. Configure datepicker to perform form Submit when user selects a date
2. Set the attribute readonly in the input to prevent the user from entering invalid dates
3. Prevent form Ubmit event with event.preventDefault() not to refresh the page and send the data 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>

ajax.php file

<?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;

References

• jQuery datepicker onSelect
• jQuery $.post
• jQuery serialize()
• jQuery Event.preventDefault()
• W3C readonly doc

Reading suggestions

• Forms without Ubmit button are bad for usability
• PHP PDO doc
• PHP functions json_*