10

ドロップダウンで選択したモードに従って日付ピッカーのビューを変更しようとすると、ブートストラップ日付ピッカーの問題に直面しています。

以下は HTML コードです。

Mode : <select id="mode">
    <option value="1">Day</option>
    <option value="2">Month</option>
    <option value="3">Year</option>
</select>
<br><br>
From : <input type="text" id="from" /> 
&nbsp;To : <input type="text" id="to" />

jQuery コード:

$("#from").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
});
$("#to").datepicker({
    autoclose: true,
    startDate: '+1d',
    endDate: '+1y',
    clearBtn: true,
    todayHighlight: true,
    orientation: "top right"
});

$("#mode").change(function(){
    jQuery("#to").removeAttr('disabled');
    $("#from").val('');
    $("#to").val('');
    $("#from").datepicker('update');
    $("#to").datepicker('update');
    $("#from").datepicker("remove");
    $("#to").datepicker("remove");
    if ($(this).val() == 2){
        $("#from").datepicker({
            autoclose: true,
            startDate: '0',
            endDate:'+1y',
            startView: 1,
            minViewMode: 1,
            clearBtn: true,
        });
        $("#to").datepicker({
            autoclose: true,
            startDate: '0',
            startView: 1,
            endDate:'+1y',
            minViewMode: 1,
            clearBtn: true,
            orientation: "top right"
        });
        $("#from").datepicker().on("clearDate", function(){
            $("#to").val('');
            $("#to").datepicker('update');
        });
        $("#to").datepicker().on("clearDate", function(){
            $("#from").val('');
            $("#from").datepicker('update');
        });

        $("#from").datepicker().on("changeDate", function(){
            var fromDate    = $("#from").datepicker("getDate");
            if (fromDate != "Invalid Date" && fromDate != '' ) {
                fromDate.setMonth(fromDate.getMonth() + 1, 1);
                $("#to").datepicker("setDate", fromDate);
                $("#to").datepicker("setStartDate", fromDate);
                $("#to").datepicker("update");
            }
        });
        $("#to").datepicker().on("changeDate", function(){
            var toDate  = $("#to").datepicker("getDate");
            if (toDate != "Invalid Date") {
                $("#from").datepicker("setEndDate", toDate);
                $("#from").datepicker("update");
            }
        });
    }else if($(this).val() == 3){
        jQuery("#to").attr('disabled', 'disabled');
        $("#from").datepicker({
            autoclose: true,
            startDate: '0',
            endDate:'+1y',
            startView: 0,
            minViewMode: 0,
            clearBtn: true,
        });

        //clear event for the datepicker
        $("#from").datepicker().on("clearDate", function(){
            $("#to").val('');
            $("#to").datepicker('update');
        });
        $("#to").datepicker().on("clearDate", function(){
            $("#from").val('');
            $("#from").datepicker('update');
        });

        //set startdate event for the datepicker
        $("#from").datepicker().on("changeDate", function(){
            var fromDate    = $("#from").datepicker("getDate");
            if (fromDate != "Invalid Date") {
                fromDate.setDate(fromDate.getDate() + 365);
                $("#to").datepicker("setDate", fromDate);
                $("#to").datepicker("setStartDate", fromDate);
            }
        });
        $("#to").datepicker().on("changeDate", function(){
            var toDate  = $("#to").datepicker("getDate");
            if (toDate != "Invalid Date") {
                $("#from").datepicker("setEndDate", toDate);
            }
        });
    }else{
        $("#from").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
        });
        $("#to").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
            orientation: "top right"
        });
    }
});

私がやろうとしているのは、日、月、年の 3 種類のモードがあることです。ドロップダウンで月を選択すると、その変更イベントで、日付ピッカーにバインドされている以前のすべてのイベントを削除し、新しいイベントを日付ピッカーにバインドする必要があります。

ただし、モードを数回変更すると、イベントがバインドされなくなり、入力ボックスに値が設定されなくなります。

これが正しい方法かどうかはわかりませんが、他に方法がある場合は非常に役立ちます。

どんな助けでも感謝します。前もって感謝します。

これはコードの jsfiddle リンクです: http://jsfiddle.net/tejashsoni111/aL9vB/2/

これはドキュメントへのリンクです: http://bootstrap-datepicker.readthedocs.org/en/release/

4

3 に答える 3

2

1 つの方法として、このような日付/時刻ピッカーのプロトタイプを作成します。

<div id="fake_from_container" style="display:none">
<input type="text" class="fake_text" /> 
</div>
<div id="from_container>
</div>

次に、日付/時刻ピッカーを初期化したいときはいつでも試してください

$('#from_container').html($('#fake_from_container').html());
$('.fake_text', $('#from_container')).attr('id', 'from');

$("#from").datepicker().....

アイデアは次のとおりです。最初に、fake_from_container は入力用の HTML コードを格納するだけです。日付/時刻ピッカーを再初期化するたびに、$('#fake_from_container から HTML コードをコピーして、最初から入力を作成します。 ') を $('#from_container') にすると、その後は #from_container になります

<div id="from_container>
    <input type="text" class="fake_text" /> 
</div>

次に、 #from_container 内の入力項目の id を設定します

$('.fake_text', $('#from_container')).attr('id', 'from');

あなたが持っているでしょう

<div id="from_container>
    <input type="text" class="fake_text" id='from' /> 
</div>

次に、新しい入力 #from の任意のオプションで日付/時刻ピッカーを初期化できます

于 2014-06-02T07:30:04.647 に答える
2

が必要なようです.input-daterange。

完全な jsfiddle デモ

html

<br>Mode :
<select id="mode">
    <option value="1">Day</option>
    <option value="2">Month</option>
    <option value="3">Year</option>
</select>
    <br /><br />
<div id="datepicker-container"> </div>

動的にロード.input-daterangeし#datepicker-containerます（選択ボックスが変更されるたびに）：

<div class="input-daterange" id="datepicker">from:
     <input type="text" name="start" />to:
     <input type="text" name="end" />
</div>

次に、selectbox( #mode) が変更されるたびに、selectbox( ) で選択されたオプションに基づいて.input-daterangewith関数を開始します。datepicker()#mode

つまり、完全な JavaScript:

function initDatepicker(mode){
    $('#datepicker-container').html(''+
     '<div class="input-daterange" id="datepicker">from:'+
         '<input type="text" name="start" />to:'+
         '<input type="text" name="end" />'+
    '</div>');
    var $dtpicker=$('#datepicker-container > .input-daterange');
    $dtpicker.find(':input').val('');
    if (mode == 1) {//Day
        $dtpicker.datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
        });
    } else if (mode == 2) {//Month
        $dtpicker.datepicker({
            autoclose: true,
            startDate: '0m',
            endDate: '+1y',
            clearBtn: true,
            startView: 1,
            minViewMode: 1
        });
    } else if (mode == 3) {// Year
        $dtpicker.datepicker({
            autoclose: true,
            startDate: "0y",
            endDate: "+1y",
            clearBtn: true,
            startView: 2,
            minViewMode: 2
        });
    } 
}

$("#mode").change(function () {    
    $('#datepicker-container > .input-daterange').datepicker('remove');
    initDatepicker($(this).val());
});
initDatepicker(1);// for first time initiate Day
于 2014-06-02T14:15:17.613 に答える
1

使うだけ

$('#ID').datepicker('destroy');

datepicker ビューを作成する前に、以前のものを破棄し、必要に応じて新しい datepicker ui を適用します

于 2014-06-02T07:07:19.227 に答える