CODEWITHSUNDEEP
jquerytwitter-bootstrapdatepicker
Akash
Akash

Reputation: 295

Bootstrap date picker display month name

I'm using Bootstrap date picker and I want to display the month in the date picker field. See below image.

enter image description here


I tried following code:

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

But it is no use. Any one can help me?

Edit: I want to display the month name (14 August 2014) in the text field instead of the date that are displayed now - 14/08/2014.

Upvotes: 4

Views: 20282

Answers (7)

nexttus
nexttus

Reputation: 96

This should work

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

Upvotes: 0

Akram
Akram

Reputation: 21

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

Upvotes: 2

Arzon Barua
Arzon Barua

Reputation: 514

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",
});

Upvotes: 3

Batsheva Hansav
Batsheva Hansav

Reputation: 316

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];
           });

Upvotes: 0

onegina alyona
onegina alyona

Reputation: 31

You can do

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

Upvotes: 2

ArthNRick
ArthNRick

Reputation: 935

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.

Upvotes: 0

Confused
Confused

Reputation: 1662

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;

Upvotes: -1

Related Questions