javascript - Bootstrap Datepicker re-initialize date format - Stack Overflow

admin管理员组

文章数量:1202597

I have Bootstrap datepicker with default format mm/dd/yyyy, and I have select where I can change format from mm/dd/yyyy to dd/mm/yyyy and reverse.

On select change I want to my datepicker change format.

I tried

find('#options-date_format').on('change', function(){
    $("#picker").datepicker({format: formatDate})
});

but It's not working, and I can't find way of doing this. Also tried to remove / destroy datepicker but I got javascript error.

I have Bootstrap datepicker with default format mm/dd/yyyy, and I have select where I can change format from mm/dd/yyyy to dd/mm/yyyy and reverse.

On select change I want to my datepicker change format.

I tried

find('#options-date_format').on('change', function(){
    $("#picker").datepicker({format: formatDate})
});

but It's not working, and I can't find way of doing this. Also tried to remove / destroy datepicker but I got javascript error.

• javascript
• jquery
• date
• datepicker
• twitter-bootstrap-3

Share Improve this question Follow edited Sep 23, 2020 at 0:30 johnnyRose 7,4901717 gold badges4242 silver badges6161 bronze badges asked Jan 31, 2014 at 11:34 DjomlaDjomla 61622 gold badges77 silver badges1818 bronze badges 3

• didn't try it but sounds logical: destroy and reinitialize. – slash197 Commented Jan 31, 2014 at 11:36
• Can you see any errors in the console? – ppoliani Commented Jan 31, 2014 at 11:50
• Seems I'm using old version, so I don't have remove function. – Djomla Commented Jan 31, 2014 at 12:09

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

I think the below approach is working,

1, Whenever changing the format, de-attach and then re-attach back to the element.

$("#dp3").datepicker();  // initialization
$('select').on('change', function () {
    var d = $('select option:selected').text();
    if (d == 2) {
        $("#dp3").datepicker('remove'); //detach
        $("#dp3").datepicker({          //re attach
            format: "dd/mm/yyyy"
        })
    } else {
        $("#dp3").datepicker('remove'); //detach
        $("#dp3").datepicker({          //re attach
            format: "mm/dd/yyyy"
        })
    }
});

JSFiddle

Ok I resolve this extending bootstra-datepicker.js

setFormat: function(format) {
    this.format = DPGlobal.parseFormat(format);
}

And call that function

find('#options-date_format').on('change', function(){
    $("#picker").datepicker('setFormat', newFormat);
});

When you have many date pickers, the you can use a class selector and reset all of them, and initialize using the class. Code sample below. In the example, all the input elements will have the class date-picker

function resetDatePickers(){
    $('.date-picker').each(function(index){
       $(this).datepicker('remove');
    });

    $('.date-picker').datepicker({
        format: "dd/mm/yyyy",
        startView: 2,
        orientation: "top auto"
    });
}


resetDatePickers();

本文标签： javascriptBootstrap Datepicker reinitialize date formatStack Overflow