JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<input type="text" id="ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_K1ChampDate1__cs" />
JavaScript
$(function() {
function ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_K1ChampDate1__cs_beforeShow(input, inst) {
inst.dpDiv.css({ marginLeft: input.offsetWidth + 'px' });
}
function ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_beforeShowDay(d) {
var dateState, hasEnabledDates, hasDisabledDates, dayToVerify, disabledDates, disabledDatesDescr, enabledDates, enabledDatesDescr, disabledDayPos, enabledDayPos;
dateState = null;
dayToVerify = d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate();
enabledDates = new Array();
enabledDatesDescr = new Array();
disabledDates = new Array("2011-8-28");
disabledDatesDescr = new Array("Today's date is disabled using the beforeShowDay event.");
hasEnabledDates = (enabledDates.length > 0) ? true : false;
hasDisabledDates = (disabledDates.length > 0) ? true : false;
enabledDayPos = $.inArray(dayToVerify, enabledDates);
disabledDayPos = $.inArray(dayToVerify, disabledDates);
if ((hasEnabledDates && enabledDayPos === -1) || (hasDisabledDates && disabledDayPos !== -1)) {
if (hasEnabledDates && enabledDayPos === -1) {
dateState = [false, "", ""];
}
if (hasDisabledDates && disabledDayPos !== -1) {
dateState = [false, "", disabledDatesDescr[disabledDayPos]];
}
}
else if ((hasDisabledDates && disabledDayPos === -1) || (hasEnabledDates && enabledDayPos !== -1)) {
if (hasDisabledDates && disabledDayPos === -1) {
dateState = [true, "", ""];
}
if (hasEnabledDates && enabledDayPos !== -1) {
dateState = [true, "", enabledDatesDescr[enabledDayPos]];
}
}
return dateState;
}
$("#ctl00_CPH_K1ZoneContenu1_Cadr_Section01_Cadriciel_FS_Section01_K1ChampDate1__cs").datepicker({
...