9

一部の日付に特定の価格を表示するには、JqueryUIのdatepickerで一部の日付にカスタムテキストを表示する必要があります。私のアイデアは、beforeShowDayを使用してそのような日付のタイトルに特定の価格を付け、次にbeforeShowで各tdをチェックアウトし、タイトルのテキストをセルに配置することでした。例：

var m, d, y, checkDate, specificPrice = '';    
var specificPrices = {"2013-3-8":"300 EUR", "2013-2-26":"263 EUR"}

$('#my-datepicker').datepicker({
    beforeShowDay:     function checkAvailable(date) {
    m = date.getMonth();
    d = date.getDate();
    y = date.getFullYear();
    checkDate = y + '-' + (m+1) + '-' + d;
    if(specificPrices[checkDate]){
        specificPrice = specificPrices[checkDate];
    }else{
        specificPrice = '';
    }
    return [true, "", specificPrice];
},
    beforeShow: function(elem, inst){
        $('table.ui-datepicker-calendar tbody td', inst.dpDiv).each(function(){
            var calendarPrice = $(this).attr('title');
            if(calendarPrice != undefined){
                $(this).find('a').append('<span class="calendar-price">' + calendarPrice + '<span>');
            }
        });         
    }
});

これにより、最初のカレンダーレンダリング（月/年が変更される前）およびインラインカレンダーのみの価格がレンダリングされます。

インラインではないカレンダーや月/年の変更にも価格を表示する必要があります。

他のいくつかのバリアントを試し、onChangeMonthYearを使用しようとしましたが、これまでのところ成功していません。

ご清聴ありがとうございました、あなたのアイデアは大歓迎です。

4

2 に答える 2

11

私はこの同じシナリオに遭遇し、インラインの日付ピッカーのソリューションを投稿すると思いましたが、ポップアップの日付ピッカーでも機能するはずです。

まず、datepicker プラグインによって作成されたテーブル セルの内容を変更することはできません。これを行うと、セルの内容を読み取って選択した日付文字列を生成するため、コア機能が壊れます。そのため、純粋な css を使用してコンテンツを追加する必要があります。

日付ピッカーを作成する

$('#DatePicker').datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //The calendar is recreated OnSelect for inline calendar
    onSelect: function (date, dp) {
        updateDatePickerCells();
    },
    onChangeMonthYear: function(month, year, dp) {
        updateDatePickerCells();
    },
    beforeShow: function(elem, dp) { //This is for non-inline datepicker
        updateDatePickerCells();
    }
});
updateDatePickerCells();

セルの内容を挿入するメソッドを作成する

function updateDatePickerCells(dp) {
    /* Wait until current callstack is finished so the datepicker
       is fully rendered before attempting to modify contents */
    setTimeout(function () {
        //Fill this with the data you want to insert (I use and AJAX request).  Key is day of month
        //NOTE* watch out for CSS special characters in the value
        var cellContents = {1: '20', 15: '60', 28: '100'};

        //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a)
        $('.ui-datepicker td > *').each(function (idx, elem) {
            var value = cellContents[idx + 1] || 0;

            /* dynamically create a css rule to add the contents with the :after                         
               selector so we don't break the datepicker functionality */
            var className = 'datepicker-content-' + value;

            if(value == 0)
                addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //&nbsp;
            else
                addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');

            $(this).addClass(className);
        });
    }, 0);
}

作成済みの CSS ルールを追跡しながら、その場で新しい CSS ルールを作成するメソッドを追加します。

var dynamicCSSRules = [];
function addCSSRule(rule) {
    if ($.inArray(rule, dynamicCSSRules) == -1) {
        $('head').append('<style>' + rule + '</style>');
        dynamicCSSRules.push(rule);
    }
}

最後に、新しいセル コンテンツ用のデフォルトの CSS です。

.ui-datepicker td a:after
{
    content: "";
    display: block;
    text-align: center;
    color: Blue;
    font-size: small;
    font-weight: bold;
}

これは基本的なコンテンツでは機能しますが、'$20.95' (CSS 特殊文字を含む) のようなものに凝りたい場合は、コンテンツの md5 ハッシュを使用してclassName変数を作成できます。

@yugaの JSFiddleを編集して、より複雑なコンテンツ用の一意のクラス名の MD5 ハッシュを含めるように JSFiddle を編集します。

于 2014-04-02T20:25:04.973 に答える
3

@PrestonS の回答とこの投稿<style>に基づいて、ヘッダーにタグを追加する必要のないシンプルなソリューションがあります。

私のソリューションは、プレストンのものを次のように更新します。

変更されたupdateDatePickerCells機能:

function updateDatePickerCells(dp) {
    /* Wait until current callstack is finished so the datepicker
       is fully rendered before attempting to modify contents */
    setTimeout(function () {
        //Fill this with the data you want to insert (I use and AJAX request).  Key is day of month
        //NOTE* watch out for CSS special characters in the value
        var cellContents = {1: '20', 15: '60', 28: '100'};

        //Select disabled days (span) for proper indexing but apply the rule only to enabled days(a)
        $('.ui-datepicker td > *').each(function (idx, elem) {
            var value = cellContents[idx + 1] || 0;

            /***** MAGIC! *****/

            $(this).attr('data-content', value);

            // and that's it! (oh, so easy)
        });
    }, 0);
}

addCSSRuleこのソリューションでは、関数はまったく必要ありません。

変更された css:

/* to target all date cells */
.ui-datepicker td > *:after {
    content: attr(data-content);  /***** MAGIC! *****/

    /* add your other styles here */
}

/* to target only allowed date cells */
.ui-datepicker td > a:after {
}

/* to target only disabled date cells */
.ui-datepicker td > span:after {
}

datepicker オブジェクトによる初期化

関数でdatepicker オブジェクトが必要な場合updateDatePickerCellsは、初期化時に取得する方法を次に示します。（この投稿に基づく）

var calendarElem = $('#DatePicker').datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    //The calendar is recreated OnSelect for inline calendar
    onSelect: function (date, dp) {
        updateDatePickerCells( dp );
    },
    onChangeMonthYear: function(month, year, dp) {
        updateDatePickerCells( dp );
    },
    beforeShow: function(elem, dp) { //This is for non-inline datepicker
        updateDatePickerCells( dp );
    }
});

var datepicker = $.datepicker._getInst(calendarElem[0]);
updateDatePickerCells(datepicker);
于 2016-09-22T21:48:10.693 に答える