Bootstrap datepicker - converting between internal and display values

0
votes

I'm using Bootstrap's Datepicker on an input element, and was wondering - Is there was a way to display the date in a different format from how I might set the date in or get the date from the input element? The date comes to me from my data source in the format yyyymmdd, but I'd like to display the date as mm/dd/yyyy in the input element. For example:

  • The date I'd like to initially seed the input element with is 20150721.
  • After setting that value, it's actually displayed as 07/21/2015.
  • The user changes it with the picker to 07/28/2015.
  • I get the value from the element as 20150728.

Is there a way to perform this format mapping using Bootstrap's datepicker? Thanks in advance!

2
javascripttwitter-bootstrapdatepicker
Hi, you can share your script on snippet ? - Mansukh Khandhar
https://jsfiddle.net/x4tLb0gr/ In this fiddle, the datepicker accepts a value in the format 'yyyymmdd' and also displays the date in the same format in the input element. I'd actually like it to display in a different format (mm/dd/yyyy), but be able to set/get the date to/from the element in the current format. Does that make sense? If one of the options was a secondary 'displayFormat', then it would be exactly what I need. - Steve

2 Answers

0
votes

As per the documentation, just set the format property.

 $('.datetimepicker').datetimepicker({
        format: 'mmd/dd/yyyy',
 })
0
votes

Maybe this is your solution:

var _date = '20150721';
$('#_date').datepicker({
    autoclose: true,
    clearBtn: true,
    format: 'mm/dd/yyyy'
});
$('#_date').datepicker('setDate', _date);
$('#_test').click(function () {
    alert($('#_date').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.js"></script>
<input id='_date'><button id='_test'>Test</button>