Comment ajouter un Sélecteur de Date de Bootstrap 3 sur MVC 5 projet à l'aide du moteur de Rasoir?
J'ai besoin de quelques lignes de guide sur la façon d'installer un Sélecteur De Date Bootstrap 3 sur un MVC 5 projet à l'aide du moteur de Rasoir. J'ai trouvé ce lien ici mais je ne pouvais pas le faire fonctionner dans la VS2013.
La copie à partir de l'exemple plus tard dans le 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"));
Puis j'ai ajouté le script de la vue 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>
- Merci de nous montrer votre cshtml/Rasoir code vous travaillez avec des cela ne fonctionne pas. Merci
- Merci pour la réponse. J'ai mis à jour mon post en conséquence
- Je vais le feu jusqu'à VS et voir si je peux le comprendre!
- Avez-vous utiliser NuGet pour ajouter les fichiers ou avez-vous les ajouter manuellement ?
- waqar ahmed est de loin la solution la plus simple.
Vous devez vous connecter pour publier un commentaire.
Cette réponse utilise le jQuery UI Datepicker, qui est séparé comprennent. Il y a d'autres façons de le faire sans y compris jQuery UI.
Tout d'abord, vous devez simplement ajouter les
datepicker
classe à la zone de texte, en plus deform-control
:Alors, pour être sûr que le javascript est déclenché après la zone de texte est affiché, vous devez mettre le datepicker appel dans le jQuery prêt de la fonction:
[DataType(DataType.Date)]
est définie sur un terrain, il devrait ajouter automatiquement ledatepicker
classe css et d'exécuter du js?Cette réponse s'applique simplement la
type=date
attribut HTMLinput
élément et s'appuie sur le navigateur pour la fourniture d'un sélecteur de date. Notez que même en 2017, tous les navigateurs fournissent leur propre sélecteur de date, de sorte que vous pouvez fournir un retour d'automne.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
:En supposant que vous êtes en utilisant MVC 5 et Visual Studio 2013.
[DataType(DataType.DateTime)] public DateTime BirthDate { get; set; }
ne fonctionne pas pour moi.@Html.DisplayFor(model => model.DateFrom)
montre juste la date sous forme de chaîne. À l'aide de Chrome btw@Html.EditorFor(model => model.DateFrom)
J'espère que cela peut aider quelqu'un qui a été confronté à mon problème.
Cette réponse utilise le Bootstrap DatePicker Plugin, ce qui n'est pas natif de bootstrap.
Assurez-vous d'installer Bootstrap DatePicker via NuGet
Créer un petit morceau de JavaScript et nom il DatePickerReady.js enregistrer dans des Scripts dir. Cela permettra de s'assurer qu'il fonctionne même dans les navigateurs HTML5 bien que ceux qui sont rares de nos jours.
Définir les faisceaux
Maintenant définir le Type de données de sorte que lorsque EditorFor est utilisé MVC permettra de déterminer ce que doit être utilisée.
Votre afficher le code doit être
et voila
Ajouter ces deux lignes avant la date de la propriété dans votre modèle
et le résultat sera :
De tenter de fournir un bref de mise à jour, basée sur Enzero's réponse.
Installer le Bootstrap.Datepicker paquet.
Dans AppStart/BundleConfig.cs, ajouter la scripts et les styles dans les bundles.
Dans la vue, dans les scripts de section, activer et personnaliser datepicker.
Éventuellement ajouter le datepicker classe dans le contrôle. Par exemple, dans une zone de texte et un format de date dans le genre de "31/12/2018" ce serait:
décorer votre modèle comme celui-ci.
pouvez utiliser un bootstrap date time picker j'ai utilisé celui-ci.
https://github.com/Eonasdan/bootstrap-datetimepicker/
Je suppose que vous avez déjà des ensembles de bootstrap css et js
Votre sélecteur de date bundle entrées
Rendu des faisceaux sur votre page
Votre HTML en vue
À la fin de votre point de vue ajouter ce.
1.assurez-vous de ref jquery.js au premier
2.vérifier la mise en page,assurez-vous que vous appelez "~/bundles/bootstrap"
3.vérifier la mise en page,consultez rendu de la section Scripts position,il doit être après "~/bundles/bootstrap"
4.ajouter une classe "datepicker" à la zone de texte
5.mettre $('.datepicker').datepicker(); dans $(function(){...});
Caisse Bouclier de l'INTERFACE utilisateur de Sélecteur de Date pour MVC. Un composant puissant que vous pouvez intégrer à quelques lignes comme:
Simple: