below is the code of popup and javascript function
<!-- #region Vaibhav Updated Bootstrap 5.3.3 * -->
<!-- DatePicker Text Modal -->
<div class="modal fade" id="DatePickerZoneModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="DatePickerZoneModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" style="min-width: 375px;">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">
@Localizer["lblSelectDate"]
<span class="lblDate fst-italic" style="color:lightgray;"></span>
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="height: 120px; padding: 2.5rem;">
<div id="dvdatezone">
<span class="spnmandatory hide" style="color: red; font-weight: bold; font-size: 18px;">*</span>
<label style="float:left; margin-right: 10px; margin-top: 5px;">Date : </label>
<input type="text" id="txtDatePicker">
</div>
<label id="lblmsg" style="color:red; margin: 0.5rem 4rem; font-size:15px;"></label>
<span data-for="myDatePicker" class="k-invalid-msg"></span>
</div>
<div class="modal-footer">
<button type="button" id="btnDateSave" class="btn btn-default btnCreate" onclick="return UpdateDate();">
<i id="innericon" class="fal fa-check-circle"></i>
<span id="innerdiv">@Localizer["lblSavechanges"]</span>
</button>
<button type="button" class="btn btn-default btnCancel" data-bs-dismiss="modal">
<i id="innericon" class="fal fa-ban"></i>
<span id="innerdiv">@Localizer["lblClose"]</span>
</button>
</div>
</div>
</div>
</div>
// Vaibhav UpdateDate Code for Bootstrap 5.3.3
function UpdateDate() {
var $txtDatePicker = $("#txtDatePicker");
var editor = $("#txtDatePicker").val();
var textZoneId = $("#hdnTextZoneId").val();
var index = textZoneId.split("_");
var frShowDocs = $frShowDocs[0].contentWindow;
var commmentDivtext = frShowDocs.document.getElementById(textZoneId);
var plainText = editor.replace(/<[^>]*>/g, "");
var cnt = 0;
if (frShowDocs.objTxtZoneArray[index[1]] != undefined) {
cnt = 1;
} else {
cnt = 0;
}
//Asingh: first replace <br /> to "!!_!!"
var outputText = plainText.replace(/<br\s*[\/]?>/gi, '!!_!!');
outputText = outputText.replace(/!!_!!/gi, '\n');
console.log('outputText : ' + outputText);
commmentDivtext.innerText = outputText;
jsonInputInfos.TextZones[index[cnt]].RTFTXT = outputText; //<<<ben: To see: should be not html encoded, at the moment if a "é" is here it's saved as "é in the db ...
jsonInputInfos.TextZones[index[cnt]].RTFTXTDECODE = outputText;
//Prab Fix: Client got enccoded french text
frShowDocs.objTxtZoneArray[index[cnt]].lastValue = outputText;
frShowDocs.objTxtZoneArray[index[cnt]].isUpdated = true;
var validator = $txtDatePicker.data("kendoValidator");
if (!validator.validate()) {
return false;
}
$("#DatePickerZoneModal").modal('hide');
return false;
}
// $("#txtDatePicker").on("focus", function () {
// var dp = $(this).data("kendoDatePicker");
// if (dp) dp.open();
// });
function DateZoneModal(clickedDivId, isMandatoryflag) {
if (isMandatoryflag)
$(".spnmandatory").removeClass("hide");
$("#btnDateSave").attr('disabled', false);
var $hdnTextZoneId = $("#hdnTextZoneId");
$hdnTextZoneId.val(clickedDivId.id);
var textZoneId = $hdnTextZoneId.val();
var index = textZoneId.split("_");
$("#lblmsg").text(' ');
//read iframe elemnt
var frShowDocs = $frShowDocs[0].contentWindow;
currentHighlightZone = parseInt(clickedDivId.dataset.highlightid);
frShowDocs.DisplayArrow(currentHighlightZone, true, false);
var commmentDivtext = frShowDocs.document.getElementById(clickedDivId.id);
var zoneText = commmentDivtext.innerText;
zoneText = zoneText.replace(/\n/g, "!!_!!");
zoneText = zoneText.replace(/!!_!!/g, "<br />");
console.log(clickedDivId.dataset.dateformat);
var $txtDatePicker = $("#txtDatePicker");
var $DatePickerZoneModal = $("#DatePickerZoneModal");
// 1. Destroy previous DatePicker instance (if exists)
if ($txtDatePicker.data("kendoDatePicker")) {
$txtDatePicker.data("kendoDatePicker").destroy();
$txtDatePicker.unwrap(); // Removes Kendo's wrapper (important to avoid offset errors)
// $txtDatePicker = $('<input type="text" id="txtDatePicker" />'); // Recreate input
}
setTimeout(function () {
$txtDatePicker.kendoDatePicker({
dateInput: true,
validation: { required: true },
format: clickedDivId.dataset.dateformat,
});
}, 100); // delay ensures modal is fully rendered
$txtDatePicker.kendoValidator({
rules: {
dateValidation: function (input) {
if (input.is('[data-role="datepicker"]')) {
var value = $(input).val();
var dformat = $(input).attr("data-dateformat");
var date = kendo.parseDate(value, dformat);
if (value == "" || !date) {
$("#btnDateSave").attr('disabled', 'disabled');
$("#lblmsg").text(txtdatevalidmsg);
$(input).val('');
return false;
}
else {
$("#btnDateSave").attr('disabled', false);
$("#lblmsg").text(' ');
return true;
}
}
return true;
}
},
messages: {
dateValidation: txtdatevalidmsg
}
});
$txtDatePicker.val(zoneText);
$txtDatePicker.attr("data-dateformat", clickedDivId.dataset.dateformat);
$txtDatePicker.attr('placeholder', clickedDivId.dataset.dateformat.toUpperCase());
$DatePickerZoneModal.find('.lblDate').text('(' + clickedDivId.dataset.dateformat.toUpperCase() + ')');
$('.k-datepicker').attr('style', 'width:initial;');
// $("#lblmsg").text(' ');
//$("#btnDateSave").attr('disabled', false);
$DatePickerZoneModal.modal('show');
}
This the library i am using
