我的datetimepicker没有出现在symfony 3.4中

问题描述 投票：0回答：2

在这里，我正在尝试自定义我的两种形式的添加时间表，使用这两个字段的datetimepicker，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 %}

这只是向我显示我的两个字段，但不是所需的datetimepicker

javascript symfony bootstrap-datetimepicker eonasdan-datetimepicker
2个回答
0
投票

你有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更容易扩展到其他领域（从长远来看更容易维护）。

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

希望它会有所帮助。

问候，

马克西姆

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.