Pikaday DatePicker ведет себя странно - DatePicker срабатывает на этикетке и иногда работает на вводе - PullRequest
Новая
       48

Pikaday DatePicker ведет себя странно - DatePicker срабатывает на этикетке и иногда работает на вводе

0 голосов
/ 09 мая 2019

У меня проблемы с датщиком Пикадай.На рабочем столе это выглядит нормально, и средство выбора даты может быть запущено на ярлыке и на входе (что я и хочу), но на мобильном устройстве оно работает не так, как ожидалось.

На мобильном устройстве, если я нажму на ярлык, он просто вызовет средство выбора даты, но когда я нажму на поле ввода, оно не появится.Иногда он будет вызывать средство выбора даты только в том случае, если я сильно нажму и удержу поле ввода, и если я отпущу его, оно исчезнет.Я очень запутался ...

Страница с вводом и датчиком была написана на хамле, как показано ниже 

 .row
          .columns.small-24.medium-20.medium-centered
            = simple_form_for space_list, url: space_list_path do |builder|
              = builder.simple_fields_for :chosen_spaces do |f|
                %section.chosen-space-section.space-list-section{ 'data-provide': 'list_item_estimate', 'data-id': f.object.id }
                  .row
                    .columns.small-5.medium-4.large-4
                      = smart_image_tag imgix_url(f.object.primary_photo, 650), class: 'responsive-66'

                    .columns.small-17.medium-8.large-9
                      %h4.chosen-space-name= f.object.name
                      %p.chosen-space-short-address= f.object.short_address

                    .columns.small-2.medium-1.medium-push-11.large-1.large-push-10
                      = link_to chosen_space_path(f.object), remote: true, method: :delete do
                        %i.icon-close

                    .columns.small-24.medium-11.medium-pull-1.large-10.large-pull-1
                      = f.association :space, as: :hidden, input_html: { class: 'space_id' }
                      .row
                        .columns.small-9
                          = f.input :start_on, required: false do
                            .row.collapse.has-postfix
                              .columns.small-18.medium-19
                                = f.input_field :start_on,
                                  as: :datestring,
                                  format: :cal,
                                  data: { 'provide' => 'simple_datepicker', 'format' => I18n.t('js.availablitypicker.date_picker.format') },
                                  class: 'start_on'

                              .columns.small-6.medium-5
                                .postfix
                                  %i.icon-calendar

                        .columns.small-9
                          = f.input :end_on, required: false do
                            .row.collapse.has-postfix
                              .columns.small-18.medium-19
                                = f.input_field :end_on,
                                  as: :datestring,
                                  format: :cal,
                                  data: { 'provide' => 'simple_datepicker', 'format' => I18n.t('js.availablitypicker.date_picker.format') },
                                  class: 'end_on'

                              .columns.small-6.medium-5
                                .postfix
                                  %i.icon-calendar

                        .columns.small-6
                          .input.text-right
                            %label.control-label
                              .estimate-spinner.text-center.hide
                                = image_tag 'select2-spinner.gif'
                              = t('chosen_spaces.chosen_space.estimate')
                            %h4.light.net-estimate= f.object.pricing.gross_grand_total
                      .row
                        .columns.small-24
                          .estimate-errors


              .row
                .column.small-24.medium-offset-8.medium-8.medium-push-8.large-offset-14.large-5.large-push-5
                  = builder.submit t("flow_test.enquire.space_list_cta"),
                    class: 'button primary expand'

                .column.small-24.medium-8.medium-pull-8.large-5.large-pull-5
                  = link_to t('.add_spaces_cta'), research_spaces_path(),
                    class: 'button tertiary expand'

Это страница на обычном html: 

