JQuery-UI

Question

का उपयोग कर एमवीसी में डेटटाइम पिकर मेरे एमवीसी एप्लीकेशन में, मुझे डेटाेटिमेकर की आवश्यकता है। मुझे से इसके लिए एक कोड मिला।

तो पहले मैं इन जेएस और सीएसएस फ़ाइलों को संदर्भित करता हूं।

<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     
     }); 

तो मैं इस तरह एक datetime पिकर मिला है।

लेकिन यहाँ समय एक स्लाइडर का उपयोग करके का चयन किया गया है। मैं इसे निम्न प्रकार की तरह बनाने की कोशिश कर रहा हूं।

तो इस तरह की कोशिश की।

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

लेकिन फिर भी यह पुरानी शैली की तरह आ रहा है। वह स्लाइडर के साथ है। मैं दूसरे प्रकार में कैसे बदल सकता हूं?

Answer 1

मैं example के साथ jsfiddle बनाते हैं।

सब कुछ आकर्षण की तरह काम करता है।

मुझे लगता है कि आप कुछ जेएस या सीएसएस नहीं जोड़ते हैं। यहां मैं जो जोड़ता हूं वह यहां है:

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

Answer 2

नीचे दिए गए लिंक

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

    }); 
}); 

ठीक से यहाँ काम इस कोड से संपर्क करें।

Answer 3

अंततः यह ठीक काम कर रहा है। कार्य कोड,

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

है और, यह उत्पादन दे रहा है की तरह है,

सभी को धन्यवाद।