Mostra testo aggiuntivo accanto a date in jQuery UI datepicker

Question

Sto usando jQuery UI datepicker e voglio visualizzare testo aggiuntivo all'interno di celle di data accanto alla data. Questo è il comportamento desiderato:

Purtroppo, la manipolazione di cellule data usando .text() e .html() funzioni rompe la funzionalità datepicker. Guarda la demo seguente e prova a usare il datepicker. Si noti che quando si seleziona una data (i) il testo personalizzato è andato (ii) che cambiano mesi distrugge il calendario e le terre che il mese "indefinito nan":

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

C'è una soluzione?

Answer 1

Beh, si può scimmia-patch jQuery UI e il rischio di rompere il codice con le versioni più recenti oppure è possibile utilizzare documentato callback per aggiungere personalizzati data-* attributi per datepicker e visualizzarli utilizzando 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">

Ecco un aggiornamento JSFiddle

---

Nota a margine: io non sono sicuro che la funzionalità è rotto nel vostro demo, ma dal momento che questa soluzione sta usando callback documentati e CSS, credo che sia meno probabile che rompere nulla in futuro di scimmia patching

Answer 2

aggiungere questo codice nel vostro 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); 
} 
} 

Demo link ... http://jsfiddle.net/pratikgavas/e3uu9/131/

Answer 3

Dal momento che l'datapicker jQuery UI è abbastanza monolitica è difficile da migliorare in modo pulito.

Vorrei andare con patch di scimmia una delle sue funzioni interne, vale a dire _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

C'è una soluzione molto più semplice basata su the accepted answer:

la funzione beforeShowDay ci permette di impostare l'attributo "title" per ogni data. Possiamo visualizzare l'attributo utilizzando gli pseudo elementi 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>