none
Formatar campo @html.EditorFor RRS feed

  • Pergunta

  • Tenho numa action create o campo data_nascimento, gostaria de quando o usuário cliclasse nesse campo ele colocasse as barras   /  /  . Tenho um script que faz isso e também verifica se a data é válida, uso esse script em webform como usaria em mvc 3, a chama seria a mesma ?
    Junior
    quarta-feira, 27 de abril de 2011 17:00

Respostas

  • Olá Júnior,

    Vamos parte por parte. Para usar máscara nos campos. Use o seguinte plugin para JQuery?

    http://digitalbush.com/projects/masked-input-plugin/

    A instalação desse plugins, segue a mesma idéia. Coloque os arquivos no projeto, referencie ele na página e aplique a máscara assim:

    $("#date").mask("99/99/9999");

    Para alterar o tema do plugin você pode substituir ou modificar os arquivos CSS, coisas como formas de botões, cores e etc são modificaveis via CSS.

    Abraços!

     

     

     


    MCPD, MCSD, MCAD, MCDBA, MCP, colaborador do 100loop e membro do grupo DotNetRaptors.
    • Marcado como Resposta Junior_luiz sexta-feira, 29 de abril de 2011 13:39
    sexta-feira, 29 de abril de 2011 13:00

Todas as Respostas

  • Boa tarde Júnior Luiz,

    Que tal usar o Date Picker do JQuery UI?

    É muito fácil, baixe a última versão do site http://jqueryui.com/

    E usar como é explicado nesse artigo em detalhes:

    http://towardsnext.wordpress.com/2009/04/10/using-jquery-ui-in-aspnet-mvc/

    abraços!


    MCPD, MCSD, MCAD, MCDBA, MCP, colaborador do 100loop e membro do grupo DotNetRaptors.
    quarta-feira, 27 de abril de 2011 17:28
  • Ivan sou novato em mvc, pelo tutorial que vc me passou baixei os js sendo que baixei o datapicket-pt, estou em dúvida no passo 2 onde ele diz que preciso criar extensão para a classe htmlhelper, onde crio essa classe ? qual  o nome que dou a ela ?

     


    Junior
    quarta-feira, 27 de abril de 2011 18:09
  • Olá Júnior, Crie uma classe chamada DatePickerHelper (DatePickerHelper.cs) na raiz do projeto com a seguinte classe:

     

    public static class DatePickerExtension
    {
    public static string DatePicker(this HtmlHelper htmlHelper, string name)
    {
    return "<input type=\"text\" id=\"" + name +
    "\" name=\"" + name + "\" value=\"\"/>";
    }
    

    Qualquer outra dúvida, pode falar.

    Abraços!

     


    MCPD, MCSD, MCAD, MCDBA, MCP, colaborador do 100loop e membro do grupo DotNetRaptors.
    • Sugerido como Resposta Vinicius Gama quarta-feira, 27 de abril de 2011 18:21
    quarta-feira, 27 de abril de 2011 18:13
  • Bacana a idéia do Helper, deixa mais limpo.

     

    quarta-feira, 27 de abril de 2011 18:21
  • fiz isso e fiz assim também coloquei um script na página e no campo coloquei assim

    @Html.EditorFor(model => model.Data_nascimento,

    new { @class = "datePicker" })

    Mais tanto em um caso como no outro, o que vc me passou, dá erro de script no jquery 1.5 que já vem por padrão qdo vc cria um projeto em mvc3


    Junior
    quinta-feira, 28 de abril de 2011 11:18
  • Bom dia Júnior!

    Você tem que associar o campo que você criou ao DatePicker. Use o código abaixo na sua View:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Data_nascimento").datepicker();
        });
    </script>

    Como adendo verifique se você incluiu esses arquivos (disponíveis através do site do JQueryUI) abaixo:

    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.5.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.datepicker.js"></script>

    Abraços!


    MCPD, MCSD, MCAD, MCDBA, MCP, colaborador do 100loop e membro do grupo DotNetRaptors.
    quinta-feira, 28 de abril de 2011 13:39
  • Ivan funcionou, sendo que a imagem do calendário sai sobre os campos, já que esse campo de data é o úlitmo na view e outra, os meses saem em ingles como eu modifico isso ?
    Junior
    quinta-feira, 28 de abril de 2011 14:39
  •  

    Olá Júnior,

    Fico feliz que tenha funcionado.

    Para fazer esses pequenos ajustes, você terá que adicionar mais alguns arquivos ao projeto:

    Arquivo jquery.ui.all.css e a pasta de imagens na pasta Content.

    Arquivo jquery.ui.datepicker-pt-BR.js na pasta Scripts.

    Coloque as seguintes chamadas no seu arquivo _layout.cshtml:

    <link rel="stylesheet" href="@Url.Content("~/Content/jquery.ui.all.css")">
    
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker-pt-BR.js")" type="text/javascript"></script>
    

    Deverá ficar assim:

    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="@Url.Content("~/Content/jquery.ui.all.css")">
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.ui.datepicker-pt-BR.js")" type="text/javascript"></script>
    </head>
    <body>
        <div class="page">
            <div id="header">
                <div id="title">
                    <h1>My MVC Application</h1>
                </div>
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>
                <div id="menucontainer">
                    <ul id="menu">
                        <li>@Html.ActionLink("Home""Index""Home")</li>
                        <li>@Html.ActionLink("About""About""Home")</li>
                    </ul>
                </div>
            </div>
            <div id="main">
                @RenderBody()
            </div>
            <div id="footer">
            </div>
        </div>
    </body>
    </html>
    

    Abraços!


    MCPD, MCSD, MCAD, MCDBA, MCP, colaborador do 100loop e membro do grupo DotNetRaptors.
    • Editado Ivan Paulovich sexta-feira, 29 de abril de 2011 12:32 maisinfo
    sexta-feira, 29 de abril de 2011 12:31
  • Ivan qto ao calendário em portugues eu já tinha conseguido, sendo que estou no evento create e após esse campo tenho um botão(gravar), está acontecendo que o calendário não está aparecendo como no tutorial que vc me mandou, ou seja abaixo do textbox e sim acima, e fica por cima dos outros textbox da página create, assim o calendário não fica totalmente visível, outra coisa é que o meu calendário não aparece com aquele thema do tutorial aparece meio transparente, como eu adiciono o thema ao calendário ?

    Aproveitando queria saber tb como eu faço para simplesmente como em webforms eu clicar no campo(data por exemplo) e conforme eu digite ele vá formatando, é que nesse caso como o campo é data nascimento o calendário complica mais para o usuário, é mais interessante que ele informe a data e o campo formate ex : 04/01/1974.

    Outra coisa, como eu mudo os botões padrões do mvc, achei eles com um formato feio, queria personalizar, faço isso via css ou tem algum jquery que mude o thema dos botões(botões padrão windows, etc) como o calendário ? 

     

     


    Junior
    sexta-feira, 29 de abril de 2011 12:44
  • Olá Júnior,

    Vamos parte por parte. Para usar máscara nos campos. Use o seguinte plugin para JQuery?

    http://digitalbush.com/projects/masked-input-plugin/

    A instalação desse plugins, segue a mesma idéia. Coloque os arquivos no projeto, referencie ele na página e aplique a máscara assim:

    $("#date").mask("99/99/9999");

    Para alterar o tema do plugin você pode substituir ou modificar os arquivos CSS, coisas como formas de botões, cores e etc são modificaveis via CSS.

    Abraços!

     

     

     


    MCPD, MCSD, MCAD, MCDBA, MCP, colaborador do 100loop e membro do grupo DotNetRaptors.
    • Marcado como Resposta Junior_luiz sexta-feira, 29 de abril de 2011 13:39
    sexta-feira, 29 de abril de 2011 13:00