Мой datetimepicker не появляется в Symfony 3.4 - PullRequest
Новая
       105

Мой datetimepicker не появляется в Symfony 3.4

0 голосов
/ 10 сентября 2018

здесь я пытаюсь настроить два моих поля формы добавления расписаний, используя для этих двух полей указатель даты и времени, http://eonasdan.github.io/bootstrap-datetimepicker/ datetimepickerссылка и для этого я скачал соответствующий файл zip на github и поместил различные файлы (css, js) в соответствующие папки.

Но на дисплее у меня есть только поля, календарь ивремя не появляется.

Вот рендеринг моей формы на изображении изображение моей формы .

Вот файл импорта моих 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 голосов
/ 11 сентября 2018

Personnaly Мне пришлось использовать атрибут 

'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.

Надеюсь, это поможет.

С уважением,

Maxime

0 голосов
/ 10 сентября 2018

У вас есть 2 разных элемента <div> с одинаковым идентификатором: 

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

В DOM вы не можете повторно использовать идентификатор. Вам нужно либо дать каждому элементу свой собственный идентификатор, а затем пометить его функцией 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 легче расширить на другие поля (и легче поддерживать в долгосрочной перспективе.

...