Criando um novo Helper para Datas

Question

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

Answer 1

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

Answer 2

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

Answer 3

Com o [Required], o "AllowEmptyString = false" é realmente necessário ?

Answer 4

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

Answer 5

Claro.

Aqui explica como fazer isso: Datepicker

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

Answer 6

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

Answer 7

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('[phone]');
            $('.mixed').mask('AAA 000-S0S');
        });
  </script>

Espero ter ajudado a quem precisar destas informações sobre formatação de data

---

Antonio Correia