我的datetimepicker没有出现在symfony 3.4中

时间：2018-09-10 16:39:43

标签： javascript symfony bootstrap-datetimepicker eonasdan-datetimepicker

在这里，我尝试自定义添加时间表的形式的两个字段，为此两个字段使用datetimepicker，http://eonasdan.github.io/bootstrap-datetimepicker/ datetimepicker link的datetimepicker，为此我将相应的zip文件下载到了github，然后将不同的文件（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 %}

仅显示我的两个字段，而不显示所需的datetimepicker

2 个答案:

答案 0 :(得分：0)

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

<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更易于扩展到其他字段（从长远来看更易于维护。

答案 1 :(得分：0)

过时的我不得不使用该属性

'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错误。

希望这会有所帮助。

此致

马克西姆

相关问题
最新问题