我正在使用jQuery UI日期選擇器,我想在日期旁邊的日期單元格中顯示其他文本。這是所期望的行爲:在jQuery UI日期選擇器旁邊顯示其他文本日期選擇器
遺憾的是,操縱使用.text()
和.html()
功能日期細胞打破了日期選擇器功能。看下面的演示,並嘗試使用datepicker。請注意,當您選擇一個日期(我)的自定義文本消失(二)改變幾個月破壞了日曆和土地你「未定義NAN」一個月:
https://jsfiddle.net/salman/aLdx4L0y/
有沒有解決方案?
我正在使用jQuery UI日期選擇器,我想在日期旁邊的日期單元格中顯示其他文本。這是所期望的行爲:在jQuery UI日期選擇器旁邊顯示其他文本日期選擇器
遺憾的是,操縱使用.text()
和.html()
功能日期細胞打破了日期選擇器功能。看下面的演示,並嘗試使用datepicker。請注意,當您選擇一個日期(我)的自定義文本消失(二)改變幾個月破壞了日曆和土地你「未定義NAN」一個月:
https://jsfiddle.net/salman/aLdx4L0y/
有沒有解決方案?
好了,你可以猴子補丁的jQuery UI和風險打破在新版本中,也可以使用記錄的回調來定製data-*
屬性添加到日期選擇器,並使用CSS pseudo elements顯示它們的代碼:
$(function() {
$("#datepicker").datepicker({
beforeShow: addCustomInformation,
//---^----------- if closed by default (when you're using <input>)
beforeShowDay: function(date) {
return [true, date.getDay() === 5 || date.getDay() === 6 ? "weekend" : "weekday"];
},
onChangeMonthYear: addCustomInformation,
onSelect: addCustomInformation
});
addCustomInformation(); // if open by default (when you're using <div>)
});
function addCustomInformation() {
setTimeout(function() {
$(".ui-datepicker-calendar td").filter(function() {
var date = $(this).text();
return /\d/.test(date);
}).find("a").attr('data-custom', 110); // Add custom data here
}, 0)
}
.ui-datepicker .weekend .ui-state-default {
background: #FEA;
}
.ui-datepicker-calendar td a[data-custom] {
position: relative;
padding-bottom: 10px;
}
.ui-datepicker-calendar td a[data-custom]::after {
/*STYLE THE CUSTOME DATA HERE*/
content: '$' attr(data-custom);
display: block;
font-size: small;
}
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id="datepicker">
這裏有一個更新的JSFiddle
附註:我不知道它的功能是在您的演示打破了,但由於該解決方案是使用記錄的回調和CSS,我認爲這是不太可能打破在今後的任何東西比猴子修補
這段代碼添加到您的JS ......
$('#DatePicker').datepicker({
changeMonth: true,
changeYear: true,
minDate: 0,
onSelect: function (date, dp) {
updateDatePickerCells();
},
onChangeMonthYear: function(month, year, dp) {
updateDatePickerCells();
},
beforeShow: function(elem, dp) {
updateDatePickerCells();
}});
updateDatePickerCells();
function updateDatePickerCells(dp) {
setTimeout(function() {
var cellContents = {1: '20', 15: '60', 28: '$99.99'};
$('.ui-datepicker td > *').each(function (idx, elem) {
var value = '$125';//cellContents[idx + 1] || 0;
var className = 'datepicker-content-' + CryptoJS.MD5(value).toString();
if(value == 0)
addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); //
else
addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');
$(this).addClass(className);
});
}, 0);
}
var dynamicCSSRules = [];
function addCSSRule(rule) {
if ($.inArray(rule, dynamicCSSRules) == -1) {
$('head').append('<style>' + rule + '</style>');
dynamicCSSRules.push(rule);
}
}
如果你想文本只爲選定的日期,那麼你可以聲明它在cellContents數組...例如var cellContents = {1:'20',15:'60',28:'$ 99.99'};其中1,15,28是日期,20,60,999.99是值 –
由於jQuery UI的datapicker很整體,很難清潔增強。
我會去猴子修補其內部功能之一,即_generateHTML
。
$.datepicker._generateHTML = (function() {
var realGenerateHtml = $.datepicker._generateHTML;
return function (instance) {
var html = realGenerateHtml.apply(this, arguments), $temp;
if (instance.input.is(".datepicker-price")) {
$temp = $("<table></table>").append(html);
$temp.find(".ui-datepicker-calendar td a").each(function() {
var yy = $(this).parent().data("year"),
mm = $(this).parent().data("month"),
dd = +$(this).text();
$(this).append("<br><small class='price'>$100</small>");
});
html = $temp[0].innerHTML;
}
return html;
};
})();
$(function() {
$("#datepicker").datepicker();
});
.ui-datepicker .weekend .ui-state-default {
background: #FEA;
}
.price {
color: blue;
}
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div id="datepicker" class="datepicker-price"></div>
Monkey修補'_generateHTML'函數...爲什麼我不這麼想? –
這實際上是否完全工作?當我點擊一個日期並點擊右側或左側箭頭時,它會顯示「未定義的NaN」,日期會消失。如果我沒有點擊日期框,只需點擊箭頭,一切都很好,月份會發生變化。 – SacWebDeveloper
是的,它的確如此。我在三個瀏覽器中測試過它。不知道它會在哪裏顯示「未定義的NaN」嗎?請製作一個證明問題的jsFiddle。 – Tomalak
有基於the accepted answer一個更簡單的解決方案:
的beforeShowDay
功能允許我們設置每個日期「標題」屬性。我們可以使用CSS僞元素來顯示屬性。
$(function() {
var dayrates = [100, 150, 150, 150, 150, 250, 250];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var selectable = true;
var classname = "";
var title = "\u20AC" + dayrates[date.getDay()];
return [selectable, classname, title];
}
});
});
@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
.ui-datepicker td span,
.ui-datepicker td a {
padding-bottom: 1em;
}
.ui-datepicker td[title]::after {
content: attr(title);
display: block;
position: relative;
font-size: .8em;
height: 1.25em;
margin-top: -1.25em;
text-align: right;
padding-right: .25em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="datepicker"></div>
如果你不介意觸發_addCustomInformation_功能很多,你可以這樣做[這](https://jsfiddle.net/aLdx4L0y/2/) – Lends