我的 datetimepicker 没有出现在 symfony 3.4 中答案

【问题标题】：My datetimepicker does not appear in symfony 3.4我的 datetimepicker 没有出现在 symfony 3.4 中
【发布时间】：2018-09-10 16:39:43
【问题描述】：

在这里，我正在尝试自定义我添加日程表的两个字段，对这两个字段使用日期时间选择器，http://eonasdan.github.io/bootstrap-datetimepicker/ datetimepicker link 的日期时间选择器，为此我在 github 上下载了相应的 zip 文件，然后放置各个文件夹中的不同文件（css、js）。

但在显示中，我只有字段，没有出现日历和时间。

这是我的表单在图像image of my form 中的渲染。

这里是我的css和js的导入文件：base.html.twig

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Avec Doctix Prenez facilement un Rendez-vous">
<meta name="author" content="Med">
<title>{% block title %}Doctix{% endblock %}</title>
    {% block stylesheets %}
     <!-- BASE CSS -->
<link href="{{ asset('public/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/bootstrap-datetimepicker.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/bootstrap-datetimepicker-standalone.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/menu.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/vendors.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/icon_fonts/css/all_icons_min.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/fullcalendar.min.css') }}" rel="stylesheet">
<link href="{{ asset('bundles/fullcalendar/css/fullcalendar/fullcalendar.css') }}" rel="stylesheet">

<!-- YOUR CUSTOM CSS -->
<link href="{{ asset('public/css/custom.css') }}" rel="stylesheet">
<link href="{{ asset('public/css/common.css') }}" rel="stylesheet">
 <!-- SPECIFIC CSS -->
<link href="{{ asset('public/css/date_picker.css') }}" rel="stylesheet">  

    {% endblock %}

{% block javascripts %}

    <!-- Modernizr -->
    <script src="{{ asset('public/js/modernizr.js') }}"></script>

    <!-- COMMON SCRIPTS -->
    <script src="{{ asset('public/js/jquery-2.2.4.min.js') }}"></script>
    <script src="{{ asset('public/js/common_scripts.min.js') }}"></script>
    <script src="{{ asset('public/js/functions.js') }}"></script>
    <script src="{{ asset('public/assets/validate.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar/lib/jquery.min.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar/lib/moment.min.js') }}"></script>
    <script src="{{ asset('public/js/moment.js') }}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="{{ asset('public/js/locale-all.js') }}"></script>
    <script src="{{ asset('public/js/lang-all.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar/lib/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar/lang/fr.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar/lang-all.js') }}"></script>
    <script src="{{ asset('public/js/fullcalendar.default-settings.js') }}"></script>
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
  <!-- SPECIFIC SCRIPTS -->
  <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script src="{{ asset('public/js/map_listing.js') }}"></script>
  <script src="{{ asset('public/js/infobox.js') }}"></script>
  <script src="{{ asset('public/js/jquery.selectbox-0.2.js') }}"></script>
  <script>

 <script src="{{ asset('public/js/bootstrap.min.js') }}"></script>
 <script src="{{ asset('public/js/bootstrap-datepicker.js') }}"></script>
 <script src="{{asset('public/js/bootstrap-datetimepicker.js') }}"></script>
 <script src="{{asset('public/js/bootstrap-datetimepicker.min.js') }}"> 
 </script>
           {% endblock %}

这是我的 ScheduleType 表单：ScheduleType.php

     <?php

  namespace Doctix\MedecinBundle\Form;

  use Symfony\Component\Form\AbstractType;
  use Doctix\AdminBundle\Form\SpecialiteType;
  use Doctix\UserBundle\Form\UserType;
  use Symfony\Component\Form\FormBuilderInterface;
  use Symfony\Component\OptionsResolver\OptionsResolver;
  use Symfony\Component\Form\Extension\Core\Type\DateTimeType;
  use Symfony\Component\Form\Extension\Core\Type\SubmitType;
  use Symfony\Component\Form\Extension\Core\Type\TextType;
    class ScheduleType extends AbstractType
   {
 /**
 * {@inheritdoc}
 */
 public function buildForm(FormBuilderInterface $builder, array $options)
  {
     $builder->remove('user')
            ->remove('specialite')
            ->add('title')
            ->add('date_debut', DateTimeType::class, array(
                'widget' => 'single_text',
                'html5' => true,
                'required' => true,
                'attr' => array('class' => 'form-control input-inline datetimepicker',
                                 'data-provide' => 'datetimepicker',
                                 'data-format' => 'dd-mm-yyyy HH:ii',  
                                    ),


            ))
            ->add('date_fin', DateTimeType::class,array(
                'widget' => 'single_text',
                'html5' => true,
                'attr' => array('class' => 'form-control input-inline datetimepicker',
                                 'data-provide' => 'datetimepicker',
                                 'data-format' => 'dd-mm-yyyy HH:ii',  
                                    ),


            ))
            ->add('submit', SubmitType::class);

}
/**
 * {@inheritdoc}
 */
public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'Doctix\MedecinBundle\Entity\Schedule'
    ));
}

