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

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

Problem with bootstrap datetimepicker

1 solution

Solution 1

Add your solution here

Preview 0

Problem with bootstrap datetimepicker

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us