Different format for preview and return (bootstrap-datepicker)

Navigation
3

I have the following calendar: 

Início do período:
<input type="text" id="calendarioIni" name="dataInicio">

$(document).ready(function() 
{
    var dataIni = document.querySelector("#calendarioIni");
    var dataFim = document.querySelector("#calendarioFim");

    function checaVazio(){
        var botao = $("#consultar");
        var display = dataIni.val() && dataFim.val() ? "inline" : "none";
        $(botao).css("display",display);
  }

    $('#calendarioIni').datepicker({
        startDate: '01/01/1998', 
        endDate: '31/12/1998', 
        onSelect: checaVazio
    });

    $('#calendarioFim').datepicker({
        startDate: '01/01/1998',
        endDate: '31/12/1998', 
        onSelect: checaVazio
    });


});

I would like for the user to appear in dd/mm/yyyy format but would return in yyyy/mm/dd or even yyyy-mm-dd format, how could I do this?

    
asked by anonymous 15.12.2017 / 18:56

5 answers

2

You can convert the date of each field to the yyyy-mm-dd direct format in PHP when it receives via $_POST using strtotime() . 

$dataIni = $_POST['dataInicio'];
$dataIni = str_replace('/','-',$dataIni);
$dataIni = date('Y-m-d', strtotime($dataIni));

$dataFim = $_POST['dataFim'];
$dataFim = str_replace('/','-',$dataFim);
$dataFim = date('Y-m-d', strtotime($dataFim));

Note that before converting you must convert the / to hyphens - because strtotime() does not work correctly with / . ( See documentation )

    
15.12.2017 / 20:48
0

Only use the format property 

$('input').datepicker({
  format: 'dd/mm/yyyy'
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<input type="text" class="form-control" value="02/10/2017">
    
15.12.2017 / 19:30
0

Try this on your form 

$("#formulario").submit( function() {
    var dateObject = $("#calendarioIni").datepicker("getDate");
    $("#calendarioIni").val(dateObject.getFullYear() + '-' + dateObject.getMonth() + '-' + dateObject.getDate());
});

Put the form id there in the selector.

In PHP you can do this: 

$originalDate = $_POST['dataInicio'];
$newDate = date("Y-m-d", strtotime($originalDate));

The originalDate puts the date field you receive from the form.

    
15.12.2017 / 19:30
0

It can be configured its way and call the changeDate event to redeem the chosen value and format the new output, a function can be used another screen component ai is the choice, for example: 

$(document).ready(function() {
  $('#calendarioIni').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '01/01/1998',
    endDate: '31/12/1998',
    language: 'pt-BR'
  }).on('changeDate', function(e) {
    $("#cid").val(e.date.toISOString().substring(0, 10));
    console.log($("#cid").val());
  });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<input type="text" id="calendarioIni" class="form-control" name="dataInicioCalendar">
<input type="hidden" id="cid" class="form-control" name="dataInicio">

In your case, what I did, create another field input type hidden and the value chosen in the first input will be formatted for this input , which can be redeemed by PHP and used in your query , example: 

<?php
    $dataNormal = $_POST['dataInicioCalendar']; // A DATA FORMATO BRAZIL
    $data = $_POST['dataInicio']; // A DATA AQUI É FORMATADA yyyy-MM-dd

Official Documentation >

    
15.12.2017 / 19:34
-1
$("#dateTo").datepicker({ 
    startDate: '01/01/1998', 
    endDate: '31/12/1998', 
    onSelect: checaVazio,
    onSelect:function(theDate) { 
        $("##dateTo").datepicker('option',{dateFormat: 'yyyy/mm/dd') 

          } 
      }) 
})

Do this for both codes

    
15.12.2017 / 19:32
User see the current version of Jquery and CSS without cache [duplicate] jQuery variable for URL