CODEWITHSUNDEEP
twitter-bootstrapdateeonasdan-datetimepicker
Андрій Грін
Андрій Грін

Reputation: 41

Bootstrap Datetimepicker plugin problems

Got some issues with my project. I am using as a part of it (https://github.com/Eonasdan/bootstrap-datetimepicker)

There is an option "format", in which you'll see date in your input.

I've tried to use 

format: 'DD MMMM YYYY'

but if enter something like "23/02/2016" or "15 10 2018" as a value to the input field and go submit, the input value changes to "23 January 0002" and "15 January 2018".

So, I need to get the date format in DD MMMM YYYY, and be able to enter numeric format of dates like:

Here is an example of my trouble: http://jsfiddle.net/AndGrin/0Ltv25o8/2549/

Upvotes: 0

Views: 352

Answers (1)

VincenzoC
VincenzoC

Reputation: 31482

You can use extraFormats option to allow multiple formats to be valid, as shown in the following example:

$('#datetimepicker1').datetimepicker({
    format: 'DD MMMM YYYY',
    extraFormats: [ 'DD MM YYYY', 'DD MM YY', 'DD MMMM YYYY' ]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions