1

2 つのテキスト入力から値を取得する Javascript を作成しようとしていますが、これはかなり簡単です。しかし、何かがおかしい。これが私のコードです：

<script>
    jQuery(function() {
        jQuery('#fromPicker, #toPicker').datepicker({ dateFormat : 'yy-mm-dd' });

        jQuery('#submit').attr('disabled', 'disabled');

        jQuery('#toPicker').on('blur', function() {
            var fromDate = jQuery('#fromPicker').val();
            var toDate = jQuery('#toPicker').val();
            console.log(toDate);

            if (fromDate !== '' && toDate !== '') {
                if (isValidDate(fromDate) && isValidDate(toDate)) {
                    jQuery('#submit').removeAttr('disabled');
                } else {
                    alert('You must enter dates in the format "yyyy-mm-dd"');
                }
            } 
        });
    });

    function isValidDate(dt) {
        if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
            return true;
        }
    }
</script>

しかし、私console.log(toDate)は空の文字列を取得します。しかし、blurもう一度別のイベントを実行すると (データが残っているフィールドにフォーカスを当てたり、フォーカスを外したり)、正しい値が得られます。初めて機能しない理由はありますか？

2 つのテキスト入力には、 および の ID が#fromPickerあり#toPicker、jQueryUI の日付ピッカーです。

解決：

最終的に私が望んでいたことはこれでした：

jQuery(function() { jQuery('#fromPicker, #toPicker').datepicker({ dateFormat : 'yy-mm-dd' });

    jQuery('#submit').on('click', function() {
        var fromDate = jQuery('#fromPicker').val();
        var toDate = jQuery('#toPicker').val();

        if (fromDate !== '' && toDate !== '') {
            if (isValidDate(fromDate) && isValidDate(toDate)) {
                // do nothing
            } else {
                alert('You must enter dates in the format "yyyy-mm-dd"');
                return false;
            }
        } else {
            return false;
        }
    });
});

function isValidDate(dt) {
    if (dt.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)) {
        return true;
    }
} </script>
4

2 に答える 2

2

ユーザーが (日付を選択するために) 入力フィールドの外側をクリックすると、入力フィールドがぼやけます。それを回避する方法はありません。したがって、blur で検証をトリガーする代わりに、datepicker の onSelect コールバックを使用します。

$('.selector').datepicker({
    onSelect: function(dateText) { /* validation here */ }
});

onblur-events を保持したい場合は、次のように検証を延期して、検証が開始される前に日付ピッカーがフィールドに入力できるようにすることができます。

$('#myform input').blur(function () {
    setTimeout(function () { /* validation here */ }, 1);
});

setTimeout を使用して同時実行の問題を処理するのはハックのように見えるかもしれませんが、JavaScript のシングルスレッドの性質により、非常にうまく機能します。jQuery-fame の John Resig が、このブログ投稿でそれについて語っています。

元の投稿へのリンク

于 2013-07-23T18:24:48.797 に答える
2

コードが機能しない理由はわかりませんが、イベントの代わりに、代わりに日付ピッカーのイベントblurを試してくださいonselect

jQuery('#toPicker').datepicker( {
    onSelect: function(date) {
        alert(date);
        // Do other stuff
    },
    // ....
);
于 2013-07-23T18:22:06.707 に答える