<div class="row">
   <div class="columns small-5 medium-4 large-4">
      <div class="image responsive-66" style="background-image: url('https://appearhere.imgix.net/https%3A%2F%2Fb1.ah-assets.net%2Fuploads%2Fphoto%2Fpath%2F66006%2F206_Upper_Street19-2.jpg?ixlib=rb-1.1.0&amp;mark=http%3A%2F%2Flogos.appearhere.co.uk%2Flogo%2F138%2FFFFFFF.png&amp;markalign=bottom%2Cright&amp;markpad=20&amp;h=650&amp;w=650&amp;s=be4027b2134c7aec5740d7427cfccfe1');"></div>
   </div>
   <div class="columns small-17 medium-8 large-9">
      <h4 class="chosen-space-name">Upper Street, Islington - The Big Corner Restaurant</h4>
      <p class="chosen-space-short-address">London</p>
   </div>
   <div class="columns small-2 medium-1 medium-push-11 large-1 large-push-10">
      <a data-remote="true" rel="nofollow" data-method="delete" href="/chosen_spaces/143136"><i class="icon-close"></i>
      </a>
   </div>
   <div class="columns small-24 medium-11 medium-pull-1 large-10 large-pull-1">
      <div class="control-group hidden space_list_chosen_spaces_space">
         <div class="controls"><input class="hidden space_id" type="hidden" value="7586" name="space_list[chosen_spaces_attributes][0][space_id]" id="space_list_chosen_spaces_attributes_0_space_id"></div>
      </div>
      <div class="row">
         <div class="columns small-9">
            <div class="control-group date optional space_list_chosen_spaces_start_on">
               <label class="date optional control-label" for="space_list_chosen_spaces_attributes_0_start_on">Appear date</label>
               <div class="controls">
                  <div class="row collapse has-postfix">
                     <div class="columns small-18 medium-19">
                        <input format="cal" data-provide="simple_datepicker" data-format="DD/MM/YY" class="string datestring required start_on" type="text" autocomplete="off" value="09/05/19" name="space_list[chosen_spaces_attributes][0][start_on]" id="space_list_chosen_spaces_attributes_0_start_on">
                     </div>
                     <div class="columns small-6 medium-5">
                        <div class="postfix">
                           <i class="icon-calendar"></i>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="columns small-9">
            <div class="control-group date optional space_list_chosen_spaces_end_on">
               <label class="date optional control-label" for="space_list_chosen_spaces_attributes_0_end_on">Disappear date</label>
               <div class="controls">
                  <div class="row collapse has-postfix">
                     <div class="columns small-18 medium-19">
                        <input format="cal" data-provide="simple_datepicker" data-format="DD/MM/YY" class="string datestring required end_on" type="text" autocomplete="off" value="15/05/19" name="space_list[chosen_spaces_attributes][0][end_on]" id="space_list_chosen_spaces_attributes_0_end_on">
                     </div>
                     <div class="columns small-6 medium-5">
                        <div class="postfix">
                           <i class="icon-calendar"></i>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="columns small-6">
            <div class="input text-right">
               <label class="control-label">
                  <div class="estimate-spinner text-center hide">
                     <img src="https://b3.ah-assets.net/assets/select2-spinner-f6ecff617ec2ba7f559e6f535cad9b70a3f91120737535dab4d4548a6c83576c.gif" alt="Select2 spinner">
                  </div>
                  Estimate
               </label>
               <h4 class="light net-estimate">£3,780</h4>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="columns small-24">
            <div class="estimate-errors"></div>
         </div>
      </div>
   </div>
</div>

Я использую Pikaday datepicker - вот js .И это jquery, который запускается, чтобы вызвать средство выбора даты 

(function($, Datepicker, moment, I18n) {

  $.fn.simpleDatePicker = function() {
    return this.each(function() {
      var i18n = I18n.t('js.availablitypicker.date_picker'),
          defaultFormat = I18n.t('js.availablitypicker.date_picker.long_format'),
          format = $(this).data('format') || defaultFormat;

      new Datepicker({ field: this,
                       format: format,
                       disableDayFn: function(day) {
                         return day < moment().startOf('day');
                       },
                       i18n: i18n
                     });
    });
  };

  $('[data-provide="simple_datepicker"]').simpleDatePicker();

}(window.jQuery, window.Datepicker, window.moment, window.I18n));

Что я тут не так сделал?

...