2

In my ASP .NET MVC 5 app, I have a model class:

public class Event
{
    public int Id { get; set; }

    public string Name { get; set; }

    [Display(Name = "Date")]
    [DataType(DataType.DateTime)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime Date { get; set; }
}

In my view I would like to have a date and time picker to be able to set event's date and time in its Date property.

Currently I'm allowing to edit Date using @Html.JQueryUI().DatepickerFor(model => model.Date) in my view, however this only provides me with date picker, there is no hour/minutes to choose.

I've looked through forums and found this post and I would really like to make a use of bootstrap-datetimepicker, but I cannot manage to install and use it properly.

I installed NuGet package Bootstrap.DateTimePicker and tried to put the sample code from here directly into my view:

    <div class="well">
    <div id="datetimepicker1" class="input-append date">
        <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
        <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar">
            </i>
        </span>
    </div>
</div>
<script type="text/javascript">
  $(function() {
    $('#datetimepicker1').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

but it only shows an empty blank textbox, date/datetime picker does not appear at all. I don't even know how to bind this potential DateTimePicker to my model's property Date.

I suppose I forgot about something, maybe including some scripts somewhere? I've looked through the manual and net, but I cannot make it working...

In browser console i have:

ReferenceError: jQuery is not defined jquery-ui-1.11.4.js:14 jquery-ui-1.11.4.js:6 ReferenceError: $ is not defined Error: Bootstrap's JavaScript requires jQuery

Edit: I'm also attaching the contents of my _Layout.cshtml file:

<!DOCTYPE html>
<html>
<head>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
          href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    <link rel="stylesheet" href="/Content/jquery-ui.css"/>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>



    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - NOMU</title>
    @Styles.Render("~/Content/css")

    @*style for vertical tabs*@
    <style>
        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>




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


        <script src="~/Scripts/globalize/globalize.js"></script>
        <script src="~/Scripts/globalize/cultures/globalize.culture.@(System.Threading.Thread.CurrentThread.CurrentCulture.Name).js"></script>
        <script>
            $.validator.methods.number = function(value, element) {
                return this.optional(element) ||
                    !isNaN(Globalize.parseFloat(value));
            }
            $(document).ready(function() {
                Globalize.culture('@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)');
            });
        </script>
        <script>
            jQuery.extend(jQuery.validator.methods, {
                range: function(value, element, param) {
                    //Use the Globalization plugin to parse the value
                    var val = Globalize.parseFloat(value);
                    return this.optional(element) || (
                        val >= param[0] && val <= param[1]);
                }
            });
            $.validator.methods.date = function(value, element) {
                return this.optional(element) ||
                    Globalize.parseDate(value) ||
                    Globalize.parseDate(value, "yyyy-MM-dd");
            }
        </script>

    <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript"
            src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
    </script>
    <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
    </script>
    <script type="text/javascript"
            src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
    </script>
    <script type="text/javascript">
      $('#datetimepicker').datetimepicker({
        format: 'dd/MM/yyyy hh:mm:ss',
        language: 'pt-BR'
      });

        </script>


    }

</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("HOME", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Members", "Index", "Members")</li>
                <li>@Html.ActionLink("Addresses", "Index", "Addresses")</li>
                <li>@Html.ActionLink("Departments", "Index", "Departments")</li>
                <li>@Html.ActionLink("Events", "Index", "Events")</li>
                <li>@Html.ActionLink("Payments", "Index", "Payments")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>&copy; @DateTime.Now.Year - Site Title</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")

@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")



@RenderSection("scripts", required: false)

</body>

</html>

EDIT 2015-12-05:

Thank you for trying to help, but I still cannot find the solution... I will try to provide as many details as possible.

Surely I'm integrating this into my solution bad, as if I create sample HTML file with the HTML code as @coderealm proposed below it of course works.

Ok, so without any datetime picker my view looks that way: enter image description here

Here is the HTML code this view produces:

<!DOCTYPE html>
<html>
<head>
    <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/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>


    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

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



    <style type="text/css">
        ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: block;
        }
    </style>




    <link rel="stylesheet" href="/Content/jquery-ui.css"/>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>


    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - Event</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>



    <style>
        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>







</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">HOME</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/Members">Members</a></li>
                <li><a href="/Addresses">Addresses</a></li>
                <li><a href="/Departments">Departments</a></li>
                <li><a href="/Events">Events</a></li>
                <li><a href="/Payments">Payments</a></li>
                    <li><a href="/Messages/Create">Send message</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Users & Roles</li>
                            <li><a href="/Account/Register">Create new user</a></li>
                            <li><a href="/Roles">Manage roles</a></li>

                        </ul>
                    </li>

            </ul>




<style type="text/css">
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
</style>



<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="esfmyOwwGOynXzXzmRDd8FnKUZX5pNVDXdpcZwtBEq4y5j1d9fPS-0ce2pemBsSi3Yp4l8NOWs5hXvgxQpQP3t-n-9V3P1SuvEurk2RCd9WJO9gilnBwQqgSll4F2WsGHR3NMNKFkrdZD0uy8lJQdw2" />    <ul class="nav navbar-nav navbar-right">
        <li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello user@gmail.com <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Account</li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                <li><a href="/Manage">Manage</a></li>
            </ul>
        </li>
    </ul>
</form>
        </div>
    </div>
</div>
<div class="container body-content">





<h2>Create</h2>

<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="ChQ9Bowi5lfzRdqywpBOd6DW8xX7EDm19zq0IL3f_MqTAjOXPlL6fiK-pLbdDeonHzsCQfWOEQ7lU3j-t1lCBpqGL7rOu1vlapqJpM2zUbcHGicp4QpaIvxrQpOihUlVy9qypWEHhuRHEHJ-Q--rkw2" />    <div class="form-horizontal">
        <h4>Event</h4>
        <hr />



        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Date">Date</label>
            <div class="col-md-10">

                <input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />

                <span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
            </div>
        </div>         

        <div class="form-group">
            <label class="control-label col-md-2" for="Place">Place</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Mandatory">Mandatory</label>
            <div class="col-md-10">
                <div class="checkbox">
                    <input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>



        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>






<div>
    <a href="/Events">Back to List</a>
</div>


    <hr/>
    <footer>
        <p>&copy; 2015 - Title</p>
    </footer>
</div>






<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"841bbc2758464834b8d3ce225ba16e58"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

My field for Date currently uses jquery DatePicker (in the view I just do @Html.JQueryUI().DatepickerFor(model => model.Date) to make use of it) and it displays simple jquery calendar fine, but as I mentioned it's not possible to choose hours. So I decided to use abovementioned bootstrap-datetimepicker, so I installed it from NuGet and:

  1. According to what @coderealm suggested, I put the <head> part of the sample code into my _Layout.cshtml file to be common within all views. I put it just before the end of <head> section: here (sorry for PasteBin, this message is too long already).

And just after pasting this code there when I reload my View it changes its look (it's actually enough to paste only <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> in _Layout.csthml file for this to happen): enter image description here

As you can see, text fields are like smaller, titles are not bold now. BTW, my old jquery Datepicker still works fine at this moment, but I suppose it's not OK that the view of these textboxes and generally the layout is changed. The HTML produced by the above view has now changed for the following one:

<!DOCTYPE html>
<html>
<head>
    <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/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery-ui.unobtrusive-3.0.0.js"></script>


    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

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



    <style type="text/css">
        ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: block;
        }
    </style>




    <link rel="stylesheet" href="/Content/jquery-ui.css"/>

    <script src="/Scripts/jquery-ui-1.11.4.js"></script>


    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - Event</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>



    <style>
        .ui-tabs-vertical .ui-tabs-nav {
            padding: .2em .1em .2em .2em;
            float: left;
            width: 12em;
        }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
        }

        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            border-right-width: 1px;
        }

        .ui-tabs-vertical .ui-tabs-panel {
            padding: 1em;
            float: right;
            width: 40em;
        }
    </style>





   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen"
          href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">HOME</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/Members">Members</a></li>
                <li><a href="/Addresses">Addresses</a></li>
                <li><a href="/Departments">Departments</a></li>
                <li><a href="/Events">Events</a></li>
                <li><a href="/Payments">Payments</a></li>
                    <li><a href="/Messages/Create">Send message</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-header">Users & Roles</li>
                            <li><a href="/Account/Register">Create new user</a></li>
                            <li><a href="/Roles">Manage roles</a></li>

                        </ul>
                    </li>

            </ul>




