CODEWITHSUNDEEP
bootstrap-datepicker
user3429660
user3429660

Reputation: 2732

bootstrap-datepicker sends wrong date format

The date tag in HTML5 (<input type="date">) always sends data in YYYY-MM-DD format, disregarding what format users might be using. That's great, but browser's default controls are usually ugly.

So, I'm trying to use bootstrap-datepicker to help users choosing dates. I launch it like this, and it opens correctly:

$('#expirationDate').datepicker({
     format: "dd.mm.yyyy"
});

Unfortunately, bootstrap-datepicker seems to send to the server the chosen date in user's format (ie. DD/MM/YYYY). This is obviously a problem, since users might have different preferences.

Is bootstrap-datepicker capable of sending data in "YYYY-MM-DD" format, disregarding user's local format? To me, that's "common-sense" functionality, but I didn't find any documentation about it.

If the answer to above question is "no", can you please recommend another date picker that integrates well with Symfony 3 and Twig?

Upvotes: 1

Views: 7477

Answers (2)

user3429660
user3429660

Reputation: 2732

It seems that it is not possible without javascript or php processing. That's pretty sad, as this is a really common situation.

My solution was to use JQuery UI instead of bootstrap-datepicker. I created two fields:

  • a hidden field that stores the date in YYYY-MM-DD and whose value is processed in backend
  • a visible field that is used by DatePicker but it is not processed by backend.

On the second field, I used altField and altFormat to populate the first field:

$(function () {
    $("#theDateUI").datepicker({
            dateFormat: "dd.mm.yy",
            altField: $("#theDate"),
            altFormat: "yy-mm-dd"
    });
});

Upvotes: 0

R&#239;sh&#239;K&#234;sh K&#252;mar
R&#239;sh&#239;K&#234;sh K&#252;mar

Reputation: 5092

In PHP

mysql database needs date format in Y-m-d format so in case to insert this date format in the database you will need to change the date format that comes from datepicker.

Example:

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


$("#Date").datepicker({
    autoclose:true,
    orientation: "bottom",
    format: "dd-mm-yyyy"
})


$("#Date2").datepicker({
    autoclose:true,
    orientation: "bottom",
    format: "yyyy-mm-dd"
})

$("#Date3").datepicker({
    autoclose:true,
    orientation: "bottom",
    format: "yyyy-M-dd"
})

$("#Date4").datepicker({
    autoclose:true,
    orientation: "bottom",
    format: "dd-M-yyyy"
})


$("#Date5").datepicker({
    autoclose:true,
    orientation: "bottom",
    format: "dd/M/yyyy"
})

$("#Date6").datepicker({
    autoclose:true,
    orientation: "bottom",
    format: "yyyy/M/dd"
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

1) dd-mm-yyyy : <input type="text" id="Date" placeholder="01-12-2016" />
<br><br>

2) yyyy-mm-dd : <input type="text" id="Date2" placeholder="2016-12-01" />
<br><br>
3) yyyy-M-dd : <input type="text" id="Date3" placeholder="2016-Dec-01" />
<br><br>
4) dd-M-yyyy : <input type="text" id="Date4" placeholder="01-Dec-2016" />
<br><br>
5) dd/M/yyyy : <input type="text" id="Date5" placeholder="01/Dec/2016" />
<br><br>
6) yyyy/M/dd : <input type="text" id="Date6" placeholder="2016/Dec/01" />

Upvotes: 0

Related Questions