How to display a null date in a Net Core view - asp.net-core-mvc

Question

I have a model with date type properties that can be null
[Display(Name = "Vig. Conf.")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true, NullDisplayText = "-")]
public DateTime? VigenciaConfeccion
{
get => _vigenciaConfeccion;
set
{
if (_vigenciaConfeccion != value)
{
_vigenciaConfeccion = value;
OnPropertyChanged(nameof(VigenciaConfeccion));
}
}
}
This is the view that where the error is generated in the format of the three date labels.
#model WebProcesoTela.Models.VDiagramaDetailModel
#{
// ViewData["Title"] = "Details";
Layout = null;
}
<div class = "container-fluid">
<h2>Detalle del renglón</h2>
<hr/>
<div class="row">
<div class="col-sm-2">
<label asp-for="DiagramaId" class="control-label">#Html.DisplayNameFor(model => model.DiagramaId)</label>
<input asp-for="DiagramaId" class="form-control text-center" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="DiagramaDetailId" class="control-label">#Html.DisplayNameFor(model => model.DiagramaDetailId)</label>
<input asp-for="DiagramaDetailId" class="form-control text-center" readonly disabled/>
</div>
<div class="col-sm-4">
<label asp-for="CompradorName" class="control-label">#Html.DisplayNameFor(model => model.CompradorName)</label>
<input asp-for="CompradorName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="ClaveLinea" class="control-label">#Html.DisplayNameFor(model => model.ClaveLinea)</label>
<input asp-for="ClaveLinea" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="VigenciaBonmoro" class="control-label">#Html.DisplayNameFor(model => model.VigenciaBonmoro)</label>
<input type="date" asp-for="VigenciaBonmoro" asp-format="{0:yyyy-MM-dd}" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label asp-for="VigenciaBannio" class="control-label">#Html.DisplayNameFor(model => model.VigenciaBannio)</label>
<input type="date" asp-for="VigenciaBannio" asp-format="{0:yyyy-MM-dd}" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="VigenciaConfeccion" class="control-label">#Html.DisplayNameFor(model => model.VigenciaConfeccion)</label>
<input type="date" asp-for="VigenciaConfeccion" asp-format="{0:yyyy-MM-dd}" class="form-control" readonly disabled/>
</div>
<div class="col-sm-8">
<label asp-for="ComentariosTejido" class="control-label">#Html.DisplayNameFor(model => model.ComentariosTejido)</label>
<input asp-for="ComentariosTejido" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label asp-for="FolioTejido" class="control-label">#Html.DisplayNameFor(model => model.FolioTejido)</label>
<input asp-for="FolioTejido" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="FolioTejedor" class="control-label">#Html.DisplayNameFor(model => model.FolioTejedor)</label>
<input asp-for="FolioTejedor" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="Bannio" class="control-label">#Html.DisplayNameFor(model => model.Bannio)</label>
<input asp-for="Bannio" class="form-control" readonly disabled/>
</div>
<div class="col-sm-3">
<label asp-for="TejedorName" class="control-label">#Html.DisplayNameFor(model => model.TejedorName)</label>
<input asp-for="TejedorName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-3">
<label asp-for="AcabadorName" class="control-label">#Html.DisplayNameFor(model => model.AcabadorName)</label>
<input asp-for="AcabadorName" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label asp-for="DeptoCategoriaName" class="control-label">#Html.DisplayNameFor(model => model.DeptoCategoriaName)</label>
<input asp-for="DeptoCategoriaName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="PedidoInterno" class="control-label">#Html.DisplayNameFor(model => model.PedidoInterno)</label>
<input asp-for="PedidoInterno" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="ModeloId" class="control-label">#Html.DisplayNameFor(model => model.ModeloId)</label>
<input asp-for="ModeloId" class="form-control" readonly disabled/>
</div>
<div class="col-sm-4">
<label asp-for="PiezaName" class="control-label">#Html.DisplayNameFor(model => model.PiezaName)</label>
<input asp-for="PiezaName" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label asp-for="Variante" class="control-label">#Html.DisplayNameFor(model => model.Variante)</label>
<input asp-for="Variante" class="form-control text-center" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="TipoFondoName" class="control-label">#Html.DisplayNameFor(model => model.TipoFondoName)</label>
<input asp-for="TipoFondoName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-6">
<label asp-for="ColorName" class="control-label">#Html.DisplayNameFor(model => model.ColorName)</label>
<input asp-for="ColorName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="CodigoColorProv" class="control-label">#Html.DisplayNameFor(model => model.CodigoColorProv)</label>
<input asp-for="CodigoColorProv" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<label asp-for="TipoCuelloName" class="control-label">#Html.DisplayNameFor(model => model.TipoCuelloName)</label>
<input asp-for="TipoCuelloName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="GpoCodigoTallaName" class="control-label">#Html.DisplayNameFor(model => model.GpoCodigoTallaName)</label>
<input asp-for="GpoCodigoTallaName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="TotalPiezas" class="control-label">#Html.DisplayNameFor(model => model.TotalPiezas)</label>
<input type="text" asp-for="TotalPiezas" class="form-control" readonly disabled/>
</div>
<div class="col-sm-5">
<label asp-for="TelaNameDD" class="control-label">#Html.DisplayNameFor(model => model.TelaNameDD)</label>
<input asp-for="TelaNameDD" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label asp-for="EstampadoId" class="control-label">#Html.DisplayNameFor(model => model.EstampadoId)</label>
<input asp-for="EstampadoId" class="form-control" readonly disabled/>
</div>
<div class="col-sm-3">
<label asp-for="EstampadoName" class="control-label">#Html.DisplayNameFor(model => model.EstampadoName)</label>
<input asp-for="EstampadoName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-7">
<label asp-for="EstampadoEspecificacion" class="control-label">#Html.DisplayNameFor(model => model.EstampadoEspecificacion)</label>
<input asp-for="EstampadoEspecificacion" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label asp-for="CodigoEstampado" class="control-label">#Html.DisplayNameFor(model => model.CodigoEstampado)</label>
<input asp-for="CodigoEstampado" class="form-control" readonly disabled/>
</div>
<div class="col-sm-3">
<label asp-for="HilanderoName" class="control-label">#Html.DisplayNameFor(model => model.HilanderoName)</label>
<input asp-for="HilanderoName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-3">
<label asp-for="HiloNameDD" class="control-label">#Html.DisplayNameFor(model => model.HiloNameDD)</label>
<input asp-for="HiloNameDD" class="form-control" readonly disabled/>
</div>
<div class="col-sm-4">
<label asp-for="HiloComposicion" class="control-label">#Html.DisplayNameFor(model => model.HiloComposicion)</label>
<input asp-for="HiloComposicion" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<label asp-for="HiloGrsMt2" class="control-label">#Html.DisplayNameFor(model => model.HiloGrsMt2)</label>
<input asp-for="HiloGrsMt2" class="form-control" readonly disabled/>
</div>
<div class="col-sm-3">
<label asp-for="TejidoEspecificacion" class="control-label">#Html.DisplayNameFor(model => model.TejidoEspecificacion)</label>
<input asp-for="TejidoEspecificacion" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="TelaAcabadoName" class="control-label">#Html.DisplayNameFor(model => model.TelaAcabadoName)</label>
<input asp-for="TelaAcabadoName" class="form-control" readonly disabled/>
</div>
<div class="col-sm-5">
<label asp-for="Nota" class="control-label">#Html.DisplayNameFor(model => model.Nota)</label>
<input asp-for="Nota" class="form-control" readonly disabled/>
</div>
</div>
<div class="row">
<div class="col-sm-2 offset-sm-6">
<label asp-for="TotalTelaKilos" class="control-label">#Html.DisplayNameFor(model => model.TotalTelaKilos)</label>
<input asp-for="TotalTelaKilos" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="TotalTelaMetros" class="control-label">#Html.DisplayNameFor(model => model.TotalTelaMetros)</label>
<input asp-for="TotalTelaMetros" class="form-control" readonly disabled/>
</div>
<div class="col-sm-2">
<label asp-for="TotalTelaKgsSinMerma" class="control-label">#Html.DisplayNameFor(model => model.TotalTelaKgsSinMerma)</label>
<input asp-for="TotalTelaKgsSinMerma" class="form-control" readonly disabled/>
</div>
</div>
<div class="row"></div>
</div>
<hr />
<div class="form-group">
<!-- Barra de Botones Details Modal -Regresar- -->
<partial name="~/Views/Shared/Controls/_BtnsDetailsModal.cshtml"/>
</div>
When I load the view and the date is null, the "Input tag" shows "dd/MM/yyyy"
The editor asks me to put more details, but I don't know what else to put, since the problem is very simple.
The "input" tags display "dd/mm/yyyy" when the field is null.
What can I do so that it doesn't show me anything?

Answer 1

I think you can try to change the style of the date input. Using onfocu and onblur action
<div class="form-group">
<label asp-for="VigenciaConfeccion" class="control-label"></label>
<input asp-for="VigenciaConfeccion" class="form-control" onfocus="(this.style.color='#000')" onblur="if(!this.value)this.style.color='transparent'" />
<span asp-validation-for="VigenciaConfeccion" class="text-danger"></span>
</div>
#section Scripts{
<script>
$("#VigenciaConfeccion").focus();
$("#VigenciaConfeccion").blur();
</script>
}