none
Formatar campo @html.EditorFor RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    1
    Entrar para Votar
    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    1
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Bacana a idéia do Helper, deixa mais limpo.

     

    quarta-feira, 27 de abril de 2011 18:21
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

     

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
    |