Al intentar usar un control para mostrar y seleccionar una fecha en formato “dd/MM/yyyy”, logré desplegarlo en ASP.NET pero con algunos problemas, si me funcionaba bien en un navegador, no funcionaba en otros o funcionaba bien en Internet Explorer, pero tenía problemas en Chrome.
Por ejemplo: al momento de mostrar datos lo que hacía era mostraba el formato “dd/mm/aaaa” en vez del dato de fecha.
Después de investigar, esta fue la solución que me funciono:
Descargue de http://jqueryui.com/download/ El archivo
jquery-ui-1.11.4.custom.zip. Extraje y copié a la carpeta “Content” el archivo “jquery-ui.css”
Modifiqué el web.config con la configuración de mi país
<system.web>
<globalization uiCulture="es" culture="es-CO"/>
<globalization uiCulture="es" culture="es-CO"/>
</system.web>
Instale desde “NuGet” el complemento “jQuery.UI.Combined”
Agregué en el BundleConfig.cs el llamado a jqueryui
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
Agregué en el BundleConfig.cs en el bundles del css:
,"~/Content/jquery-ui.css"
Agregué el llamado a los bundle en mi clase parcial:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
Modifique mi clase parcial agregando el llamado al datepicker:
<script>
$(document).ready(function () {
$(".datepicker")
.attr('type', 'text')
.datepicker({
monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
monthNamesShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
dateFormat: 'dd/mm/yy',
firstDay: 1,
prevText: '<Ant', prevStatus: '',
prevJumpText: '<<', prevJumpStatus: '',
nextText: 'Sig>', nextStatus: '',
nextJumpText: '>>', nextJumpStatus: '',
currentText: 'Hoy', currentStatus: '',
todayText: 'Hoy', todayStatus: '',
clearText: '-', clearStatus: '',
closeText: 'Cerrar', closeStatus: '',
yearStatus: '', monthStatus: '',
weekText: 'Sm', weekStatus: '',
dayStatus: 'DD d MM',
defaultStatus: '',
changeYear: true,
changeMonth: true,
autoShow: true,
});
});
Cambie LabelFor por un TextBoxFor así
Antes:
@Html.EditorFor(model => model. FechaCreacion, new { htmlAttributes = new { @class = "form-control" } })
Después
@Html.TextBoxFor(model => model.FechaCreacion, @"{0:dd\/MM\/yyyy}", new { @class = "form-control
datepicker" })
Las imágenes de estos pasos las podrás ver a continuación.
El resultado en funcionamiento en los exploradores lo podrás apreciar en el siguiente gráfico:
Para finalizar les recuerdo:
- Cada quien tiene su manera de matar pulgas, así que puede haber una gran cantidad de maneras de hacer el mismo trabajo.
- Esto es un ejemplo, así que, si tienes alguna observación, para mejorar el artículo, será bienvenida.
- No asumo ninguna responsabilidad por el uso de lo aquí explicado.
- No olvides dejar un comentario.