none
Problemas Al editar Fecha no representa la fecha, sino la plantilla. RRS feed

  • Pregunta

  • Hola:

    Estoy editando un registro metido y al hacerlo con editorfor no me muestra la fecha que viene del registro sino la plantilla.

    Y si lo hago con el textboxfor si muestra la fecha.

    El código para ver los dos casos es el siguiente:

    <div class="form-group">
                @Html.LabelFor(model => model.Fecha, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                     @Html.EditorFor(model => model.Fecha, new { htmlAttributes = new { @class = "form-control" } })
                     @Html.TextBoxFor(model => model.Fecha,new {id="Fecha", @Value = Model.Fecha.ToString("dd/MM/yyyy"), @class = "form-control" })
                     @Html.ValidationMessageFor(model => model.Fecha, "", new { @class = "text-danger" })
                 </div>
    </div>

    Y el resultado es el siguiente:

    Como podeis ver en el editorfor no me muestra la fecha sino la plantilla.

    El problema que tengo con el textboxfor es que si introduzco una fecha (ej. 28/04/18) me da error de validación y me pone que introduzca una fecha, por lo que veo el formato que entiende es MM/dd/yy y por eso me da el error, pero no se como puedo solucionarlo.

    Un Saludo y Gracias.

    domingo, 29 de abril de 2018 23:05

Todas las respuestas

  • ¿Qué tipo de datos tiene la propiedad Fecha del modelo?  ¿Utiliza usted plantillas personalizadas en las carpetas DisplayTemplates o EditorTemplates?

    Corra su código y extraiga el HTML generado correspondiente a ambas casillas de texto.


    Jose R. MCP
    Code Samples

    martes, 1 de mayo de 2018 8:52
  • Hola:

    En la propiedad fecha en el modelo tengo lo siguiente:

    [Required]
            [Display(Name = "Date Entrie")]
            [DataType(DataType.Date)]
            public DateTime Fecha { get; set; }

    Y no tengo creados DisplayTemplates ni EditorTemplates

    Un Saludo.

    martes, 1 de mayo de 2018 10:32
  • Faltó el HTML generado.

    Jose R. MCP
    Code Samples

    martes, 1 de mayo de 2018 17:26
  • Hola:

    El html es el siguiente:

    <div class="form-group">
         @Html.LabelFor(model => model.Fecha, htmlAttributes: new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.EditorFor(model => model.Fecha, new { htmlAttributes = new { @class = "form-control" } })
              @Html.ValidationMessageFor(model => model.Fecha, "", new { @class = "text-danger" })
         </div>
    </div>

    martes, 1 de mayo de 2018 18:39
  • Gracias, pero ese no es el código HTML generado.  El generado es aquel código que se puede ver cuando se examina la página web en el explorador.

    Jose R. MCP
    Code Samples

    martes, 1 de mayo de 2018 18:48
  • Aquí lo tienes:

    <div class="form-group">
        <label class="control-label col-md-2" for="Fecha">Date Entrie</label>
        <div class="col-md-10">
             <input class="form-control" data-val="true" data-val-date="El campo Date Entrie debe ser una fecha." data-val-required="El campo Date Entrie es obligatorio." id="Fecha" name="Fecha" value="31/12/2018" type="string"> 
             <span class="field-validation-valid text-danger" data-valmsg-for="Fecha" data-valmsg-replace="true"></span>
        </div>
     </div>

    martes, 1 de mayo de 2018 19:24
  • Pues está curioso que diga type="string" porque no es un valor válido.  Según la tabla que se muestra aquí, no hay tal valor.  Debería ser type="text" o type="date".  Tampoco veo el atributo placeholder que sería el que define lo que usted llama plantilla.

    Google Chrome (y tal vez otros) permiten la edición del HTML.  Cargue la página y cambie el código a:

    <input class="form-control" data-val="true" data-val-date="El campo Date Entrie debe ser una fecha." data-val-required="El campo Date Entrie es obligatorio." id="Fecha" name="Fecha" value="31/12/2018" type="text" />

    ¿Muestra el valor con el cambio?


    Jose R. MCP
    Code Samples

    martes, 1 de mayo de 2018 19:42
  • Este es el codigo generado.

    <div class="col-md-10">
         <input class="form-control text-box single-line" data-val="true" data-val-date="El campo Date Entrie debe ser una fecha." data-val-required="El campo Date Entrie es obligatorio." id="Fecha" name="Fecha" value="31/12/2018" type="date">
         <span class="field-validation-valid text-danger" data-valmsg-for="Fecha" data-valmsg-replace="true"></span>
    </div>

    Y esto es lo que sale.

    martes, 1 de mayo de 2018 21:13
  • Según una prueba rápida en jsbin.com, el valor debe ser "2018-12-31".  O sea, en formato ISO 8601.  No tengo en este momento manera de probar en un proyecto MVC el EditorFor(), pero me parecería muy extraño que no lo pusiera en este formato.  ¿100% seguro que no tiene templates en ninguna parte para DateTime?

    Jose R. MCP
    Code Samples

    martes, 1 de mayo de 2018 23:03
  • hola

    >>me da error de validación y me pone que introduzca una fecha, por lo que veo el formato que entiende es MM/dd/yy

    si el problema es la validacion que habilitas en javascript, recuerda que debes configurar la globalidacion en el cliente

    Validate DateFormat In Mvc

    analzia la respuesta de lukyer

    veras como usa la libteria moment.js para asignar el formato correcto de la fecha en la validacion

    Tambien hay otra forma

    ASP MVC 5 Date Format Validation Issue

    especificando al Globalize.culture

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    miércoles, 2 de mayo de 2018 5:24
  • Hola Leandro:

    Y donde hay que poner el siguiente código de lukyer.

    $(function () {
        $.validator.methods.date = function (value, element) {
            return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
        }
    });

    miércoles, 2 de mayo de 2018 16:25
  • Hola:

    El problema de validación lo tengo en otro post (Post con la otra pregunta.), pero el problema que estoy preguntando es que cuando edito un registro, en vez de ponerme la fecha que tiene el registro me pone "dd/mm/aaaa".

    Un Saludo.

    miércoles, 2 de mayo de 2018 17:59
  • Le pone dd/mm/aaaa, creo yo, porque el valor en el atributo value está escrito de una forma que el navegador no entiende.  Según mi prueba en jsbin.com, el único formato que parece entender es ISO 8601.  Sigo sin tener dónde probar MVC así que lo más que le puedo recomendar es determinar por qué Html.EditorFor() está escribiendo el valor del atributo value de esa manera y no de la forma ISO.  Cuando determine esto, su problema, diría yo, se resolverá.

    Jose R. MCP
    Code Samples

    miércoles, 2 de mayo de 2018 18:19
  • Hola:

    Te pongo el código para que los puedas probar en jsbin.com, yo lo he probado y me sale dd/mm/aaaa, cuando value tiene una fecha.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Edit - Mi aplicación ASP.NET</title>
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    
        <script src="/Scripts/modernizr-2.6.2.js"></script>
    
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Nombre de aplicaci&#243;n</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Inicio</a></li>
                        <li><a href="/Home/About">Acerca de</a></li>
                        <li><a href="/Home/Contact">Contacto</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container body-content">
            
    
    
    <h2>Edit</h2>
    
    
    <form action="/Pruebas/Edit/2" method="post"><input name="__RequestVerificationToken" type="hidden" value="BURZL7sMNElL5-2zoic0C2JkgejKAnFbjB3U28_s1mRCpHeZ3tYJe71gAWqqLbd9OQIq_KNR5oWRGQSQydt3c-mUBkqv-fegwEYIbe8J4bc1" />    <div class="form-horizontal">
            <h4>Pruebas</h4>
            <hr />
            
            <input data-val="true" data-val-number="The field PruebasId must be a number." data-val-required="The PruebasId field is required." id="PruebasId" name="PruebasId" type="hidden" value="2" />
    
            <div class="form-group">
                <label class="control-label col-md-2" for="Fecha">Fecha</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-date="The field Fecha must be a date." data-val-required="The Fecha field is required." id="Fecha" name="Fecha" type="date" value="31/05/2018" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Fecha" data-valmsg-replace="true"></span>
                </div>
            </div>
    
            <div class="form-group">
                <label class="control-label col-md-2" for="Numero">Numero</label>
                <div class="col-md-10">
                    <input class="form-control text-box single-line" data-val="true" data-val-number="The field Numero must be a number." data-val-required="The Numero field is required." id="Numero" name="Numero" type="text" value="10.35" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Numero" data-valmsg-replace="true"></span>
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </div>
        </div>
    </form>
    <div>
        <a href="/Pruebas">Back to List</a>
    </div>
    
    
            <hr />
            <footer>
                <p>&copy; 2018 - Mi aplicación ASP.NET</p>
            </footer>
        </div>
    
        <script src="/Scripts/jquery-1.10.2.js"></script>
    
        <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>
    
        
       
    
        
        <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
    
    
       
    
    
    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"appName":"Firefox","requestId":"ca2d0464ea27493baa9c6d67cfdc62fd"}
    </script>
    <script type="text/javascript" src="http://localhost:49966/08a4ef4861024b33895248cf074429a5/browserLink" async="async"></script>
    <!-- End Browser Link -->
    
    </body>
    </html>
    

    miércoles, 2 de mayo de 2018 18:46
  • Hola:

    Por lo que he podido comprabar en dicha página, si el type es date:

    La fecha no sale, pero si quito date y lo cambio por text, entonces si sale:

    Por lo que no le encuentro ningún sentido.....

    Un Saludo.

    miércoles, 2 de mayo de 2018 18:58
  • Claro porque tipo text acepta cualquier valor.  Cuando es tipo date tiene que tener el value en formato ISO 8601.  Si logra corregir esto (que podría utiilizar un EditorTemplate), entonces el valor aparecerá.

    Jose R. MCP
    Code Samples

    miércoles, 2 de mayo de 2018 19:42
  • Muchas Gracias José:

    Al final en el modelo, para que salga la fecha en la edición he tenido que ponerla así:

    Y como puedes ver al editar me sale el formato correctamente:

    Pero en el listado sale el formato al contrario yyyy-MM-dd, y lo que quiero es que me salga como el de arriba.

    miércoles, 2 de mayo de 2018 21:02