1

我在混合应用程序中使用引导 v3日期时间选择器。有一个标签显示应用程序中的日期和时间值。所以每当用户clicks on the label它应该显示一个日期时间选择器来选择一个日期和时间。我已经实现了它并且运行良好。

Now when the picker pops up then I can set a date & time value to show when the picker poped up on screen.

$('#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 上。

I give it an initial date and time value, so when a picker opens up on iOS device then first time it shows the current timeand if you change to another time and close the picker and reopen it again then it shows correct last modified time. 但是，在date的情况下，它会在打开时显示正确的提供日期。

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

我如何解决这个问题？

4

2 回答 2

0

版本4.13.28（目前在dev 分支中）引入了focusOnShow.

设置为false文本框输入时不会获得焦点，这应该会阻止键盘在移动设备上显示

于 2015-04-06T13:25:58.050 回答
0

经过长时间的努力，我发现了问题所在。

问题在于 Safari (iOS) 上的 JavaScript Date 对象实现。

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

现在，当我使用下面的代码来提取时间信息时。

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

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

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

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

这再次在 Android 和 Windows 设备上正确转换，但在 iOS 上失败......说......无效日期。

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

要解决我的问题：

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

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

现在这在任何地方都可以正常工作。

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

于 2015-06-03T06:36:05.677 回答