/**
 * {@inheritdoc}
 */
public function getBlockPrefix()
{
    return 'doctix_medecinbundle_schedule';
}


  }

最后是我的观点 new.html.twig

   <div class="content-wrapper">
   <div class="container-fluid">

                            <!-- Breadcrumbs-->   
        <ul class="breadcrumb">
     <li> 
       <h1>Ajout de nouveaux plannings</h1>
     </li>
              </ul>

  <div style="width: 900px; float: left;">   

                    <div class="row">       

                                {{ form_start(form) }}


                          <div class="form-group">    

                          {{ form_label(form.title) }}           

                            {{ form_widget(form.title) }}

                          </div>                
  </div>                                
                           <div class="row">

                          <div class="form-group">    

                          {{ form_label(form.date_debut) }}           
                          <div class='input-group date' id='datetimepicker'>
                            {{ form_widget(form.date_debut, { 'attr': { 'class': 'form-control input-inline datetimepicker' }}) }}
                            <span class="input-group-addon">
                              <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                          </div>                
                          </div>  
                            </div>
                                      <div class="row">
                          <div class="form-group">    

                          {{ form_label(form.date_fin) }}           
                          <div  class='input-group date' id='datetimepicker'> 
                             {{ form_widget(form.date_fin, { 'attr': { 'class': 'form-control input-inline datetimepicker' }}) }}

                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                          </div>                
                          </div>          
                                    </div>           


                    <div class="form-group">
                        {{ form_row(form.submit, { 'label': 'Ajouter' }) }}
                    </div>


                    {{ form_end(form) }}

                    </div>



   <ul>
      <li>
         <a id="eventLink" href="{{ path('schedule_index') }}">Retour à la liste</a>
     </li>
  </ul>


         </div>
    </div>
   </div>           

   <div id="calendar-holder">

    {% include '@FullCalendar/Calendar/calendar.html.twig' %}


   </div>


    {% block javascript %}


            <script type="text/javascript">


                     $('#datetimepicker').datetimepicker();

            </script>
              {% endblock %}

这只是显示我的两个字段，而不是所需的日期时间选择器

【问题讨论】：

标签： javascript symfony bootstrap-datetimepicker eonasdan-datetimepicker

【解决方案1】：

您有 2 个不同的 <div> 元素具有相同的 id：

<div  class='input-group date' id='datetimepicker'>

在 DOM 中，您不能重复使用 id。您需要为每个元素提供自己的 id，然后使用 datetimepicker() 函数对其进行标记，或者使用不同的方法并使用类并以这种方式标记它。

选项 1：

<div  class='input-group date' id='datetimepicker1'>
...
<div  class='input-group date' id='datetimepicker2'>
...

{% block javascript %}
    <script type="text/javascript">
         $('#datetimepicker1').datetimepicker();
         $('#datetimepicker2').datetimepicker();
    </script>
{% endblock %}

选项 2：

<div  class='input-group date datetimepicker'>
...
<div  class='input-group date datetimepicker'>
...

{% block javascript %}
    <script type="text/javascript">
         $('div.datetimepicker').datetimepicker();
    </script>
{% endblock %}

两者应该是等价的，但选项 2 更容易扩展到其他领域（从长远来看更容易维护。

【讨论】：

嗨@ehymel，即使有你的建议，这也不会改变任何东西，不会显示日期时间选择器

【解决方案2】：

我个人不得不使用该属性

'data-toggle' => 'datetimepicker'

而不是

'data-provide' => 'datetimepicker'

应该是这样的（我使用的是 BS4 datetimepicker "tempusdominus"，类名可能有点不同）：

    ->add('dateNaissance', DateType::class, array(
        'html5' => false,
        'widget' => 'single_text',
        'attr' => array(
            'class' => 'form-control datetimepicker-input',
            'data-toggle' => 'datetimepicker'
        )
    ))

然后在javascript中我做以下事情：

$('your selector...').datetimepicker({
                date: dateVal,
                locale : 'fr',
                viewMode: 'years',
                buttons: {
                    showClose : true
                },
                format: 'DD/MM/YYYY',
                collapse: true
            });

别忘了检查你的浏览器是否没有js错误。

希望它会有所帮助。

问候，

马克西姆

【讨论】：

嗨@MaximeADT，我试过你的建议，但我没有任何改变。我的控制台向我显示该错误： Uncaught ReferenceError: $ is not defined in ' $('#datetimepicker').datetimepicker({ '
您似乎缺少 JQuery ;) 将其导入您的项目中，此错误可能会消失
不在您尝试使用 datetimepicker 的页面中。相信我。或者只是为了验证，在您的页面中，在控制台中输入以下命令： $('body') 如果没有错误，那么问题可能出在您声明脚本导入的顺序中
当我输入 $('body') 时，我的控制台中没有错误。
我认为这是 jquery 和 bootstrap 版本的不匹配。我使用 bootstrap4 和 jquery3.3.1。但是如果我导入bootstrap3.2.0和jquery2.1.0的cdn版本，它似乎可以工作，但到目前为止显示仍然不完美