Question

我在混合应用中使用bootstrap v3 datetime picker。有一个标签，它在应用中显示日期和时间值。因此，每当用户clicks on the label显示日期时间选择器以选择日期和时间时。我已经实现了它并且运行良好。

现在，当选择器弹出时，我可以设置日期＆amp;当选择器在屏幕上显示时显示的时间值。

$('#MetngSumryEditStartDateTime').data("DateTimePicker").date( moment( _defaultStDateTime ).format('Do MMMM YYYY, h:mm a') );

请记住，选择器需要输入字段才能进行操作。因此，当我在设备上提供文本字段时，会出现软键盘！这在我的情况下现在真的是必需的，因为不允许用户输入文本字段，而是用标签显示日期和时间的值。时间。

为此，我已将复选框作为输入字段。现在，拣货员在Android devices和桌面browsers上运行良好，例如chrome，但在 iOS上无效。

这是完整的代码列表。

<div class="container">
      <div class="row">
          <div id='meetingSumDateTimeEndArea'> 
            <span class='start'>End</span> 
            <span class='time' id='meetingSumEndTime'>" + (UserProfile.getUserProfileDetails().MeetingEndTime[i]) + "</span>" 
            <span class='date' id='meetingSumEndDate'>" + UserProfile.getUserProfileDetails().MeetingEndDate[i] + "</span>"     
          </div>

          <input type='checkbox'   id='MetngSumryEditEndDateTime'  />   

      </div>
   </div>

     <script type='text/javascript'> 
          $(function() {                  
                    var _defaultStTime ='9:00 pm'; // hardcoded for testing purpose
                    var _defaultStDate ='29 Mar, 2015'; // hardcoded for testing purpose

                    var _defaultStDateTime = _defaultStDate + ' ' + _defaultStTime  ;                   
                    console.log('_defaultStDateTime=' + _defaultStDateTime  ) ; 

                    $('#meetingSumDateTimeEndArea').on('click', function(e){  
                        $('#MetngSumryEditEndDateTime').focus();  
                    });

                    $('#MetngSumryEditEndDateTime').datetimepicker( { format:'Do MMMM YYYY, h:mm a' , sideBySide: true , defaultDate: _defaultStDateTime } );                                                               
                    $('#MetngSumryEditEndDateTime').datetimepicker().on('dp.change',function(e) {  

                         $('#MetngSumryEditEndDateTime').data("DateTimePicker").date( moment( _defaultStDateTime ).format('Do MMMM YYYY, h:mm a') );    

                        console.log( e.date.format('DD MMM, YYYY')  );  

                        var tm = e.date.format('hh:mm a').split(' ');  
                        console.log( tm[0] + " " + tm[1] );                     

                        console.log( e.date.format('hh:mm a')  );   

                    }); 

            }); 

    </script>

更新

我在下面尝试了 v4.13.28 并设置了 focusOnShow: false ，但仍然弹出键盘。我用文本字段尝试了这个。

现在我又回到checkbox字段以防止软键盘问题，但问题出现在iOS上。

我给它一个初始日期和时间值，所以当一个选择器在iOS设备上打开然后first time it shows the current time并且如果你换到另一个时间并关闭选择器并再次重新打开它然后它显示正确的最后修改时间。但是，如果日期，它会在打开时显示正确的提供日期。

所以处理日期很好，但是第一次只有时间值设置错误。

我如何解决这个问题？

Answer 1

版本4.13.28（目前位于dev branch）介绍focusOnShow。

当设置为false时，文本框输入将无法获得焦点，这将阻止键盘在移动设备上显示

Answer 2

经过长时间的努力，我找到了问题。

问题在于Safari（iOS）上的JavaScript Date对象实现。

datetimepicker 组件使用时刻进行日期/时间操作，时刻取决于底层平台的日期/时间实施。

现在，我使用以下代码提取时间信息。

moment("1999-01-01 11:00 am").format("HH:mm:ss");

这提供了有关Android和Android的正确时间信息。 Windows平板电脑。 但是这在iOS上无法识别...说.....日期无效。

现在进一步深入研究，如果我给 JavaScript日期对象赋予相同的价值

new Date("1999-01-01 11:00 am");

再次在Android＆amp; Windows设备但在iOS上失败....说......无效日期。

这意味着日期对象实现已破坏或在iOS上出现问题。

解决我的问题：

我现在提供了另一个参数，以便仅提取时间数据。

moment("1999-01-01 11:00 am" , ['h:mm a'] ).format('HH:mm:ss');

现在这种方法无处不在。

注意：为了这个问题，1999-01-01 11:00 am是硬编码的，尽管它们是在应用程序中动态出现的。

Bootstrap v3 - DateTime Picker - 设置iOS上的值不起作用

2 个答案: