Bootstrap datetimepicker isn't showing calendar (or won't format the date correctly)

Question

Currently, my issue is that the calendar isn't showing (tells me the datetimepicker function isn't properly initialized on the controls).

Note that the implementation shown here is based on a different implementation elsewhere on the site which does work.

<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>

I've stripped out all the scripts like datatables and knockout as I believe they're superfluous and the list of scripts used is quite extensive. Full [redacted to remove client information] markup for the page can be found here.

The form is simple, just inputs with .datetimepicker class on them:

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label col-sm-5">Start Date</label>
            <div class="col-sm-7 input-group">
                <input type="text" class="form-control datetimepicker" id="StartDate" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar "></span>
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-5">End Date</label>
            <div class="col-sm-7 input-group">
                <input type="text" class="form-control datetimepicker" id="EndDate" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar "></span>
                </span>
            </div>
        </div>
    </div>
</div>

Right now when I click on either of these inputs they just give me autocomplete options for values which I've entered in the past.

Used to be with things like this you'd initialize the javascript with something like this at the bottom of the page:

$(document).ready(function () {
    $("#StartDate").datetimepicker();
    $("#EndDate").datetimepicker();
});

This, however, doesn't appear to be necessary in this case as the page on which these datetimepickers work doesn't do it.

If I do initialize the controls this way, the calendar shows, but whether I use the locale option or the format option as indicated in this SO Answer, it never gives the dates the correct format that I need which is yyyy/mm/dd.

Ideally, I want to be able to see the calendar pop-out and have it display dates on the input with the correct format. If anyone can indicate possibly what I'm doing wrong I'd greatly appreciate it.

Here's a fiddle: https://jsfiddle.net/h3809a7r/

Calendar pops out after adding in the `document.ready` script I mentioned but no change in the date format. Still using `mm/dd/yyyy` erroneously — Ortund, Oct 07 '19 at 12:40
@kevinSpaceyIsKeyserSöze are you really trying to tell me that the problem I've spent 12+ hours bashing my head against is because I didn't specify a format as if that wasn't the FIRST thing I tried and discarded because it made no difference to my case? — Ortund, Oct 08 '19 at 08:01

score 0 · Answer 1 · edited Oct 07 '19 at 13:34

0

Can you please try this

$("#StartDate").datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    showClose: true,
    showClear: true
});

edited Oct 07 '19 at 13:34

kevinSpaceyIsKeyserSöze

3,693
2
16
25

answered Oct 07 '19 at 12:39

Chand Jogani

146
12

No difference but thanks for answering. Since you're new on the community, I'd like to suggest you please check out [how to answer](https://stackoverflow.com/help/how-to-answer) if you'd like to improve it. Answers should explain why the suggested solution works and how it fixes the problem. – Ortund Oct 07 '19 at 12:53

score 0 · Answer 2 · answered Oct 07 '19 at 12:54

I just imported these libraries and its working now

Javascript:

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js

CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css

JsFiddle Link with your code

There might be an issue with jquery 3.3.1 this link will help you about it https://stackoverflow.com/questions/50627275/how-to-set-date-picker-with-jquery-3-3-1-and-bootstrap-3-3-7 — Balmohan, Oct 07 '19 at 13:00

Bootstrap datetimepicker isn't showing calendar (or won't format the date correctly)

2 Answers2