0

このプラグインを使用しています

次の HTML と JavaScript があります。

<div>
    <div>
        <div>Departure:</div>
        <div><input name="departureDateInput" value="#{bean.getFormattedFromDate()}" class="datepicker datepicker1"></input></div>
    </div>

    <div>
        <div>Return:</div>
        <div><input name="returnDateInput" value="#{bean.getFormattedToDate()}" class="datepicker datepicker2"></input></div>
    </div>
</div>

<script>
    var $input2 = $(".datepicker1").pickadate({
        format: 'dd-mm-yyyy',
        min: 1,
        today: '',
        onClose: function() {
            var picker = $input.pickadate("picker");

            picker.set("select", this.component.item.select.pick);
            picker.open();

        }
    });

    var $input = $('.datepicker2').pickadate({
        format: 'dd-mm-yyyy',
        min: 1,
        today: '',
        onClose: function() {
            $("#departureDateInput").text($input2.val());
            $("#returnDateInput").text($input.val());
        }
    });
</script>

上記のレンダリング結果は、それぞれ独自の日付ピッカーを持つ 2 つの入力フィールドです。最初の入力で日付を選択すると、2 番目の入力が自動的に表示され、ユーザーは終了日を選択できます。

機能は問題ありませんが、たとえば、開始日と終了日が入力される単一の入力のみをユーザーに表示したい13-06-2013 - 15-06-2013

これを実装する方法がわかりません。誰か提案はありますか？

4

2 に答える 2

3

これは実際の例ですが、jQuery UI を使用しています: http://jsfiddle.net/kcCUD/10/

$(function() {
    var date1 = $('#date1');
    var date2 = $('#date2');
    date1.datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            var date = $(this).datepicker("getDate");

            date2.datepicker("setDate", date);
            date2.datepicker( "show" );

        }
    });
    date2.datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function( selectedDate ) {
            var date = $(this).datepicker("getDate");
            var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);

            date1.val(date1.val() + " - " + formattedDate);
        }
    });
});

HTML:

<input id="date1" value="" size="30" />
<input id="date2" style="visibility:hidden" value="" />
于 2013-09-25T14:29:01.607 に答える
1

それらを 2 つの個別の日付ピッカーのままにしておくのではなく、1 つのようにスタイルを設定します...それらを並べて配置し、スタイルを設定して、左の日付ピッカーには右の境界線がなく、右の境界線があるようにします。左枠なし。

このようにして、フォームが送信されると、両方の値が別々の値として渡されます。

于 2013-09-25T14:12:27.233 に答える