Problem with bootstrap datetimepicker

Question

1.00/5 (2 votes)

See more:

Problem 1:
Screenshot 1[^]

Screenshot 2[^]

Any ideas what might be causing it?

Problem 2:

I'm also having issues with datetimepicker not working at modal windows at all.

Screenshot Modal Console[^]

Thanks in advance!

What I have tried:

Since it's MVC project, I've included CSS file in head of _Layout.
Added Moment.js and Datetimepicker.js to section Scripts.

I'm using Bootstrap 3.3.7 and Bootstrap Datetimepicker CSS 4.17.45

UPDATE:
Figured out that jQuery requirements for fullcalendar and datetimepicker were colliding.
FullCalendar works on 1.7.2, while DateTimePicker on 3.2.1

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Datetime and calendar test</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap-responsive.min.css" />


    <link href="~/css/fullcalendar.css" rel="stylesheet" />

</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class='col-sm-6'>

                @Html.TextBox("Test", "", new { @class = "form-control", id = "datetimepicker4", type = "text" })

            </div>
        </div>
    </div>
    <div id="fullcalendar"></div>




    <script src="~/Scripts/jquery-1.7.2.js"></script>
    <script>var $Original = jQuery.noConflict(true);</script>
    <script src="~/Scripts/jquery-3.2.1.js"></script>
    <script>
        var $New = jQuery.noConflict(true);
        $ = $Original;
        jQuery = $Original;
        $.New = $New;
    </script>

    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/js/fullcalendar.min.js"></script>

    <script type="text/javascript">
        $.New(document).ready(function () {
            $.New('#datetimepicker4').datetimepicker();
        });
    </script>
    <script>
        $(document).ready(function () {

            $('#fullcalendar').fullCalendar({
                theme: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listMonth'
                },
                navLinks: true, // can click day/week names to navigate views
                editable: false,
                eventLimit: false, // allow "more" link when too many events

                selectable: false,
                eventClick: function (event, jsEvent, view) {
                    $('#modalTitle').html(event.title);
                    $('#modalBody').html(event.description);
                    $('#modalUrl').html(event.url2);
                    $('#modalUrl').attr('href', event.url2);
                    $('#modal-info-event').modal();
                    document.getElementById("eventId").value = event.Id;
                    //$('#eventId').val() = event.Id.val();
                    console.log(document.getElementById("eventId"));
                },
                selectHelper: false,
                select: function (start, end) {
                    var title = prompt('Event Title:');
                    var eventData;
                    if (title) {
                        eventData = {
                            title: title,
                            start: start,
                            end: end
                        };
                        $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                    }
                    $('#calendar').fullCalendar('unselect');
                },
                events: {
                    url: "/Dashboard/GetEvents"

                }
            });

        });
    </script>

</body>

</html>

Googled a bit and found out jQuery versions can be sepparated. However I'm getting this error.
Error[^]

Maybe I'm doing something wrong?

Posted 27-Jun-17 22:25pm

Faris Karcic

Updated 29-Jun-17 1:26am

v5

Add a Solution

Comments

Zubair SE 29-Jun-17 4:02am

Hi Friend, i have implemented bootstrap datetimepicker , but added only the three bootstrap.css,jquery_*.js, and bootstrap.js files and it is achieved.
If you have added any separate Datetimepicker.js to achieve it,first remove this and try again. Please share your piece of code, if there is failure.

Faris Karcic 29-Jun-17 5:54am

Wait do you mean you havent used datetimepicker library at all?
And btw I have figured out what the problem is.
It's cause there's fullcalendar on that page too so jquery is colliding, cause fullcalendar uses 1.7.2 jquery but datetime wont work on that version.

However still nagging to find a solution.

Zubair SE 29-Jun-17 6:48am

yes

Faris Karcic 29-Jun-17 7:06am

Well how did you initialize it?

Zubair SE 29-Jun-17 7:08am

you are needed to share your piece of code please.
Html and the client side script, thanks

Faris Karcic 29-Jun-17 7:27am

Updated

Zubair SE 29-Jun-17 7:35am

There are two Jquery libs omit one
all seem ok, but datetimepicker function is undefined,
dont remove this code

$.New(document).ready(function () {
$.New('#datetimepicker4').datetimepicker();
});
add its plugin.js file
and also images are missing, follow/download the complete package please.
and remove this plz
var $Original = jQuery.noConflict(true);

var $New = jQuery.noConflict(true);
$ = $Original;
jQuery = $Original;
$.New = $New;

Zubair SE 29-Jun-17 7:31am

https://eonasdan.github.io/bootstrap-datetimepicker/
further can go with this, thanks

Zubair SE 29-Jun-17 8:07am

@Html.TextBox("Test", "", new { @class = "form-control", id = "datetimepicker4", type = "text" })

$('#datetimepicker4').datetimepicker({timeFormat: 'hh:mm:ss p'});

Faris Karcic 29-Jun-17 8:11am

Thanks for help, but still I'd have conflicts between requirements for FullCalendar and DateTimePicker.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Faris Karcic · Accepted Answer · 2017-06-29T02:13:00

Solution 1

Since there was problem with jQuery version requirement for both FullCalendar and Datetimepicker.

Full Calendar -> jQuery 1.7.2
DateTimePicker -> jQuery 3.2.1

So I went with best solution I could, found datetimepicker for 1.7.2.
Datetimepicker[^]

It did the job!

Posted 29-Jun-17 2:13am

Faris Karcic

Updated 29-Jun-17 2:21am