web-dev-qa-db-fra.com

Comment ajouter un sélecteur de date Bootstrap 3 sur un projet MVC 5 utilisant le moteur Razor?

J'ai besoin de quelques lignes directrices sur la façon d'installer un Date Picker Bootstrap 3 sur un projet MVC 5 utilisant le moteur Razor. J'ai trouvé ce lien ici mais je ne pouvais pas le faire fonctionner dans VS2013.

Copier à partir de l'exemple dans le dernier lien ci-dessus, j'ai déjà fait ce qui suit:

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-datepicker.js",    // ** NEW for Bootstrap Datepicker
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datepicker.css",  // ** NEW for Bootstrap Datepicker
                  "~/Content/site.css"));

Ensuite, j'ai ajouté le script à la vue d'index comme suit

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

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

Maintenant, comment appeler le sélecteur de date ici?

   <div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>
asp.net-mvctwitter-bootstraprazor
72
Ben Junior

Cette réponse utilise le jQuery UI Datepicker , qui est une inclusion distincte. Il existe d'autres moyens de le faire sans inclure l'interface utilisateur de jQuery.

Premièrement, vous devez simplement ajouter la classe datepicker à la zone de texte, en plus de form-control:

<div class="form-group input-group-sm">
    @Html.LabelFor(model => model.DropOffDate)
    @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
    @Html.ValidationMessageFor(model => model.DropOffDate)
</div>

Ensuite, pour être sûr que le javascript est déclenché après le rendu de la zone de texte, vous devez placer l'appel datepicker dans la fonction jQuery ready:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>
75
Karhgath

Cette réponse applique simplement l'élément type=date _] à l'élément HTML input et s'appuie sur le navigateur pour fournir un sélecteur de date. Notez que même en 2017, tous les navigateurs ne fournissent pas leur propre sélecteur de date, vous pouvez donc choisir une solution de secours.

Tout ce que vous avez à faire est d’ajouter des attributs à la propriété dans le modèle de vue. Exemple pour la variable Ldate:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
Public DateTime Ldate {get;set;}

En supposant que vous utilisez MVC 5 et Visual Studio 2013.

50
Keagz93

J'espère que cela peut aider quelqu'un qui a été confronté à mon même problème.

Cette réponse utilise le plugin Bootstrap DatePicker, qui n'est pas natif du bootstrap.

Assurez-vous d’installer Bootstrap DatePicker via NuGet

Créez un petit morceau de JavaScript et nommez-le DatePickerReady.js, sauvegardez-le au répertoire Scripts. Cela fera en sorte que cela fonctionne même dans les navigateurs non HTML5 bien que ceux-ci soient rares de nos jours.

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

Définir les paquets

bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js",
              "~/Scripts/bootstrap-datepicker.js",
              "~/Scripts/DatePickerReady.js",
              "~/Scripts/respond.js"))

bundles.Add(New StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/bootstrap-datepicker3.css",
              "~/Content/site.css"))

Définissez maintenant le type de données de sorte que, lorsque EditorFor est utilisé, MVC identifie ce qui doit être utilisé.

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

Votre code de vue devrait être

@Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}})

et le tour est joué

enter image description here

18
Enzero

Ajoutez juste ces deux lignes avant la propriété datetime dans votre modèle

[DataType(DataType.Date)] 
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

et le résultat sera:Date Picker in MVC Application

14
waqar ahmed

Tentative de fournir une mise à jour concise, basée sur la réponse de Enzero.

  • Installez le package Bootstrap.Datepicker .

    PM> install-package Bootstrap.Datepicker
...
Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...

  • Dans AppStart/BundleConfig.cs , ajoutez les scripts et les styles associés dans les ensembles.

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
      //...,
      "~/Scripts/bootstrap-datepicker.js",
      "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
      ...,
      "~/Content/bootstrap-datepicker3.css"));

  • Dans la vue associée, dans la section des scripts, activez et personnalisez datepicker.

    @section scripts{
    <script type="text/javascript">
        //...
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy', //choose the date format you prefer
            language: "YOUR-LOCALE-CODE-HERE",
            orientation: 'left bottom'
        });
    </script>

  • Ajoutez éventuellement la classe datepicker au contrôle associé. Par exemple, dans une zone de texte et pour un format de date du type "31/12/2018", ceci serait:

    @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
6
stefaleon
[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }

décorez votre modèle comme ça. peut utiliser un sélecteur de date bootstrap J'ai utilisé celui-ci. https://github.com/Eonasdan/bootstrap-datetimepicker/

Je suppose que vous avez déjà des bundles pour bootstrap css et js

Vos entrées de paquet de sélecteur de date

 bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
           "~/Scripts/moment.min.js",
           "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

Rendre les ensembles dans votre mode Mise en page

@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")

Votre HTML en vue

<div class="form-group">
        @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" })
            @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
        </div>
</div>

Ajoutez ceci à la fin de votre vue.

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>
4
dnxit

1. assurez-vous de bien refaire jquery.js au début
2.check layout, assurez-vous d'appeler "~/bundles/bootstrap"
3.check layout, see section render Position des scripts, elle doit se situer après "~/bundles/bootstrap"
4.ajouter la classe "datepicker" à la zone de texte
5.put $ ('. Datepicker'). Datepicker (); dans $ (function () {...});

3
chenZ