none
mvc 4 jquery datepicker mudar tema RRS feed

  • Pergunta

  • Ola galera,

    To tentando mudar o tema do site (MVC 4, FW 4.5, VS2012 Express, C#).

    O campo Data na classe tenho essa definicao:

            [Required]
            [Display(Name = "Date")]
            [DataType(DataType.Date)]
            public System.DateTime FieldDate { get; set; }

    No .CSHTML:

    Na Sescao head:

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    No Body:

            <div class="editor-field">
                @Html.EditorFor(model => model.FieldDate )
                @Html.ValidationMessageFor(model => model.FieldDate )
            </div>


    @section Scripts {
               $(function () {
                $("#FieldDate ").datepicker({
                    numberOfMonths: 3,
                    showButtonPanel: true
                });
            });
    }

    Quando rodo o site o o campo eh apresentado como na figuara abaixo:

    Gostaria que fosse mostrado no formato abaixo:

    O que ja fiz:

     - apaguei o JQuery 1.8.XXX

     - Coloquei o JQuery 1.9.XXX

     - Apagueo os temas da versao 1.8 e coloque os temas da versao 1.9. 

    O que sera que esta errado da para descobrir com essas informacoes?

    Obrigado pela atencao de ante mao.


    quinta-feira, 27 de junho de 2013 23:45

Respostas

  • Olá,

    Faça o seguinte:

    Ao invés de usar EditorFor, use TextBoxFor e dê um id a ele

    @Html.TextBoxFor(model => model.FieldDate, new { id = "FieldDate"} )

    Crie um arquivo javascript e coloque o código nele:

    var $j = jQuery.noConflict();
    
    $j(function calendario()
    {
        $j("#FieldDate").datepicker(
            {
                numberOfMonths: 3,
                showButtonPanel: true   
                
            });
    });
    

    Inclua-o na seção head.

    Att,

    • Marcado como Resposta Flavio Sampaio sexta-feira, 28 de junho de 2013 13:21
    sexta-feira, 28 de junho de 2013 00:06
  • remova a tag [DataType(DataType.Date)], porque ele adiciona no input  type="date" e essa opção faz parte do html 5, o que você está querendo usar é do datepicker do jquery, aqui tem uma lista dos inputs no html 5 http://www.w3schools.com/html/html5_form_input_types.asp
    sexta-feira, 28 de junho de 2013 01:28

Todas as Respostas

  • Olá,

    Faça o seguinte:

    Ao invés de usar EditorFor, use TextBoxFor e dê um id a ele

    @Html.TextBoxFor(model => model.FieldDate, new { id = "FieldDate"} )

    Crie um arquivo javascript e coloque o código nele:

    var $j = jQuery.noConflict();
    
    $j(function calendario()
    {
        $j("#FieldDate").datepicker(
            {
                numberOfMonths: 3,
                showButtonPanel: true   
                
            });
    });
    

    Inclua-o na seção head.

    Att,

    • Marcado como Resposta Flavio Sampaio sexta-feira, 28 de junho de 2013 13:21
    sexta-feira, 28 de junho de 2013 00:06
  • remova a tag [DataType(DataType.Date)], porque ele adiciona no input  type="date" e essa opção faz parte do html 5, o que você está querendo usar é do datepicker do jquery, aqui tem uma lista dos inputs no html 5 http://www.w3schools.com/html/html5_form_input_types.asp
    sexta-feira, 28 de junho de 2013 01:28