web-dev-qa-db-ja.com

jQuery UI Datepicker-複数の日付選択

JQuery UI Datepickerウィジェットを使用して複数の日付を選択する方法はありますか？

すべての助けに感謝します！ jquery UIのdatepickerを使用することができない場合、同様の何かがありますか？

jqueryjquery-uidatepicker
42
tarnfeld

同じことをする必要があったので、onSelectイベントとbeforeShowDayイベントを使用して、これを有効にするJavaScriptを作成しました。それは選択された日付の独自の配列を維持するため、残念ながら現在の日付などを表示するテキストボックスと統合しません。インラインコントロールとして使用するだけで、現在選択されている日付の配列を照会できます。
基本として このコード を使用しました。

<script type="text/javascript">
// Maintain array of dates
var dates = new Array();

function addDate(date) {
    if (jQuery.inArray(date, dates) < 0) 
        dates.Push(date);
}

function removeDate(index) {
    dates.splice(index, 1);
}

// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
    var index = jQuery.inArray(date, dates);
    if (index >= 0) 
        removeDate(index);
    else 
        addDate(date);
}

// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
    var ret = new String(number);
    if (ret.length == 1) 
        ret = "0" + ret;
    return ret;
}

jQuery(function () {
    jQuery("#datepicker").datepicker({
        onSelect: function (dateText, inst) {
            addOrRemoveDate(dateText);
        },
        beforeShowDay: function (date) {
            var year = date.getFullYear();
            // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
            var month = padNumber(date.getMonth() + 1);
            var day = padNumber(date.getDate());
            // This depends on the datepicker's date format
            var dateString = month + "/" + day + "/" + year;

            var gotDate = jQuery.inArray(dateString, dates);
            if (gotDate >= 0) {
                // Enable date so it can be deselected. Set style to be highlighted
                return [true, "ui-state-highlight"];
            }
            // Dates not in the array are left enabled, but with no extra style
            return [true, ""];
        }
    });
});
</script>
32
Tevin

少し変更すると、設定したdateFormatに関係なく機能します。

$("#datepicker").datepicker({
                        dateFormat: "@", // Unix timestamp
                        onSelect: function(dateText, inst){
                            addOrRemoveDate(dateText);
                        },
                        beforeShowDay: function(date){
                            var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);
                            if (gotDate >= 0) {
                                return [false,"ui-state-highlight", "Event Name"];
                            }
                            return [true, ""];
                        }
                    });
12
chriszero

間隔の範囲をサポートする適切な日付ピッカーを見つけようとしてかなりの時間を費やし、最終的にはこれを見つけました：

http://keith-wood.name/datepick.html

これは範囲または複数の日付を選択するための最高のjquery日付ピッカーであり、jQuery UI日付ピッカーのベースであると主張されており、それが本当に強力だと思われるので疑う理由はありません。また良い文書化！

10
user310457
<div id="calendar"></div>
<script>
$(document).ready(function() {
    var days = [];

    $('#calendar').datepicker({
        dateFormat: 'yymmdd',
        showWeek: true, showOtherMonths: false, selectOtherMonths: false,
        navigationAsDateFormat: true, prevText: 'MM', nextText: 'MM',
        onSelect: function(d) {
            var i = $.inArray(d, days);

            if (i == -1)
                days.Push(d);
            else
                days.splice(i, 1);
        },
        beforeShowDay: function(d) {
            return ([true, $.inArray($.datepicker.formatDate('yymmdd', d), days) == -1 ? 'ui-state-free' : 'ui-state-busy']);
        }
    });
});
</script>

注：daysには、'20190101'などの日付のリストをPHPのコードで事前に入力できます。

CSSに2行追加します。

#calendar .ui-state-busy a {background:#e6e6e6 !important;}
#calendar .ui-state-free a {background:none !important;}

<form>のカレンダーで選択された日のリストを取得するには：

<div id="calendar"></div>
<form method="post">
<input type="submit" name="calendar_get" id="calendar_get" value="Validate" />
</form>

これを<script>に追加します：

    $('#calendar_get').click(function() {
        $(this).append('<input type="hidden" name="calendar_days" value="' + days.join(',') + '" />');
    });

$_POST['calendar_days']の文字列にimplodeを適用し、strtotimeをすべてのフォーマットされた日付にマップします。

1
frasq

@dubroxが開発したプラグインは非常に軽量で、jQuery UIとほぼ同じように動作します。私の要件は、選択した日付の数を制限する機能を持つことでした。

直感的に、maxPicksプロパティはこの目的のために提供されたようですが、残念ながら機能しません。

この修正をお探しの方のために、ここにあります：

  1. まず、 patch _jquery.ui.multidatespicker.js_が必要です。 pull要求をgithub に送信しました。 dubroxがマスターと統合するか、自分で修正するまで、これを使用できます。

  2. 使い方は本当に簡単です。以下のコードは、指定された数の日付（maxPicks）が既に選択されていると、日付ピッカーが日付を選択しないようにします。以前に選択した日付の選択を解除すると、もう一度制限に達するまで再度選択できます。

    $("#mydatefield").multiDatesPicker({maxPicks: 3});

1
adarshr

これを使用します：

$('body').on('focus',".datumwaehlen", function(){
    $(this).datepicker({
        minDate: -20
    });
});
0
GerA

これには要件がありました。ここに私が使用したコードがあります。通常どおり入力に適用します。クラスtypeof__multidatepickerを使用しています。

所有者のテキストボックスに一意の日付のリストを保持します。そこに入力することもできますが、これは検証されていません-明らかにサーバーは結果のリストをチェックする必要があります！

私は日付ピッカーのリンクされたテキストボックスで動作するようにしようとしましたが失敗しましたので、日付ピッカーの目に見えない入力を作成します（display:noneでは動作しないようです、したがって奇妙なスタイリング）。

日付ピッカーが正しい場所に表示されるようにメイン入力の上に配置され、幅が1ピクセルなので、メインテキストボックスに入力できます。

プラットフォームが固定されたイントラネット用であるため、クロスブラウザテストはあまり行っていません。

bodyにハンドラーを含めることを忘れないでください。そうしないと、混乱してしまいます。

$('.typeof__multidatepicker').each(
    function()
    {
        var _this = $(this);                        

        var picker = $('<input tabindex="-1" style="position:absolute;opacity:0;width:1px" type="text"/>');

        picker.insertAfter(this)
        .position({my:'left top', at:'left top', of:this})
        .datepicker({
            beforeShow:
                function()
                {
                    _this.data('mdp-popped', true);
                },
            onClose: 
                function(dt, dpicker)
                {   
                    var date = $.datepicker.formatDate(picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate'));
                    var hash = {};
                    var curr = _this.val() ? _this.val().split(/\s*,\s*/) : [];
                    var a = [];

                    $.each(curr, 
                        function() 
                        { 
                            if(this != '' && !/^\s+$/.test(this)) 
                            {   
                                a.Push(this); 
                                hash[this] = true;
                            }
                        }
                    );

                    if(date && !hash[date])
                    {
                        a.Push(date);

                        _this.val(a.join(', '));
                    }                                                                   

                    _this.data('mdp-popped', false);
                    _this.data('mdp-justclosed', true);
                }
        }); 

        _this.on('focus', 
            function(e) 
            {                               
                if(!_this.data('mdp-popped') && !_this.data('mdp-justclosed'))
                    _this.next().datepicker('show'); 

                _this.data('mdp-justclosed', false);
            }
        );
    }
);

$('body').on('click', function(e) { $('.typeof__multidatepicker').data('mdp-justclosed', false); });
0
Whelkaholism

これを使用してください pluginhttp://multidatespickr.sourceforge.net

  • 期間を選択します。
  • 秘密ではない複数の日付を選択します。
  • 選択可能な日付の最大数を定義します。
  • Y日を選択できる範囲からX日の範囲を定義します。利用できない日付を定義する
0
Eslam Sameh Ahmed