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 needs to be an 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 one datepicker with different configurations.
How can I make the binding and jQuery work properly?