3

我正在一个项目中大量使用 jQuery 的 UI Datepicker。但是，其中一个字段也需要时间，并且客户希望在原始日期选择器之外使用类似 iPhone 的时间选择器。（否则，我会使用它——http: //trentrichardson.com/examples/timepicker/——它很棒，但没有所需的视觉风格。）

我找到了这个插件——http: //demo.mobiscroll.com/#demo=time&mode=mixed&display=inline&theme=jqm——我正在以某种方式将它与 jQuery UI 插件集成，将它放在日历表和除了从日期选择器推送的日期之外，以某种方式从这里发送数据。

这是我的日期选择器初始化代码：

<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.18.custom.min.js"></script>

function datepickerAdd() {
        $('input[name=valueTextField]').addClass('datepicker');

            $( ".datepicker" ).datepicker({
                defaultDate: "+1w",
                maxDate: "0d+",
                dateFormat: "m/d/yy"
                });

                $(function(){
                    $('#i').scroller({
                        preset: 'time',
                        theme: 'jqm',
                        display: 'inline',
                        mode: 'mixed'
                    });    
                });

            $('.datepicker').datepicker().bind('click keyup', function() {
                if ($('#ui-datepicker-div :last-child').is('table'))
                    $('#ui-datepicker-div').append('<input id="i" name="i" style="display:none" />');
            });
    }

我当然可以包含其他脚本，我只是将我的 jquery 库放在那里，这样它们就不会相互混淆。

任何人都可以帮助或有一个简单的选择吗？如果它不是 mobiscroll，那也很好，只是允许您滚动或使用箭头移动时间的东西就可以了。

4

1 回答 1

2

您的 mobiscroll 初始化位于错误的位置（尚未在 DOM 中。这是一个建议的解决方案：

function addTimePicker() {
    setTimeout(function() {
        if ($('#ui-datepicker-div :last-child').is('table'))
            $('<div id="mobiscroll"></div>').appendTo($('#ui-datepicker-div')).scroller({
                preset: 'time',
                theme: 'ios',
                display: 'inline'
            });
    }, 10); 
}

$('#test').datepicker({
    defaultDate: "+1w",
    maxDate: "0d+",
    dateFormat: "m/d/yy",
    onSelect: function(dateText) {
        alert('Time: ' + $.scroller.formatDate('hh:ii A', $('#mobiscroll').scroller('getDate')));
    },
    beforeShow: addTimePicker,
    onChangeMonthYear: addTimePicker // when changing month, mobiscroll must be re-initialized
});

虽然这似乎是一个混乱的解决方案，但我不会将 jquery UI timepicker 与 mobiscroll 混合使用。Mobiscroll 也有 datetimepicker，或者坚持为 jquery UI 建议的 datetimepicker。

于 2012-10-19T09:23:05.833 回答