Add a DateTime Picker?

Question

I want to add a date time picker in HTML5 using MVC5 , as i created Datatype Date Time in Database.... So how to show Date Time picker??. I tried the following

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")
@Styles.Render("~/Content/Jcss")

<script src="~/Scripts/jquery-2.1.3.js"></script>
<script src="~/Scripts/jquery.datetimepicker.js"></script>

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

And in HTML

<div class="col-md-6">
    <input type="text" name="DeliveryDate" id="DeliveryDate" />
    @Html.ValidationMessageFor(model => model.DeliveryDate, "", new { @class = "text-danger" })
</div>

do you see any errors in the console like "$ is not defined"? why is `jquery` reference added after `jquery-ui` and `jqueryval`? Try adding `` reference on top and try — adiga, Sep 05 '17 at 12:34

score 0 · Answer 1 · answered Sep 05 '17 at 16:22

You can use input type="date" in HTML5 but it's not well supported. current version of Firefox doesn't support it so you likely to have a lot of trouble getting it worked.

I am using this plugin in my current project https://eonasdan.github.io/bootstrap-datetimepicker/

score 0 · Accepted Answer · answered Sep 06 '17 at 09:07

Here is Answer to the question

Add this in header

  <link href="~/Content/bootstrap-datetimepicker.css" rel="stylesheet" />
  <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

Now scripts (Placing at foot):

 @section Scripts {
 @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker();
    });
  </script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.js"></script>

Add a DateTime Picker?

2 Answers2