Problema al usar jQuery datepicker en asp.net mvc

Ammad Hassan |

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>

}
Lalji Dhameliya

Aquí el problema con el que no se agregó un jquery-ui.cssarchivo y el otro problema es que ha cargado varios archivos de tiempo jqueryy jquery-uijs. 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 jquerydespués del jquery-uiarchivo 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.cssarchivo

<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>
    }

ingrese la descripción de la imagen aquí

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

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Problema al agregar html para una vista parcial a través de jQuery en ASP.NET MVC Core 3.1

¿Dónde usar / poner jQuery en ASP MVC .Net Core?

Cómo usar jquery en MVC asp.net c #

¿Dónde usar / poner jQuery en ASP MVC .Net Core?

Problema de ASP.NET MVC al resolver DbContext en una clase derivada

NullException al usar model y httppostedfilebase en Entity Framework y ASP.NET MVC

NullException al usar model y httppostedfilebase en Entity Framework y ASP.NET MVC

InvalidOperationException al usar la consulta de selección en ASP.NET Core MVC

El uso de jQuery datepicker en asp.net mvc el valor predeterminado no es nulo

Problema al usar JQuery inseguro en línea y CSP

ASP.NET MVC Problema al enviar objetos de clase a JS: objetos vacíos en la matriz JS

Cuándo usar la palabra clave NEW en C # al crear un objeto en ASP.NET MVC 5

mostrando cargando spinner mientras jquery llama al controlador en ASP.NET MVC

¿Cómo usar jquery con sintaxis razor en asp.net mvc 5?

problema Viewmodel y consulta LINQ en asp.net mvc

Problema con IsAuthenticated en ASP.NET Core 2.2 MVC

Problema de enrutamiento en Asp.net mvc 5

C # - Problema de zona horaria en Asp.Net MVC

Problema con json en asp.net mvc

selectDay error al usar jquery datepicker

Problema en jQuery Datepicker al seleccionar la fecha de inicio y la fecha de finalización

Problema al ejecutar el proyecto después del scaffolding de identidad en el proyecto ASP.NET Core MVC en Linux

Error al validar campos en MVC ASP.NET Core

Autenticar al usuario en ASP.NET MVC con identidades

Problema en la compilación principal de .net al usar Docker en Azure devops

¿Cómo puedo usar DownloadProgressChangedEventHandler en asp.net mvc?

cómo usar applozic en ASP.NET MVC 5

Problema al intentar usar Jackson en java

Problema al usar la consulta en Python