Quiero agregar el selector de fecha de Jquery al formulario TimeofCreation. No puedo obtener el selector de fechas ni un botón de selección. Ayude a utilizar el selector de fechas con jquery.
Quiero que aparezca un calendario de fechas cuando el usuario haga clic en el formulario TimeofCreation.
Código de clase de donante de la siguiente manera
public class Donor
{
[Key]
public int Id { get; set; }
public string FullName { get; set; }
public int PhoneNumber { get; set; }
public DateTime TimeofCreation { get; set; }
public string Emergency { get; set; }
public string Address { get; set; }
public BloodType BloodList { get; set; }
public string BagsNumber { get; set; }
public DateTime LastTimeDonation { get; set; }
}
Mi código de vista de la siguiente manera.
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new {
@class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TimeofCreation, new {
htmlAttributes = new { @class = "datepicker" } })
@Html.ValidationMessageFor(model => model.TimeofCreation, "", new
{ @class = "text-danger" })
</div>
</div>
@section Scripts {
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
<script>
$('.datepicker').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
</script>
</script>
}
Aquí el problema con el que no se agregó un jquery-ui.css
archivo y el otro problema es que ha cargado varios archivos de tiempo jquery
y jquery-ui
js. use el archivo js de script externo o use bundle.
y también el orden de su archivo de script externo es incorrecto, debería ser el primero jquery
después del jquery-ui
archivo de uso
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
por ejemplo, utilicé esto y eliminé el paquete.
y agrega tu jquery-ui.css
archivo
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
después de eso puedes ver tu datepicker
después de los cambios, el código se ve así
@model MVC5.Models.Donor
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TimeofCreation, new { htmlAttributes = new { @class = "datepicker" } })
@Html.ValidationMessageFor(model => model.TimeofCreation, "", new { @class = "text-danger" })
</div>
</div>
}
@section Scripts {
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.datepicker').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
</script>
}
Espero que esto te ayude. avíseme si necesita más información.
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras