Asp.Net + MVC: Mostrar DatePicker con formato “dd/mm/yyyy”

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"/>

</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&eacute;rcoles', 'Jueves', 'Viernes', 'S&aacute;bado'],

                    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mi&eacute;', 'Juv', 'Vie', 'S&aacute;b'],

                    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'S&aacute;'],

                    dateFormat: 'dd/mm/yy',

                    firstDay: 1,

                    prevText: '&#x3c;Ant', prevStatus: '',

                    prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '',

                    nextText: 'Sig&#x3e;', nextStatus: '',

                    nextJumpText: '&#x3e;&#x3e;', 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,

                });

        });

    </script>


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.