8

自動クローズを有効にして、既に選択されているカレンダーからフィールドを選択すると、フィールドが空になり、期待どおりに日付ピッカーが閉じます。フィールドを空にせずに、オートクローズ機能を引き続き使用するにはどうすればよいですか?

例については、デモをご覧ください。 =on&forceParse=on#サンドボックス

  1. 自動クローズがオンになっていることを確認してください
  2. 日付を選択します。
  3. 日付ピッカーを再度開き、現在選択されている日付を再度選択します。
  4. フィールドは再び空です

ありがとう

4

4 に答える 4

12

Bootstrap Datepicker は、目標を達成するために活用できるイベントを提供します。

これを行う1つの方法は次のとおりです。

$('#sandbox-container input').datepicker({
    autoclose: true
});

$('#sandbox-container input').on('show', function(e){
    if ( e.date ) {
         $(this).data('stickyDate', e.date);
    }
    else {
         $(this).data('stickyDate', null);
    }
});

$('#sandbox-container input').on('hide', function(e){
    var stickyDate = $(this).data('stickyDate');

    if ( !e.date && stickyDate ) {
        $(this).datepicker('setDate', stickyDate);
        $(this).data('stickyDate', null);
    }
});

必ずしも最もエレガントというわけではありませんが、ここでわかるように、トリックを実行します。

http://jsfiddle.net/klenwell/LcqM7/ (Chrome でテスト済み)

于 2014-07-27T20:38:25.863 に答える
2

簡単な修正: 1394 行目のデフォルトで、新しいオプション allowDeselection を追加します。

var defaults = $.fn.datepicker.defaults = {
    allowDeselection: false,
    ...
};

_toggle_multidate 関数 @ 行 1015 で、"else if (ix !== -1)"ステートメントを次のように変更します。

else if (ix !== -1 && this.o.allowDeselection){
            this.dates.remove(ix);
        }

参考：https ://github.com/eternicode/bootstrap-datepicker/issues/816

于 2014-08-08T12:20:59.857 に答える
1

すべてのイベントを「1 行」で実装したい場合に備えて、ASP.NET MVCプロジェクトで使用するコードをここで共有します。

そして、@klenwell のソリューションに感謝します!

$('#ExpectedEndingTimeDataPicker').datepicker({
    startDate: "@Model.ExpectedEndingTimeAsString",
    language: "@Model.CurrentCultere2Letters",
    autoclose: true,
    todayHighlight: true,
    format: "@Model.CurrentDateFormat"
}).on('changeDate', function (e) {          
    RecalculateEstimationDate();
}).on('show', function (e) {
    if (e.date) {
        $(this).data('stickyDate', e.date);
    }
    else {
        $(this).data('stickyDate', null);
    }
}).on('hide', function (e) {
    var stickyDate = $(this).data('stickyDate');
    if (!e.date && stickyDate) {
        $(this).datepicker('setDate', stickyDate);
        $(this).data('stickyDate', null);
    }
});

ASP.NET MVC モデルModelであることに注意してください。

これらのイベントの詳細については、http://bootstrap-datepicker.readthedocs.org/en/release/events.html をご覧ください。

そしてbootstrap-datepicker.jsについて

于 2014-08-07T14:44:48.437 に答える