在MVC中使用JQuery-UI的DateTimePicker

在我的mvc應用程序中，我需要一個datetimepicker。我從Here得到了這個代碼。在MVC中使用JQuery-UI的DateTimePicker

所以首先我介紹這些js和css文件。

<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" />

然後，

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

，並在腳本中，

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

所以我有一個日期選擇器這樣的。

但在這裏時間是通過使用滑塊選擇。我試圖讓它像下面的類型。

所以嘗試這樣的。

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

但它仍舊像老式一樣到來。這是與滑塊。我怎樣才能改變爲第二種？

來源

2016-01-15 BIBIN K ONANKUNJU

難道你不會爲這種佈局添加'css'文件嗎？ –

@teovankot：我添加了jquery-ui.css。 –

我檢查過github。對於timepicker，src包括[this css文件]（https://github.com/trentrichardson/jQuery-Timepicker-Addon/blob/master/src/jquery-ui-timepicker-addon.css）。你添加了嗎？ –

我用example創建jsfiddle。

一切都像魅力。

我想你只是不添加一些JS或CSS。這裏是我補充說：

<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>

來源

2016-01-15 07:31:40

現在它工作的很好......非常感謝......很棒...... –

請點擊以下鏈接

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", 

    }); 
});

此代碼正常在這裏工作檢查。

來源

2016-01-15 06:38:08

Yah。但我在我的應用程序中使用了相同的代碼以及相同的js和css文件。但它在我的應用程序中不能正常工作。不知道我在想什麼...... –

終於它現在工作得很好。工作代碼，

<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>

而且，它給輸出一樣，

感謝所有。

來源

2016-01-15 07:41:23

在MVC中使用JQuery-UI的DateTimePicker

回答

相關問題