blocks|key|4676119|text|此答案使用jQuery+UI+Datepicker，它是一个单独的include。有其他方法可以在不包含jQuery+UI的情况下实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4676120|首先，除了form-control之外，您只需要将datepicker类添加到文本框中|style|CODE|4676121|<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>|code-block|syntax|javascript|4676122|然后，为了确保javascript在文本框呈现后触发，您必须将datepicker调用放入jQuery+ready函数中：|4676123|<script+type="text/javascript">
++++$(function+()+{+//+will+trigger+when+the+document+is+ready
+++++++$('.datepicker').datepicker();+//Initialise+any+date+pickers
++++});
</script>|4676124|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/datepicker/^0|5|K|0|0|5|C|P|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]|$A|15|B|16|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>This answer uses the <a href="http://api.jqueryui.com/datepicker/" rel="noreferrer">jQuery UI Datepicker</a>, which is a separate include.  There are other ways to do this without including jQuery UI.</p>

<p>First, you simply need to add the <code>datepicker</code> class to the textbox, in addition to <code>form-control</code>:</p>

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

<p>Then, to be sure the javascript is triggered after the textbox is rendered, you have to put the datepicker call in the jQuery ready function:</p>

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


blocks|key|170287|text|1.确保首先引用jquery.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170288|2.检查布局，确保调用"~/bundles/bootstrap“|170289|3.检查布局，请参见渲染部分脚本位置，它必须在"~/bundles/bootstrap“之后|170290|4.将"datepicker“类添加到文本框中|170291|5.put+$('.datepicker').datepicker()；in+$(function(){...})；|170292|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>1.make sure you ref jquery.js at first<br>
2.check layout,make sure you call "~/bundles/bootstrap"<br>
3.check layout,see render section Scripts position,it must be after "~/bundles/bootstrap"<br>
4.add class "datepicker" to textbox<br>
5.put $('.datepicker').datepicker(); in $(function(){...});</p>


blocks|key|170383|text|[DataType(DataType.Date)]
public+DateTime+BirthDate+{+get;+set;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|170384|像这样装饰你的模型。可以使用bootstrap日期时间选择器我用了这个。https://github.com/Eonasdan/bootstrap-datetimepicker/|unstyled|offset|length|170385|我想您已经有了用于引导css和js的包。|170386|您的日期选择器捆绑项|170387|+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"));|170388|在布局视图上呈现包|170389|@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")|170390|视图中的HTML|170391|<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>|170392|在视图的末尾添加以下内容。|170393|<script>
++++$(document).ready(function+()+{
++++++++$('.datetimepicker').datetimepicker({
++++++++++++format:+'lll'
++++++++});
++++});
</script>|170394|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Eonasdan/bootstrap-datetimepicker/^0|0|10|1H|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|19|8|@]|9|@$G|1A|H|1B|1|1C]]|A|$]]|$1|I|3|J|5|F|7|1D|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1E|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|F|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$B|C]]|$1|S|3|T|5|F|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$B|C]]|$1|W|3|X|5|F|7|1K|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$B|C]]|$1|10|3|-4|5|F|7|1M|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<pre><code>[DataType(DataType.Date)]
public DateTime BirthDate { get; set; }
</code></pre>

<p>decorate your model like this.
can use a bootstrap date time picker I used this one.
<a href="https://github.com/Eonasdan/bootstrap-datetimepicker/" rel="nofollow">https://github.com/Eonasdan/bootstrap-datetimepicker/</a></p>

<p>I suppose you already have bundles for bootstrap css and js</p>

<p>Your date picker bundle entries</p>

<pre><code> 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"));
</code></pre>

<p>Render bundles on your Layout View</p>

<pre><code>@Styles.Render("~/Content/datepicker")
@Scripts.Render("~/bundles/datePicker")
</code></pre>

<p>Your HTML in view</p>

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

<p>At the end of your view add this.</p>

<pre><code>&lt;script&gt;
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
&lt;/script&gt;
</code></pre>


blocks|key|4676233|text|简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4676234|[DataType(DataType.Date)]
Public+DateTime+Ldate+{get;set;}|code-block|syntax|javascript|4676235|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple: </p>

<pre><code>[DataType(DataType.Date)]
Public DateTime Ldate {get;set;}
</code></pre>


blocks|key|170485|text|检出盾牌UI的Date+Picker+for+MVC。一个功能强大的组件，只需几行代码即可集成：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|170486|@(Html.ShieldDatePicker()
++++.Name("datepicker"))|code-block|syntax|javascript|170487|entityMap|0|LINK|mutability|MUTABLE|url|http://demos.shieldui.com/mvc/datepicker/basic-usage^0|7|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Checkout Shield UI's <a href="http://demos.shieldui.com/mvc/datepicker/basic-usage" rel="nofollow">Date Picker for MVC</a>. A powerful component that you can integrate with a few lines like:</p>

<pre><code>@(Html.ShieldDatePicker()
    .Name("datepicker"))
</code></pre>


blocks|key|4676287|text|在代码中添加@type+=+"date"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4676288|{+@class+=+"form-control",+placeholder+=+"Enter+Drop-off+date+here...",+@type+=+"date"+}|code-block|syntax|javascript|4676289|entityMap^0|6|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Add <code>@type = &quot;date&quot;</code> on your code :</p>
<pre><code>{ @class = &quot;form-control&quot;, placeholder = &quot;Enter Drop-off date here...&quot;, @type = &quot;date&quot; }
</code></pre>


<p>I need some guide lines on how to install a <a href="http://eternicode.github.io/bootstrap-datepicker/">Date Picker</a> Bootstrap 3 on a MVC 5 project using the Razor engine. I found this link <a href="http://icanmakethiswork.blogspot.in/2013/01/twitterbootstrapmvc4-meet-bootstrap.html">here</a> but couldn't make it work in VS2013. </p>

<p>Copying from the example in the later link above I've already done the following: </p>

<pre><code>            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"));
</code></pre>

<p>Then I've added the script to the index view as follow</p>

<pre><code>@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

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

<p>Now, how to call the date picker here?</p>

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


How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?

jQuery

我需要一些关于如何使用引擎在MVC5项目上安装RazorBootstrap3的指南。我找到了这个链接，但不能让它在VS2013中工作。从上面后面的链接中的示例中复制，我已经执行了以下操作：            bundles.Add(new ScriptBundle("~/bundles/bootstrap").In...

问如何使用Razor引擎在MVC 5项目中添加Date Picker Bootstrap 3？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Razor引擎在MVC 5项目中添加Date Picker Bootstrap 3？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Razor引擎在MVC 5项目中添加Date Picker Bootstrap 3？
EN