none
Criando um novo Helper para Datas RRS feed

  • Pergunta

  • Saudações pessoal,

    Sou super novato em asp.net mvc, mas tenho aprendido bastante e evoluído devagar.

    Nesta evolução, encontrei uma barreira: formatação de datas. Tenho visto muitos posts sobre o assunto, mas não entendo porque não podemos construir uma class com um Helper tipo: @Html.EditDate, @Html.EditDateFor e @Html.LabelDate onde já mostre o calendário e a formatação de barras(99/99/9999) para os edit e a formatação para o LabelDate.

    Já existe isto? Se não, vamos construir?


    Antonio Correia

    domingo, 13 de janeiro de 2013 16:39

Respostas

  • Desculpe a demora da resposta, mas achei uma outra solução bem mais simples e vai ai para quem esta com o mesmo problema.

    O que fiz:

    1. Baixei o jQueryui no www.jqueryui.com;

    2. No projeto, criei uma pasta chamada ui dentro de Script(onde tem os jQuery) ficando: \Scripts\ui

    3. No _Layout.cshtml adicionei os seguintes scripts e css:

        <script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" 
            type="text/javascript"></script>
         <script src="@Url.Content("~/Scripts/ui/jquery-ui-1.8.20.min.js")" 
            type="text/javascript"></script>
    
        <script src="../../Scripts/ui/jquery.ui.datepicker-pt-BR.js"></script>
    
        <script>
            $(function () {
                
                $(".data").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showOn: "button",
                    buttonImage: "../../Content/images/icon_calendar.png",
                    buttonImageOnly: true
                });
            });
      </script>
    
    
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
            rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
            rel="stylesheet"  type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
            rel="stylesheet" type="text/css" />
    

    Na View, altere EditorFor por TextBoxFor ficando assim: 

    @Html.TextBoxFor(model => model.data, new {@Class = "data",  @style = "width:100px;", @readonly =  "readonly" })

    O problema da data foi resolvido usando apenas jQueryui sem a necessidade criar tantos rodeios como o tutoria que existe no Datapicker.

    Como sou programador Delphi, continuo sem entender porque não temos um Helper para data como: @Html.DateLabel e @Html.DataFor.

    Espero ter ajudado a alguém.


     


    Antonio Correia

    terça-feira, 15 de janeiro de 2013 22:58
  • Desculpe a demora da resposta, mas achei uma outra solução bem mais simples e vai ai para quem esta com o mesmo problema.

    O que fiz:

    1. Baixei o jQueryui no www.jqueryui.com;

    2. No projeto, criei uma pasta chamada ui dentro de Script(onde tem os jQuery) ficando: \Scripts\ui

    3. No _Layout.cshtml adicionei os seguintes scripts e css:

        <script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" 
            type="text/javascript"></script>
         <script src="@Url.Content("~/Scripts/ui/jquery-ui-1.8.20.min.js")" 
            type="text/javascript"></script>
    
        <script src="../../Scripts/ui/jquery.ui.datepicker-pt-BR.js"></script>
    
        <script>
            $(function () {
                
                $(".data").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showOn: "button",
                    buttonImage: "../../Content/images/icon_calendar.png",
                    buttonImageOnly: true
                });
            });
      </script>
    
    
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
            rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
            rel="stylesheet"  type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
            rel="stylesheet" type="text/css" />

    Na View, altere EditorFor por TextBoxFor ficando assim: 

    @Html.TextBoxFor(model => model.data, new {@Class = "data",  @style = "width:100px;", @readonly =  "readonly" })

    O problema da data foi resolvido usando apenas jQueryui sem a necessidade criar tantos rodeios como o tutoria que existe no Datapicker.

    Como sou programador Delphi, continuo sem entender porque não temos um Helper para data como: @Html.DateLabel e @Html.DataFor.

    Espero ter ajudado a alguém.


     


    Antonio Correia

    Para ficar mais completo, segue a mascara para que as datas tenham as / da data.

    Segue:

      
     <script>
            $(function () {
                $(".date").datepicker({  
                    changeMonth: true,
                    changeYear: true,
                    showOn: "button",
                    buttonImage: "../../Content/images/icon_calendar.png",
                    buttonImageOnly: true
                });
    
                $('.date').mask('99/99/9999');
                $('.time').mask('99:99');           
                $('.date_time').mask('99/99/9999 99:99:99');
                $('.cep').mask('99999-999');
                $('.phone').mask('9999-9999');
                $('.phone_with_ddd').mask('(99) 9999-9999');
                $('.phone_us').mask('(999) 999-9999');
                $('.mixed').mask('AAA 000-S0S');
            });
      </script>
    
    
    Espero ter ajudado a quem precisar destas informações sobre formatação de data

    Antonio Correia

    quinta-feira, 17 de janeiro de 2013 01:25

