How to change the date format in bootstrap Datepic

Question

The code for datepicker is as follows:

$("#startDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "dd-MM-yyyy"
}).on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
    $('.to').datepicker('setStartDate', startDate);
});
$("#endDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "dd-MM-yyyy"
}).on('changeDate', function(selected){
    FromEndDate = new Date(selected.date.valueOf());
    FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
    $('.from').datepicker('setEndDate', FromEndDate);
});

The format which I get in front-end is:

01-January-2016

Now I need the format as:

Jan 2016

in the datepicker (front-end) box, whereas 01-01-2016 in the back-end. How can I do this? Please help me out guys.

Answer 1

You can simply change your datepicker (front end) format using format option specifying M yyyy instead of dd-MM-yyyy.

Then you can use moment to convert your Date to a string using the format you need before sendind it to server. Here there is an example of converting date got from the datepicker to a string in the format DD-MMMM-YYYY using moment parsing function and moment format method.

$("#startDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "M yyyy"
}).on('changeDate', function(selected){
    startDate = new Date(selected.date.valueOf());
    startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
    $('.to').datepicker('setStartDate', startDate);
});
$("#endDate").datepicker({
    autoclose:true,
    startView:"months",
    minViewMode:"months",
    orientation: "bottom",
    format: "M yyyy"
}).on('changeDate', function(selected){
    FromEndDate = new Date(selected.date.valueOf());
    FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
    $('.from').datepicker('setEndDate', FromEndDate);
});

$('#btnSend').click(function(){
    // Getting date from the picker
    var startDate = $("#startDate").datepicker('getDate');
    var endDate = $("#endDate").datepicker('getDate');
    // Convert date to string in the given format
    var startDateServer = moment(startDate).format('DD-MMMM-YYYY');
    var endDateServer = moment(endDate).format('DD-MMMM-YYYY');
    // You can send startDateServer and endDateServer string to the server
    console.log(startDateServer, endDateServer);
});

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

<input type="text" id="startDate" />
<input type="text" id="endDate" />
<button id="btnSend" class="btn btn-primary">Send</button>

Answer 2

if you want to convert your date format any format use this library .

http://momentjs.com/