Bootstrap date picker display month name

I hope you will get your desire output from the following code

$('#example1,#example2,#example3').datepicker({ format: "dd MM yyyy", }); 

but I would like to recommend you to use class rather using multiple IDs for multiple fields. For example suppose use class name example1 for all fields then the code will be something like this

$('.example1').datepicker({ format: "dd MM yyyy", }); 

You can do

$('#input_date').datepicker({ format: 'dd M yyyy' }); 

momentjs is responsible for formatting the date.

MM - 01 02 ... 11 12

MMM - Jan Feb ... Nov Dec

MMMM - January February ... November December

The following code format the month name in the text field

$('#example1, #example2, #example3').datepicker({ format: "dd MMMM yyyy" }); 

use dd/mm/yyyy (MM display month name, mm numeric)

format String. Default: “mm/dd/yyyy”

The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.

d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05. D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday. m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07. M, MM: Abbreviated and full month names, respectively. Eg, Jan, January yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.

I think that the only way is to implement the hide() event and change the text field:

months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; $('#datePickerID').datepicker() .on("hide", function(e) { var temp=e.delegateTarget.firstElementChild.value.split('/'); var selectedMonthName = months[parseInt(temp[1])-1]; e.delegateTarget.firstElementChild.value=temp[0]+' '+selectedMonthName+' '+temp[2]; }); 

This should work

 $('#example1').datetimepicker({format:'D-MMM-YYYY'}); 

Edit

Try separate initialization

$('#example1').datepicker({ format: "dd/MM/yyyy" }); $('#example2').datepicker({ format: "dd/MM/yyyy" }); $('#example3').datepicker({ format: "dd/MM/yyyy" }); 

OR

Give all of them a single class "example" then use

$('.example').datepicker({ format: "dd/MM/yyyy" }); 

Check documentation http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format;