I am currently trying Blazor on a new project. I want a Blazor Form EditForm with a jquery datepicker in it.
The problem is that Form the EditForm to get the value of the datepicker, I think it need to be a InputDate. But if I use an input date, I can’t use jquery to make it look good and still work with EditForm bindings.
Here is the simplified form :
<EditForm id="openReportForm" Model="Model" FormName="openReportForm" OnValidSubmit="OpenReport">
<p>
<span class="green">Date :</span><br />
<span>Du :</span><input type="button" id="prevDayBtn" value="<">
<InputText id="datepicker" class="oa-datepicker" @bind-Value="Model.SelectedDateTimeStr" />
<!--<input type="text" id="datepicker" class="oa-datepicker" @bind-value="Model.SelectedDateTime">-->
<input type="button" id="nextDayBtn" value=">">
</p>
<br /><br />
<button id="btnDisplayReport" type="submit" class="btn oa-ui-button">Afficher</button>
</EditForm>Here is the current code to design the datepicker with jquery:
function configureDatepicker(datepickerName, fieldName) {
$(datepickerName).datepicker({
dateFormat: "DD, d MM yy",
showAnim: "slideDown",
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
maxDate: "+0D",
onClose: function (dateText, inst) {
var date = $(this).datepicker('getDate');
// Mettez à jour la valeur du champ de modèle C# lorsque l'utilisateur sélectionne une nouvelle date
$(fieldName).val(date.toISOString().split('T')[0]);
// Sauvegardez la date sélectionnée dans le localStorage
sessionStorage.setItem(datepickerName, date.getTime());
},
onSelect: function (dateText, inst) {
var date = $(this).datepicker('getDate');
// Mettez à jour la valeur du champ de modèle C# lorsque l'utilisateur sélectionne une nouvelle date
$(fieldName).val(date.toISOString().split('T')[0]);
// Sauvegardez la date sélectionnée dans le localStorage
sessionStorage.setItem(datepickerName, date.getTime());
}
});
}Note that in the end, it will be more than 1 datepicker with different configuration.
How can I make the binding and jquery work properly?