Todas as Respostas

  • Que tal setar o DataType para Date e usar o EditFor ou criar um editortemplate?

    [DataType(DataType.Date)]
    public string Date { get; set; }


    http://www.linkedin.com/pub/murilo-kunze/44/191/455

    domingo, 13 de janeiro de 2013 16:45
  • Olá Murilo.

    Olha como esta lá:

    No Model:

    [Required(ErrorMessage = "Campo Data deve ser preenchido", AllowEmptyStrings = false)]
    [DisplayFormat(DataFormatString = "mm/dd/yyyy")]
    [DataType(DataType.Date)]
    [Display(Name = "Data")]
    public Nullable<System.DateTime> data { get; set; }

    No View:

    @Html.EditorFor(model => model.data, new {@style = "width:100px;" })



    Antonio Correia

    domingo, 13 de janeiro de 2013 17:12
  • Com o [Required], o "AllowEmptyString = false" é realmente necessário ?
    domingo, 13 de janeiro de 2013 17:17
  • Não.

    Como sou novato, poderia ajudar-me mostrando como formato esta data e mostro o calendário usando jQuery ?

    Sou muito grato !!! Muito mesmo !!


    Antonio Correia

    domingo, 13 de janeiro de 2013 17:27
  • Claro.

    Aqui explica como fazer isso: Datepicker

    E aqui tem as opções disponíveis nele: Opções Datepicker 

    • Sugerido como Resposta Guilherme MA terça-feira, 15 de janeiro de 2013 16:27
    domingo, 13 de janeiro de 2013 18:29
  • Desculpe a demora da resposta, mas achei uma outra solução bem mais simples e vai ai para quem esta com o mesmo problema.

    O que fiz:

    1. Baixei o jQueryui no www.jqueryui.com;

    2. No projeto, criei uma pasta chamada ui dentro de Script(onde tem os jQuery) ficando: \Scripts\ui

    3. No _Layout.cshtml adicionei os seguintes scripts e css:

        <script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" 
            type="text/javascript"></script>
         <script src="@Url.Content("~/Scripts/ui/jquery-ui-1.8.20.min.js")" 
            type="text/javascript"></script>
    
        <script src="../../Scripts/ui/jquery.ui.datepicker-pt-BR.js"></script>
    
        <script>
            $(function () {
                
                $(".data").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showOn: "button",
                    buttonImage: "../../Content/images/icon_calendar.png",
                    buttonImageOnly: true
                });
            });
      </script>
    
    
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
            rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
            rel="stylesheet"  type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
            rel="stylesheet" type="text/css" />
    

    Na View, altere EditorFor por TextBoxFor ficando assim: 

    @Html.TextBoxFor(model => model.data, new {@Class = "data",  @style = "width:100px;", @readonly =  "readonly" })

    O problema da data foi resolvido usando apenas jQueryui sem a necessidade criar tantos rodeios como o tutoria que existe no Datapicker.

    Como sou programador Delphi, continuo sem entender porque não temos um Helper para data como: @Html.DateLabel e @Html.DataFor.

    Espero ter ajudado a alguém.


     


    Antonio Correia

    terça-feira, 15 de janeiro de 2013 22:58
  • Desculpe a demora da resposta, mas achei uma outra solução bem mais simples e vai ai para quem esta com o mesmo problema.

    O que fiz:

    1. Baixei o jQueryui no www.jqueryui.com;

    2. No projeto, criei uma pasta chamada ui dentro de Script(onde tem os jQuery) ficando: \Scripts\ui

    3. No _Layout.cshtml adicionei os seguintes scripts e css:

        <script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" 
            type="text/javascript"></script>
         <script src="@Url.Content("~/Scripts/ui/jquery-ui-1.8.20.min.js")" 
            type="text/javascript"></script>
    
        <script src="../../Scripts/ui/jquery.ui.datepicker-pt-BR.js"></script>
    
        <script>
            $(function () {
                
                $(".data").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showOn: "button",
                    buttonImage: "../../Content/images/icon_calendar.png",
                    buttonImageOnly: true
                });
            });
      </script>
    
    
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
            rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
            rel="stylesheet"  type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
            rel="stylesheet" type="text/css" />

    Na View, altere EditorFor por TextBoxFor ficando assim: 

    @Html.TextBoxFor(model => model.data, new {@Class = "data",  @style = "width:100px;", @readonly =  "readonly" })

    O problema da data foi resolvido usando apenas jQueryui sem a necessidade criar tantos rodeios como o tutoria que existe no Datapicker.

    Como sou programador Delphi, continuo sem entender porque não temos um Helper para data como: @Html.DateLabel e @Html.DataFor.

    Espero ter ajudado a alguém.


     


    Antonio Correia

    Para ficar mais completo, segue a mascara para que as datas tenham as / da data.

    Segue:

      
     <script>
            $(function () {
                $(".date").datepicker({  
                    changeMonth: true,
                    changeYear: true,
                    showOn: "button",
                    buttonImage: "../../Content/images/icon_calendar.png",
                    buttonImageOnly: true
                });
    
                $('.date').mask('99/99/9999');
                $('.time').mask('99:99');           
                $('.date_time').mask('99/99/9999 99:99:99');
                $('.cep').mask('99999-999');
                $('.phone').mask('9999-9999');
                $('.phone_with_ddd').mask('(99) 9999-9999');
                $('.phone_us').mask('(999) 999-9999');
                $('.mixed').mask('AAA 000-S0S');
            });
      </script>
    
    
    Espero ter ajudado a quem precisar destas informações sobre formatação de data

    Antonio Correia

    quinta-feira, 17 de janeiro de 2013 01:25