0

私は、日付ピッカー ( http://www.eyecon.ro/bootstrap-datepicker/ ) のブートストラップ プラグインを使用しています。上記のリンクにアクセスすると、簡単なチェックイン チェックアウト フォームを作成する方法のコード例があります。チェックアウト日付ピッカーでは、チェックイン日付ピッカーより前の日付はすべて無効になっています。

私のサイトには、複数のチェックイン チェックアウト フォームがあります (複数の部屋用)。部屋ごとに、チェックインとチェックアウトの日付ピッカー (カップル) があります。だから私は次のコードがそれを行うと考えました。

ページで見つかったすべての日付ピッカーを含む配列を作成します (変数にすることができます)。次に、2 ごとに配列をループし、カップルごとにコードを適用します。

if ($('.datepicker').length) { 
//get all the datepickers
var IDs = [];
$(".main").find(".datepicker").each(function(){ IDs.push(this.id); });

for(j=0;j<IDs.length;j++){
    var nowTemp = new Date();
        var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

        var checkin = $('#'+ IDs[j]).datepicker({
        onRender: function(date) {
                 return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
        }).on('changeDate', function(ev) {
        var newDate = new Date(ev.date)
        newDate.setDate(newDate.getDate() + 1);
        checkout.setValue(newDate);
        checkin.hide();
        $('#'+ IDs[j+1])[0].focus();
        }).data('datepicker');

        var checkout = $('#'+ IDs[j+1]).datepicker({
        onRender: function(date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
        }).on('changeDate', function(ev) {
        checkout.hide();
        }).data('datepicker');
    j++;
    }
}

結果は、ページに 2 つの日付ピッカーがある場合、2 つ目の日付ピッカーが期待どおりに機能することです。最初のものはまったくありません。ページに1つの日付ピッカーがある場合、それは機能します。

アラート (ID) を追加すると、必要に応じて正しい順序で ID の配列が取得されます。

誰かが助けてくれるなら... :) よろしくお願いします！

4

1 に答える 1

0

私はこれに取り組んでおり、誰かが見ている場合に備えて回答を投稿すると思いました。

クラス「datepicker」で何かを探すことで機能します。そのアイテムの ID が「from」で終わる場合、ID が「to」で終わる対応するアイテムを探します。ID が「from」または「to」で終わらない場合、通常の日付ピッカーがバインドされます。

jqueryの達人ならもっとうまくやれると確信しています;-)

外部 JS:

function datepickerFromTo(fromSelector, toSelector, format) {
    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

    var fromDate = $(fromSelector).datepicker({
        weekStart: 1,
        format: format,
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
    }).on('show', function (ev) {
        toDate.hide();
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > toDate.date.valueOf()) {
            var newDate = new Date(ev.date)
            newDate.setDate(newDate.getDate());
            toDate.setValue(newDate);
        }
        fromDate.hide();
        $(toSelector)[0].focus();
    }).data('datepicker');

    var toDate = $(toSelector).datepicker({
        weekStart: 1,
        format: format,
        onRender: function (date) {
            return date.valueOf() <= fromDate.date.valueOf() ? 'disabled' : '';
        }
    }).on('show', function (ev) {
        fromDate.hide();
    }).on('changeDate', function (ev) {
        toDate.hide();
    }).data('datepicker');
}

ページの下部:

<script>
$('.datepicker').each(function() {
    var thisId = $(this).attr("id");

    if(thisId.length >= 4 && thisId.substr(thisId.length - 4) == "from") { // The ID ends with 'from' - treat it as a 'from' date
        var idRoot = thisId.substr(0, thisId.length - 4);
        var toDateSelector = '#' + idRoot + 'to';
        var toDate = $(toDateSelector);
        if(toDate.length) { // Found a matching 'to date'
            datepickerFromTo('#' + thisId,toDateSelector,'dd/mm/yyyy');
        }
    } else if(!thisId.length >= 2 && thisId.substr(thisId.length - 2) == "to") { // Bind an ordinary datepicker. Exclude anything with ID ending with 'to' date as this is handled when binding 'from' date.
        $(this).datepicker({
            weekStart: 1,
            format: 'dd/mm/yyyy'
        });
    }
});
</script>
于 2014-09-29T15:22:54.120 に答える