How to change date-picker defined by CSS on input control

Question

I have a date-picker control that is being added using CSS on an input control that is added dynamically at run time. The HTML looks like so:

<input name="date1" class="date-picker input-medium" type="text" value="2018-10-18" data-date-format="yyyy-mm-dd">

I want to change the formatting on this date-picker control but I'm having trouble figuring out how to do so. This Javascript below runs after the HTML is generated:

    $('.date-picker').datepicker({
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    calendarWeeks:true,
    clearBtn: true,
    });

I was hoping code like above would change it, I threw in a few non-default options just to verify that it changes but it just looks like the default version.

Any idea how I go about changing the formatting on the date picker on my input control? I'm OK if it changes all date pickers on the page or if its just specific to this one date picker and I can apply it to all date pickers (in the event there are multiples, which could happen).

Maybe I'm confusing this with my javascript, as there seem to be jquery date pickers and boot strap date pickers and its not clear to me if they're actually both the same date pickers or not, so maybe I need to do something different.

Answer 1

It's not the ideal solution, but I changed the JavaScript in bootstrap-datapicker.js so it sets language from a variable I set with the current site culture in the constructor. I could do the same for formatting (I actually really just wanted to change the language but for the first post figured it was easier to just ask about changing formatting).

options.language = cultureName;

Also to note, while someone (not me!) had put in the code I pasted above to change date-picker values, that's how to change values with the jquery UI datepicker but the CSS class is actually applying the bootstrap datepicker.