Different format for display and return (bootstrap-datepicker)

Question

Different format for display and return (bootstrap-datepicker)

Asked 6 years, 10 months ago

Viewed 545 times

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 the format dd/mm/yyyy but returned in format yyyy/mm/dd or even yyyy-mm-dd, how could perform this procedure?

See if dateFormat: "dd/mm/yyyy" helps you

– Zorkind

2017/12/15 at 17:58
but the return is the same way @Zorkind

– V.Avancini

2017/12/15 at 17:58
In onSelect: Function(selectedDate) {} you can format the return.

– Zorkind

2017/12/15 at 18:02
@Zorkind could you exemplify for me? or send me some link with this explained? I’m new in the field

– V.Avancini

2017/12/15 at 18:03
I think I understand what you want, when the form is posted you want the value to go in the yyyy-mm-dd format right? you can take the event of Submit and edit the value of the input before sending, understood?

– Zorkind

2017/12/15 at 18:11
is exactly that @Zorkind , but I don’t know how to do that you said

– V.Avancini

2017/12/15 at 18:12
is the bootstrap-datepicker? or what is the plugin?

– novic

2017/12/15 at 18:16
@Zorkind, take a look here <?php if(isset($_POST['dataInicio']) && isset($_POST['dataFim']) { $dataIni = $_POST['dataInicio']; $dataFim = $_POST['dataFim']; $cod_orgao = $_POST['District']; $cod_drive = $_POST['County']; } ? > vc meant before sending me to trade?

– V.Avancini

2017/12/15 at 18:17
1

@Virgilionovic boostrap even

– V.Avancini

2017/12/15 at 18:17
in javascript, that.

– Zorkind

2017/12/15 at 18:22
@V.Avancini do you want this answer via server? or in JAVASCRIPT? where do you want to use the final formatting?

– novic

2017/12/15 at 18:56
"Return" you mean, send to the server?

– Sam

2017/12/15 at 19:08
is the following, this date is used in a select SQL, I receive via html Post and stored in a variable in php, and I query via php passing the filled variable, understood?

– V.Avancini

2017/12/15 at 19:09
But warning you here, it worked out what you did, but I need checaVazio for the user not send without the dates and make a wrong query

– V.Avancini

2017/12/15 at 19:10
My answer gives you exactly what you want, in the form Submit, but you can do it in PHP too.

– Zorkind

2017/12/15 at 19:10
All right. What was not clear to me, is: the guy selects the date, blz, appears in the field in the format dd/mm/yyyy... then you want to send this value to the server in the format yyyyyy/mm/dd in any variable that you use?

– Sam

2017/12/15 at 19:12
@I use the date in a Select SQL and the date in the DBMS is in the format yyyy/mm/dd, so to do this I save the date value in a php variable and use it in the query I do, took?

– V.Avancini

2017/12/15 at 19:22
I could understand no. So would the problem be php instead of JS? Sorry, your question is not clear. Vc posted a JS code and at the end it says "I would like for the user to appear in the format dd/mm/yyyy but to return in the format yyyy/mm/dd or even yyyy-mm-dd, as I could perform this procedure?".... It would be better to reformulate the question explaining exactly what you want, where the information comes from, where you go, how you want etc... I’ve read it 20 times and I couldn’t understand it

– Sam

2017/12/15 at 19:28
is the following, I have the date field, I am using the bootstrap-datepicker to display the calendar, for the user to select the date, when he clicks on a date the field is filled, and I would like in the field the format is dd/mm/yyyy (Brazilian date standard)but with this date I do an SQL query, where my DBMS handles the date with the default yyyy/mm/dd, so I would like to save in a variable in this format to be able to perform my Select, now it was?

– V.Avancini

2017/12/15 at 19:33
1

Now it’s better. I’m going to post an answer and see if that’s it.

– Sam

2017/12/15 at 19:38

Show 15 more comments

5 answers

2

You can convert the date of each field to the format yyyy-mm-dd direct in PHP when receiving 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 the conversion you need to convert the bars / hyphenated - because the strtotime() does not work properly with /. (See documentation)

to test I did as follows: <?php if(isset($_POST['dataInicio']) && isset($_POST['dataFim']) { $dataIni = $_POST['dataInicio']; $dataFim = $_POST['dataFim']; $cod_orgao = $_POST['District']; $cod_unit = $_POST['County']; echo $dataIni." <br>";//Test to check the value in the variables echo $dataFim." <br>"; echo $cod_orgao." <br>"; echo $cod_unidade." <br>"; } ? > and date out on dd/mm/yyyy

– V.Avancini

2017/12/15 at 19:57
@V.Avancini Instead of sending the date that is in the input, you have to send the one that is in the variable that was created

– Sam

2017/12/15 at 20:01
@V.Avancini To make it easier, it would not be better to create 2 hidden inputs, 1 for each date, then you send these inputs to PHP

– Sam

2017/12/15 at 20:03
@V.Avancini I updated the answer.

– Sam

2017/12/15 at 20:10
the deal is that the time matters, in the comic book everything is recorded as 00:00:00, then depending on the time the person makes the query will go wrong... my Where is the following: WHERE finempe.data_empenho between Convert(datetime, $dataIni) and Convert(datetime, $dataFim) and finempe.codigo_orgao = 01 and finempe.codigo_unidade = 01

– V.Avancini

2017/12/18 at 14:13
@V.Avancini You want the date + the current time?

– Sam

2017/12/18 at 14:15
no, I want regardless of the time the user makes the query return all 0

– V.Avancini

2017/12/18 at 14:15
@V.Avancini So in PHP you include the time, for example.: $dataIni = $_POST['dataInicio_h'].' 00:00:00';

– Sam

2017/12/18 at 14:22
@dvd , did not work and worse, now does not fill the variable date, tested giving an echo inside the if, look there: <?php if(isset($_POST['dataInicio_h']) && isset($_POST['dataFim_h'])) {
 $dataIni = $_POST['dataInicio_h'];
 $dataFim = $_POST['dataFim_h'];
 $cod_orgao = $_POST['Distrito'];
 $cod_unidade = $_POST['Concelho'];
 echo $dataIncio_h;
 echo $dataIni." <br>";//Test to check the value in the variables echo $dataFim." <br>"; echo $cod_orgao." <br>"; echo $cod_unit." <br>"; } ?>

– V.Avancini

2017/12/18 at 15:26
@V.Avancini The fields Hidden vc should put next to the fields of datepicker. There is no way this goes wrong. They are sent in the POST normally.

– Sam

2017/12/18 at 15:32
Like this: Beginning of the period: <input type="text" id="calendarioIni" name="dataInicio"> End of period: <input type="text" id="calendarioFim" name="dataFim"> <input type="Hidden" id="calendarioIni_h" name="dataInicio_h"> <input type="Hidden" id="calendarioFim_h" name="dataFim_h">

– V.Avancini

2017/12/18 at 15:34
Let’s go continue this discussion in chat.

– Sam

2017/12/18 at 15:36

Show 7 more comments

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.

by PauloHDSousa • **3,509** points · Answer 1 · 2017-12-15T18:30:32+00:00

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>
<script src="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">

by Zorkind • **361** points · Answer 2 · 2017-12-15T18:30:45+00:00

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 the PHP it is possible to do this way:

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

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

Can you explain the reason for the negative please?

– Zorkind

2017/12/15 at 18:40
I wasn’t the one who said no, pal

– V.Avancini

2017/12/15 at 19:11
No problem, just want to meet your need and for now none of the other answers do what you want.

– Zorkind

2017/12/15 at 19:12
the one that did what I wanted the guy deleted... I didn’t understand the pq... I use the date in a Select SQL and the date in SGBD is in the format yyyy/mm/dd, so to do this I save the value of the date in a variable php and use it in the query I do

– V.Avancini

2017/12/15 at 19:23
Yes I understood, this code will change the value of your input before sending the value to the server. But I think you can convert directly in SQL or even in PHP does not need to be in javascript.

– Zorkind

2017/12/15 at 19:24
understood, but it is a disadvantage to do in JS?

– V.Avancini

2017/12/15 at 19:26
Not necessarily, but the safest thing is to do it in PHP.

– Zorkind

2017/12/15 at 19:32
understood, but how to do this in PHP, treating as string?

– V.Avancini

2017/12/15 at 19:33
I put it there in the answer

– Zorkind

2017/12/15 at 19:36
could use the same variable to do this?

– V.Avancini

2017/12/15 at 19:37
I edited, something like that.

– Zorkind

2017/12/15 at 19:38
PHP is not very my strong kkkkk

– Zorkind

2017/12/15 at 19:40
i thought of something like: $dataIni = date("Y-m-d", strtotime($dataIni)); it would work?

– V.Avancini

2017/12/15 at 19:40
I think so, but from what I see in the PHP documentation this strtotime is more for English format, see if it works well and such.

– Zorkind

2017/12/15 at 19:41
I tested it here and gave it right, buddy!

– V.Avancini

2017/12/15 at 19:42
That good, I’m happy :-)

– Zorkind

2017/12/15 at 19:42

Show 11 more comments

by novic • **35,673** points · Answer 3 · 2017-12-15T18:34:48+00:00

Can be set your way and call the event changeDate To rescue the chosen value and format the new output, can be used a function another screen component ai gets the choice, 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>
<script src="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>
<script src="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 in particular what I did, create another field input type hidden and the value chosen in the first input will formatted for this input, which can be rescued 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

_{Reference: Documentación Oficial}

by Marcos Brinner • **1,282** points · Answer 4 · 2017-12-15T18:32:14+00:00

-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 the two codes

should have the comma there after checaVazio?

– V.Avancini

2017/12/15 at 18:33
yes you have, n had seen

– Marcos Brinner

2017/12/15 at 18:34
try to remove the checavazio, and put inside the Onselect Function

– Marcos Brinner

2017/12/15 at 18:35
but I can’t remove checaVazio, it’s an error treatment

– V.Avancini

2017/12/15 at 18:43