CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-uiasp.net-mvc-5datetimepicker
itzmebibin
itzmebibin

Reputation: 9439

DateTimePicker in MVC using JQuery-UI

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.

datetimepicker with slider

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

timeselection without slider

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?

Upvotes: 5

Views: 12146

Answers (3)

itzmebibin
itzmebibin

Reputation: 9439

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,

datetimepicker

Thanks to all.

Upvotes: 1

teo van kot
teo van kot

Reputation: 12491

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>

Upvotes: 5

Muhammed Riyas T
Muhammed Riyas T

Reputation: 71

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.

Upvotes: 1

Related Questions