<style type="text/css">
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    }
</style>



<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="DuIycgdv9rnUap62YqrY4A0imdnNK99uk3sK_LNm8OFv2fj3PKnhDYAp1gr87Cke0r-EDSb2cZGhCoH3x8kcu0bU7GqCQQlHEvntgaRNsqU8rpRcJHzVY40LTk-S56i3OfWeJQGqsc7azegYEodNmw2" />    <ul class="nav navbar-nav navbar-right">
        <li>

        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello test@gmail.com <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="dropdown-header">Account</li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
                <li><a href="/Manage">Manage</a></li>
            </ul>
        </li>
    </ul>
</form>
        </div>
    </div>
</div>
<div class="container body-content">





<h2>Create</h2>

<form action="/Events/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="a-m23Z2lGhcnMvAvJit74BPW2oqJFPsP9qQ4KjUASZobUsiYp5Q48K-rCR7ZjGm4GPD0dihBjBRuMmAVUiIM9qOjojMLFIQ2_X2i0EtgvGUY3OKVJ9BB_wzb8tcTTiN4wxURNAK1M2VDPKjLkjEDig2" />    <div class="form-horizontal">
        <h4>Event</h4>
        <hr />



        <div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Name" name="Name" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Date">Date</label>
            <div class="col-md-10">

                <input data-jqui-dpicker-dateformat="yy-mm-dd" data-jqui-type="datepicker" data-val="true" data-val-date="The field Date must be a date." id="Date" name="Date" type="text" value="" />

                <span class="field-validation-valid text-danger" data-valmsg-for="Date" data-valmsg-replace="true"></span>
            </div>
        </div>         

        <div class="form-group">
            <label class="control-label col-md-2" for="Place">Place</label>
            <div class="col-md-10">
                <input class="form-control text-box single-line" id="Place" name="Place" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="Place" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2" for="Mandatory">Mandatory</label>
            <div class="col-md-10">
                <div class="checkbox">
                    <input class="check-box" id="Mandatory" name="Mandatory" type="checkbox" value="true" /><input name="Mandatory" type="hidden" value="false" />
                    <span class="field-validation-valid text-danger" data-valmsg-for="Mandatory" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>



        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>






<div>
    <a href="/Events">Back to List</a>
</div>


    <hr/>
    <footer>
        <p>&copy; 2015 - Title</p>
    </footer>
</div>






<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"3ca3ab4389224867b6caa3f9435eeb1d"}
</script>
<script type="text/javascript" src="http://localhost:2142/e8ea71ac5d3f49bd91e335052d0353be/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
  1. If I now put the <body>'s part of the sample HTML code provided by @coderealm into my Create.cshtml view file (I put it just before the last div element which adds ActionLink to go back to the Index.cshtml within the same controller): here

It adds the new DateTimePicker, however after choosing the day and time it is stuck in this state:

enter image description here

and I'm not able to close this DatetimePicker, when I click somewhere it does not disappear. The HTML code it produced this time is (sorry I need to put this on PasteBin, as the message's length is exceeded): here.

I hope someone will now be able to help me, as it's already driving me crazy... I'm not originally web developer, so probably I messed something up within my views, maybe I load scripts not properly or something...

Once more - thank you in advance for your help!

Community
  • 1
  • 1
Dawid Sibiński
  • 1,565
  • 1
  • 17
  • 34
  • 1
    Make sure you're leveraging the developer console for your browser which might be outputting errors that would be helpful in troubleshooting. – The Muffin Man Dec 01 '15 at 21:28
  • The errors I get opening this view in developer console: ReferenceError: jQuery is not defined jquery-ui-1.11.4.js:14 jquery-ui-1.11.4.js:6 ReferenceError: $ is not defined Error: Bootstrap's JavaScript requires jQuery – Dawid Sibiński Dec 01 '15 at 21:38
  • @ikS11 show your script section – teo van kot Dec 01 '15 at 21:46
  • @ikS11 Okay, that error is pretty self explanatory. When the bootstrap.js script loaded, jquery.js was not available. This could happen if jquery isn't loaded first. – The Muffin Man Dec 01 '15 at 21:46
  • This is my scripts section in _Layout.cshtml -> http://pastebin.com/PvG94B1w – Dawid Sibiński Dec 01 '15 at 21:47
  • Ok, maybe I will show all my _Layout.cshtml fiile, as probably something is wrong there -> http://pastebin.com/fe5B4vfA – Dawid Sibiński Dec 01 '15 at 21:50
  • Edit relevant code into your question (the edit link is under the tag list), rather than posting a link to pastebin. – Tieson T. Dec 01 '15 at 21:51
  • So there is actually still no answer... Maybe someone knows another better approaches to display date and time in MVC views? – Dawid Sibiński Dec 02 '15 at 10:19
  • I've modified my question with the sample code I used to try, can you take a look once more? The new part starts with "EDIT 2015-12-05". – Dawid Sibiński Dec 05 '15 at 20:16

2 Answers2

1

I finally found the solution.

Regarding my original issue I still don't know what was happening it was not working, however I found another way :).

I decided to make a use of this JQueryUI DateTimePicker addon.

All you need to do to make it working (in my case with my Date field):

  1. You need jQuery and jQueryUI installed within your project (if you are already using jQueryUI.Datepicker you have these already)

  2. Now it's the time to install jQueryUI datetimepicker addon, you have two possibilities:

    A) Install it manually:

    • from this website download .js and .css file (links on the given page under Download section)
    • add the jquery-ui-timepicker-addon.js file into your solution's Scripts folder
    • Add the jquery-ui-timepicker-addon.css into your solution's Content folder

    B) Install using NuGet (I prefer this method):

  3. In your _Layout.cshtml add:

<script type="text/javascript">
    $(function () { $('#selectedDateTime').datetimepicker(); });
</script>

and:

<link rel="stylesheet" media="all" type="text/css" href="/Content/jquery-ui-timepicker-addon.css" />
  1. Finally, in your view use it that way:
<input type="text" id="selectedDateTime" name="Date"/>

This will provide you with that beautiful DateTimePicker:

enter image description here

Remember that this name parameter for input field is the name of the parameter which will be posted while you submit your form.

I hope it helps someone in the future ;).

Thank you for all your time :).

Dawid Sibiński
  • 1,565
  • 1
  • 17
  • 34
0

Copy and paste this in a notepad editor and save it on disk as, name the file test.html. Now open test.html is a web browser and it works. Now follow this file to the later and implement in your solution 

<!DOCTYPE HTML>
    <html>
      <head>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
         href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
      </head>
      <body>
        <div id="datetimepicker" class="input-append date">
          <input type="text"></input>
          <span class="add-on">
            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
          </span>
        </div>
        <script type="text/javascript"
         src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
         src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
         src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
         src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
          $('#datetimepicker').datetimepicker({
            format: 'dd/MM/yyyy hh:mm:ss',
            language: 'pt-BR'
          });
        </script>
      </body>
    <html>
Julius Depulla
  • 1,300
  • 1
  • 10
  • 25
  • I've put these in my scripts section, but it's still not working. – Dawid Sibiński Dec 01 '15 at 21:42
  • Please check in your output (page source) that jQuery is loaded before bootstrap and that you include it only once. You should also keep an eye on your versions - In your question you posted links to bootstrap 3, but @coderealm has linked bootstrap 2.2 - This may can cause (strange) issues. – Lion Dec 01 '15 at 21:49
  • The sources are CDN , so you have to have internet connectivity on your development machine or download the files and add to you solution – Julius Depulla Dec 01 '15 at 21:58
  • I followed the code you provided and datetimepicker appeared! However now I have some other strange issues, this picker does cannot be closed (meaning wrapped after choosing the date) and I found that when I have " @Styles.Render("~/Content/css")" in my _Layout.cshtml it does not work, but when I comment this out it works perfectly fine, so probably some of my css files or scripts inside css folder are causing the issue... – Dawid Sibiński Dec 01 '15 at 22:15
  • Actually the "/Content/bootstrap.css" file is causing the issues. While this file is rendered, it causes layout to behave unexpectedly. If I comment rendering this one, everything is fine... – Dawid Sibiński Dec 01 '15 at 22:21
  • I am not sure if it is right, but you could try re-ordering the call to the scripts. Sometime before i had some issues like this and remeber someone telling this as a solution.. – Vini Dec 02 '15 at 06:31
  • I've tried and it did not help. Visibly rendering bootstrap.css makes this issue happen. Maybe there is any easier way to display time picker, not exactly this one I chose ? – Dawid Sibiński Dec 04 '15 at 08:07
  • I believe you are not integrating with your solution probably because it works outside your solution – Julius Depulla Dec 04 '15 at 15:49
  • I've modified my question with the sample code I used to try, can you take a look now? The new part starts with "EDIT 2015-12-05". – Dawid Sibiński Dec 05 '15 at 20:16