CODEWITHSUNDEEP
jquerycssasp.net-mvcdate-formatdatetimepicker
KOmrAD
KOmrAD

Reputation: 93

Bootstrap date-time picker asp.NET MVC

I am using this function 

<script src="~/Scripts/jquery.datetimepicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.datetimepicker').datetimepicker({});
        });
    </script>

And this code to show the datetime:

@Html.EditorFor(model => model.SomeNameDateTimeFormat, new { htmlAttributes = new { @class = "form-control input-sm datetimepicker"} })

However, css is not working at all, it renders calendar on the side of the page as a items one after another.

How and where should I include css?

At the end i want to have output like "dd-MM-yyyy HH:mm" p.s. HH:mm can be DateTime.Now.

Upvotes: 0

Views: 3467

Answers (3)

KOmrAD
KOmrAD

Reputation: 93

I ended up using xdsoft datetimepicker as @StephenMuecke suggested. This is an excelent tutorial for that purpose with everything that xdsoft datetimepickler offers:

http://xdsoft.net/jqplugins/datetimepicker/

I had difficulties because I included the jquery scripts in my Layout and my _Create PartialView, so if you are using Partial view, be careful.

Upvotes: 2

Nikitesh
Nikitesh

Reputation: 1305

Use textboxFor instead of editorFor.

@Html.TextBoxFor(model => model.SomeNameDateTimeFormat,"{0:dd-MM-yyyy HH:mm}", new { htmlAttributes = new { @class = "form-control input-sm datetimepicker"} })<br>

Also include the css on the layout if you are using it on multiple pages/ on the page where it is used. normal style tag (<link rel="stylesheet" type="text/css" href="theme.css"> ) should do.

Go through this tutorial Link

Upvotes: 0

Mox Shah
Mox Shah

Reputation: 3015

You can change datetime format as per your need:

$('.datetimepicker').datepicker({ dateFormat: 'dd-mm-yy' })

Upvotes: 1

Related Questions