0

Tenho essa razor em minha view:

<div class="form-group">
            @*@Html.LabelFor(model => model.DT_AGENDAMENTO, htmlAttributes: new { @class = "control-label col-md-2" })*@
            @Html.Label("Data de Agendamento", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10" id="datepicker">
                @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DT_AGENDAMENTO, "", new { @class = "text-danger" })
            </div>
        </div>

E no final da página tenho esses scripts:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")

    $(".datepicker").datepicker();
}

Não sei como eu atribuo um ID para o campo: @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control" } }), coloquei o ID na <div>, mas quando renderizo não funciona e também não dá erro de js.

Tentei instalar esse pacote, mas dá erro:

PM> Install-Package DatePickerHTMLHelper

EDIT1

No Dev Tools, peguei esse erro. Disse que não havia erros, mas peguei esse:

GET http://localhost:55839/bundles/jqueryui 404 (Not Found)

EDIT2

Criei uma classe chamada datepicker assim:

@Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control datepicker"

E fiz esse script

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")

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

De qualquer forma não funciona. Não funfa nem por um decreto.

1
  • acredito que você não registrou os Bundles a pagina, normalmente isto é feito no evento Application_Start no arquivo Global.asax realizando alguma chamada envolvendo o BundleTable.Bundles. 11/11/2015 às 18:36

2 Respostas 2

3

Você está confundindo as coisas. Esse pacote que você informou está criando um htmlHelper. Você deveria utilizar isso assim:

@Html.DatePickerFor(model => model.Date, "autoclose=true", "todayBtn=true", "todayHighlight=true")

Como mostra na própria página do pacote.

O script que você está querendo executar é de outro plugin.

Eu não utilizei esse que você demonstrou. Eu gosto muito desse daqui, quando trabalho com bootstrap.

Para utilizar ele com você realiza o download do projeto, o arquivo .js você pode baixar o mesmo aqui e colocar em seu projeto. Feito isso, basta referenciar o script na view e pronto.

    <div class="form-group">
            @*@Html.LabelFor(model => model.DT_AGENDAMENTO, htmlAttributes: new { @class = "control-label col-md-2" })*@
            @Html.Label("Data de Agendamento", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control", id="dp" } })
                @Html.ValidationMessageFor(model => model.DT_AGENDAMENTO, "", new { @class = "text-danger" })
            </div>
        </div>

@section Scripts{
<script src="~/Scripts/bootstrap-datepicker.js"></script>
    <script>
        $(function () {
            $('#dp').datepicker();
        });
    </script>
}

Após isso, você adiciona no BundeConfig, ou faz as alterações que julgar necessário.

Os arquivos completos você encontra no gitHub do projeto.

Lembrando que dessa forma que coloquei irá funcionar somente se possui 1 elemento com o id "dp" (id="#dp"). Para utilizar mais de um, altere para classes (class=".dp") e mude a referencia no script para $(".dp").datepicker();.

Lembrando também, que a forma que coloquei é apenas para "funcionar". Para manter o layout e os demais funcionalidades, faça o download completo do plugin (js + css).

1

Amigão, não funciona o datepicker, ele nao abre, ele abre mas nao joga o valor no input?

Verifique se vc esta usando o BundleConfig com arquivos Minified ".min.js", pq ai ele nao faz o import.

No console, estoura algum erro?

vc colocou a classe datepicker no seu input?

@Html.EditorFor(model => model.DT_AGENDAMENTO, new { htmlAttributes = new { @class = "form-control datepicker " } })

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .