daterangepicker not work when i use asp-for why and what is the solution

Hi,

Understanding

The daterangepicker is not working when you add asp-for="PublishingDate" to the input element. This is a common issue when using ASP.NET Core tag helpers with Metronic's jQuery-based plugins.

Cause

The asp-for attribute generates the input with a different id and name attribute than what you specified. ASP.NET Core creates the id based on the model path (e.g., PublishingDate becomes ``), so the selector #kt_daterangepicker_3 may not match the rendered element.

Also, the maxDate option has a small bug:

maxDate: parseInt(moment().format("YYYY"), 12)

The radix should be 10, not 12.

Solution

Either match the generated id or use a class selector:

Option A — Match ASP.NET id:

$("#PublishingDate").daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  autoUpdateInput: true,
  autoApply: true,
  drops: 'up',
  maxDate: parseInt(moment().format("YYYY"), 10)
});

Option B — Use a class and remove asp-for:

<input type="text" class="form-control form-control-solid daterangepicker-input"
       placeholder="Publishing Date"  />

$(".daterangepicker-input").daterangepicker({
  // ... same options
});

Option C — Use asp-for with a matching selector: Check your rendered HTML (view source) to see the actual id ASP.NET generated, then use that.

Sources

• Metronic v9 Docs - Date Range Picker
• ASP.NET Core generates input id from the model expression

This reply was generated by AI. A human will follow up if needed.