Ajouter bootstrap/datepicker de jquery pour MVC 5 rasoir vue

J'en ai essayé beaucoup d'exemples. Ils semble être assez simple, mais je ne peux pas le faire fonctionner. Je viens de simple zone de texte, puis je clique sur elle, il ne réagit pas. Scripts suivants sont inclus:

<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/moment-with-locales.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>

Styles

<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/themes/base/css" rel="stylesheet"/>

Modèle

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

Vue:

    @section scripts {

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

    }

    ...

@Html.LabelFor(m => m.OrderDate);
@Html.TextBoxFor(m => m.OrderDate, new {@class = "form-control datepicker" , @id = "datepicker" })
@Html.ValidationMessageFor(model => model.OrderDate, "", new { @class = "text-danger" })

Console dit: TypeError: $(...).datepicker is not a function

  • Toute erreur dans la console?
  • TypeError: $(...).datepicker est pas une fonction
  • Le mettre dans $(document).prêt
  • n'a pas aidé. La même erreur.
  • Le script que vous avez est inclus, bootstrap-datetimepicker.js en supposant que vous souhaitez utiliser, puis son $(".datepicker").datetimepicker(); (pas datepicker()
  • Uncaught TypeError: $(...).datetimepicker n'est pas une fonction localhost:50804/Content/themes/base/css impossible de charger des ressources: le serveur a répondu avec un statut de 404 (Non Trouvé)

InformationsquelleAutor Dmitrij Kultasev | 2016-01-10
  1. 3

    Vous pouvez utiliser les éléments suivants:

    @Html.EditorFor(m => m.OrderDate, new {@class = "form-control datepicker" , @id = "datepicker" })
    InformationsquelleAutor Felix Cen
  2. 1

    Datapicker fait partie de JqueryUI, mais dans votre extrait de code de référence n'est pas de JqueryUI bibliothèque.

    Ici est la lien pour l'installation de jqueryui à l'aide de NuGet

    Il est toujours de bonne pratique à l'utilisation.prêt pour le marquage des événements où il est requis.

         $(document).ready(function() {
            $(".datepicker").datepicker();
        });
    InformationsquelleAutor Harish kakani
  3. 0

    datepicker() n'est pas en JQuery. C'est dans JQueryUI. Je ne vois pas dans votre exemple de code, donc je suppose que c'est là que réside le problème.

    Install-package JQuery.ui.combined de l'emballage de la console du gestionnaire

    Puis ajouter un script de référence (avant votre script) pour le jquery.l'interface utilisateur.{version}.js qui est alors ajoutée.

    InformationsquelleAutor Bubba
  4. 0

    JS:

    <script type="text/javascript">

    $(document).ready(function () {
        $("#StartDate").datepicker({

            //minDate: new Date(),
            showOn: "button",
            buttonImage: "/Content/Themes/images/date.png",
            buttonImageOnly: true,
            buttonText: "Select date",
            onSelect: function (selected_date) {
                var selectedDate = new Date(selected_date);
                var endDate = new Date(selectedDate.getTime());
                $("#StartDate").datepicker("option", "minDate", endDate);
            }
        });

        $('#EndDate').datepicker({
            showOn: "button",
            buttonImage: "/Content/Themes/images/date.png",
            buttonImageOnly: true,
            buttonText: "Select date",
        });


    });


</script>

    @Html.TextBoxFor(m => m.Startdate, nouveau { @class = "form-control espace réservé-correctif requis", @type = "text", @autocomplete = "off", @placeholder = "Date de Début" })

    @Html.TextBoxFor(m => m.Date de fin, de nouvelles { @class = "form-control espace réservé-correctif requis", @type = "text", @autocomplete = "off", @placeholder = "Date de Fin" })

    InformationsquelleAutor Muhafil Saiyed