Wie ändere ich das Datumsformat im Bootstrap Datepicker?

Question

Der Code für picker ist wie folgt:

$("#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); 
}); 

Das Format, das ich in Front-End zu bekommen ist:

01-Januar-2016

Jetzt brauche ich das Format wie:

Jan 2016

in der Datumsauswahl (Front-End) Kasten, während 2016.01.01 in dem Back-End. Wie kann ich das machen? Bitte hilf mir, Jungs.

Answer 1

Sie einfach Ihre picker (Frontend) Format format Option M yyyy statt dd-MM-yyyy Angabe ändern.

Dann können Sie moment verwenden, um Ihr Date in eine Zeichenfolge in dem Format zu konvertieren, das Sie benötigen, bevor Sie es an den Server senden. Hier gibt es ein Beispiel für das Konvertieren des Datums aus dem Datepicker in eine Zeichenfolge im Format DD-MMMM-YYYY mit moment parsing Funktion und Moment format Methode.

$("#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

Wenn Sie Ihr Datumsformat in ein beliebiges Format konvertieren möchten, verwenden Sie diese Bibliothek.

http://momentjs.com/