TypeError: jQuery (…) .datepicker is not в function C# и Фуль Календар

Я стараюсь выполнять в моем проекте календарь событий в bootstrap 4, только, что в момент выполнения моего языка сценариев JavaScript усыновляет мне следующую ошибку:

Uncaught TypeError: jQuery (...) .datepicker is not в function

Где мой код язык сценариев JavaScript - следующий:

<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery-ui.custom.min.js"></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>

<link rel="stylesheet" type="text/css" href="../../Assets/css/CDOCalendar.css">

<script type="text/javascript">
    
    jQuery(document).ready(function ($) {      
        $.noConflict();
        jQuery('.datetimepicker').datepicker({ //error
            timepicker: true,
            language: 'en',
            range: true,
            multipleDates: true,
            multipleDatesSeparator: " - "
        });
        jQuery("#add-event").submit(function () {
            alert("Submitted");
            var values = {};
            $.each($('#add-event').serializeArray(), function (i, field) {
                values[field.name] = field.value;
            });
            console.log(
                values
            );
        });
    });

    (function () {
        'use strict';
        // ------------------------------------------------------- //
        // Calendar
        // ------------------------------------------------------ //
        jQuery(function () {
            // page is ready
            jQuery('#calendar').fullCalendar({
                themeSystem: 'bootstrap4',
                // emphasizes business hours
                businessHours: false,
                defaultView: 'month',
                // event dragging & resizing
                editable: true,
                // header
                header: {
                    left: 'title',
                    center: 'month,agendaWeek,agendaDay',
                    right: 'today prev,next'
                },
                events: [
                    {
                        title: 'Barber',
                        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu pellentesque nibh. In nisl nulla, convallis ac nulla eget, pellentesque pellentesque magna.',
                        start: '2019-07-07',
                        end: '2019-07-07',
                        className: 'fc-bg-default',
                        icon: "circle"
                    },
                    
                ],
                eventRender: function (event, element) {
                    if (event.icon) {
                        element.find(".fc-title").prepend("<i class='fa fa-" + event.icon + "'></i>");
                    }
                },
                dayClick: function () {
                    jQuery('#modal-view-event-add').modal();
                },
                eventClick: function (event, jsEvent, view) {
                    jQuery('.event-icon').html("<i class='fa fa-" + event.icon + "'></i>");
                    jQuery('.event-title').html(event.title);
                    jQuery('.event-body').html(event.description);
                    jQuery('.eventUrl').attr('href', event.url);
                    jQuery('#modal-view-event').modal();
                },
            })
        });

    })(jQuery);
</script>

и мой код HTML - следующий

<div class="p-5">
    <h2 class="mb-4">Calendario CDO</h2>
    <div class="card">
        <div class="card-body p-0">
            <div id="calendar"></div>
        </div>
    </div>
</div>

<!-- calendar modal -->
<div id="modal-view-event" class="modal modal-top fade calendar-modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h4 class="modal-title"><span class="event-icon"></span><span class="event-title"></span></h4>
                <div class="event-body"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="modal-view-event-add" @*class="modal modal-top fade calendar-modal"*@>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="add-event">
                <div class="modal-body">
                    <h4>Add Event Detail</h4>
                    <div class="form-group">
                        <label>Event name</label>
                        <input type="text" class="form-control" name="ename">
                    </div>
                    <div class="form-group">
                        <label>Event Date</label>
                        <input type='text' class="datetimepicker form-control" name="edate">
                    </div>
                    <div class="form-group">
                        <label>Event Description</label>
                        <textarea class="form-control" name="edesc"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Event Color</label>
                        <select class="form-control" name="ecolor">
                            <option value="fc-bg-default">fc-bg-default</option>
                            <option value="fc-bg-blue">fc-bg-blue</option>
                            <option value="fc-bg-lightgreen">fc-bg-lightgreen</option>
                            <option value="fc-bg-pinkred">fc-bg-pinkred</option>
                            <option value="fc-bg-deepskyblue">fc-bg-deepskyblue</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Event Icon</label>
                        <select class="form-control" name="eicon">
                            <option value="circle">circle</option>
                            <option value="cog">cog</option>
                            <option value="group">group</option>
                            <option value="suitcase">suitcase</option>
                            <option value="calendar">calendar</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

Где я хочу показать модального, где он смог добавлять событие в дне, который я выбрал, но выполнив код, меня усыновляет ошибка не, где будет проблема, Я Буду в серьгу, если они потребуют большей информации

2
задан 27.12.2019, 22:42
1 ответ

Чтобы мочь использовать в функциональность datepicker из Bootstrap 4, ты нуждаешься в том, чтобы сослаться в plugin bootstrap-datepicker в тебе cГіdigo HTML.

Для файла классов css:

<head>
   <meta charset="utf-8">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
</head>

И для файла JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

Конечно, ты должен иметь tambiГ©n снабженные ссылками librerГ-схвати их и css jQuery и Bootstrap4 личных деталей.

1
ответ дан 29.12.2019, 09:10
  • 1
    Большое спасибо!! Твой solució n в решенный моя проблема!! – Edgar Rojas 27.12.2019, 23:45

Теги

Похожие вопросы