3

jQuery の UI Datepicker を多用するプロジェクトに取り組んでいます。ただし、フィールドの 1 つには時刻も必要であり、クライアントは元の日付ピッカーに加えて iPhone のようなタイムピッカーを使用したいと考えています。(それ以外の場合は、これを使用します -- http://trentrichardson.com/examples/timepicker/ -- これは素晴らしいですが、必要なビジュアル スタイルがありません。)

私はこのプラグインを見つけました -- http://demo.mobiscroll.com/#demo=time&mode=mixed&display=inline&theme=jqm -- それを jQuery UI プラグインと統合し、カレンダー テーブルの下に配置して、日付ピッカーからプッシュされた日付に加えて、何らかの方法でこれからデータを送信します。

これが私のdatepicker初期化コードです:

<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 に答える