javascript - bootstrap - Mostrar texto adicional junto a las fechas en jQuery UI datepicker

jquery tooltip position

Question

Estoy usando jQuery UI datepicker y quiero mostrar texto adicional dentro de las celdas de fecha al lado de la fecha. Este es el comportamiento deseado:

Desafortunadamente, la manipulación de las celdas de fecha usando las .text() y .html() rompe la funcionalidad de datepicker. Vea la siguiente demostración e intente usar el selector de fecha. Tenga en cuenta que cuando selecciona una fecha (i) el texto personalizado desaparece (ii) el cambio de meses destruye el calendario y lo coloca en el mes "NaN no definido":

https://jsfiddle.net/salman/aLdx4L0y/

¿Hay una solución?

Answer 1

Agrega este código en tu 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);
}
}

Enlace demo ... http://jsfiddle.net/pratikgavas/e3uu9/131/

Answer 2

Bueno, puede aplicar parche a jQuery UI y arriesgarse a romper el código con versiones más nuevas o puede usar devoluciones de llamada documentadas para agregar atributos personalizados data-* a datepicker y mostrarlos usando pseudo-elementos CSS :

$(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">

Aquí hay un JSFiddle actualizado

Nota al margen: no estoy seguro de qué funcionalidad está descompuesta en su demostración, pero dado que esta solución usa devoluciones de llamada documentadas y CSS, creo que es menos probable que se rompa nada en el futuro que el parche de mono.

Answer 3

Dado que el jQuery UI datapicker es bastante monolítico, es difícil mejorarlo limpiamente.

Me gustaría ir con el parche de mono a una de sus funciones internas, concretamente _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>

Answer 4

Hay una solución mucho más simple basada en la respuesta aceptada :

La función beforeShowDay nos permite establecer el atributo "título" para cada fecha. Podemos mostrar el atributo utilizando pseudo elementos 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.1/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>