DateTimePicker in MVC using JQuery-UI

Question

In my mvc application, I need a datetimepicker. I got a code for this from Here.

So first i refer these js and css files.

    <script src="~/Scripts/jquery-1.9.0.min.js"></script>
        <script src="~/Scripts/jquery-ui.min.js"></script>
        <script src="~/Scripts/jquery-ui-timepicker-addon.js"></script>
<link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" />

Then,

<div>
@Html.TextBox("fromdate", DateTime.Now.ToString("MM/dd/yyyy HH:mm"), new { @class = "from-date-picker", @readonly = "readonly" })
</div>

and in the script,

$('.from-date-picker').datetimepicker({
            dateFormat: 'mm/dd/yy',
            timeFormat: 'hh:mm',
            timeInput: true,
            stepHour: 1,
            stepMinute: 5                
        });

So I got a datetime picker like this.

But here time is selecting by using a slider. I am trying to make it like the following type.

So tried like this.

$('.from-date-picker').datetimepicker({
    controlType: 'select',
    oneLine: true,
    timeFormat: 'hh:mm tt'
});

But still its coming like the old style. That is with slider. How can I change to the second type?

Could it be that you don't add css files for this kind of layout? — teo van kot
– teo van kot, Commented Jan 15, 2016 at 5:37
I've checked on github. src include this css file for timepicker. Have you add it? — teo van kot
– teo van kot, Commented Jan 15, 2016 at 5:42
@teovankot : Thanks. Just now i added "jquery-ui-timepicker-addon.css" to my project. But the issue remains same. — itzmebibin
– itzmebibin, Commented Jan 15, 2016 at 5:48

teo van kot · Accepted Answer · 2016-01-15 07:31:40Z

5

I create jsfiddle with example.

Everything works like charm.

I suppose you just don't add some js or CSS. Here is what I add:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-sliderAccess.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script>

answered Jan 15, 2016 at 7:31

teo van kot

12.5k10 gold badges41 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Waqas Javaid Over a year ago

Great it worked but when I press 'Now' button it shows me correct time first time but when I click on it twice or more, it set 07-Jul-2023 03:00 am. Any Idea?

Muhammed Riyas T · Accepted Answer · 2016-01-15 06:38:08Z

1

Please check with below link

code.runnable.com

 $(function() {
    $('#basic_example_1').datetimepicker({

        controlType : 'select',
        /*
         * timeFormat Default: "HH:mm", A Localization Setting - String of
         * format tokens to be replaced with the time.
         */
        timeFormat : "hh:mm tt",

    });
});

This code working properly here.

answered Jan 15, 2016 at 6:38

Muhammed Riyas T

717 bronze badges

1 Comment

itzmebibin Over a year ago

Yah. But I am using the same code in my application along with the same js and css files. But Its not working properly in my application. Don't know what i am missing....

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Finally Its working fine now. Working code is,

    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-timepicker-addon.js"></script>
    <link href="~/Content/jquery-ui-timepicker-addon.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/Scripts/jquery-ui-sliderAccess.js"></script>
    
<div>
    <input type="text" value="" id="from-date-picker" />
</div>  

    <script>
        $('#from-date-picker').datetimepicker({
                    controlType: 'select',
                    oneLine: true,
                    timeFormat: 'HH:mm'
                });
    </script>

And, it is giving the output like,

Thanks to all.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 15, 2016 at 7:41

itzmebibin

9,4479 gold badges52 silver badges63 bronze badges

1 Comment

Waqas Javaid Over a year ago

Great! it worked but when I press 'Now' button first time, it shows me correct time but when I click on it twice or more, it set 07-Jul-2023 03:00 am. Any Idea?

Collectives™ on Stack Overflow

DateTimePicker in MVC using JQuery-UI

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related