बूटस्ट्रैप-डेटाेटिमपिकर काम नहीं कर रहा

मैं इसे 2 दिनों के लिए देख रहा हूं, और यह पता नहीं लगा सकता कि मैं क्या गलत कर रहा हूं।बूटस्ट्रैप-डेटाेटिमपिकर काम नहीं कर रहा

यहां मेरी परियोजना के साथ एक पहेली है। http://jsfiddle.net/dagger2002/RR4hw/

यहाँ एचटीएमएल

<div class="container"> 
    <div class="col-sm-6" style="height:75px;"> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>Start</div> 

       <div class='input-group date' id='startDate'> 
        <input type='text' class="form-control" name="startDate" /> 
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>End</div> 

       <div class='input-group date' id='endDate'> 
        <input type='text' class="form-control" name="org_endDate" /> 
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

यहाँ Jquery है।

jQuery(function() { 
    jQuery('#startDate').datetimepicker(); 
    jQuery('#endDate').datetimepicker(); 
    jQuery("#startDate").on("dp.change",function (e) { 
     jQuery('#endDate').data("DateTimePicker").setMinDate(e.date); 
    }); 
    jQuery("#endDate").on("dp.change",function (e) { 
     jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date); 
    }); 
});

मुझे कोई त्रुटि नहीं मिल रही है और जब मैं इसे पहेली के माध्यम से चलाता हूं तो यह कहता है कि कोई त्रुटि नहीं मिली है। मैं jQuery में नया हूं इसलिए मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं।

ओह हाँ। मैं एक जूमला साइट पर जाने के लिए लंबे नाम का उपयोग कर रहा हूं जो म्यू टूल्स का भी उपयोग कर रहा है।

अग्रिम में धन्यवाद।

अद्यतन

<!doctype html> 

<html lang="en-gb"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <meta name="x-ua-compatible" content="IE=edge,chrome=1" /> 
     <title>DateTime Test</title> 

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 


     <!-- Style Sheets --> 
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" type="text/css" /> 
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" /> 

     <!-- Scripts --> 
     <script src="//ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script> 
     <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script> 

     <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js" type="text/javascript"></script> 
     <script> 
      jQuery.noConflict(); 
     // Code that uses other library's $ can follow here. 
     </script> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="col-sm-6" style="height:75px;"> 
       <div class='col-md-5'> 
        <div class="form-group"> 
         <div>Start</div> 

         <div class='input-group date' id='startDate'> 
          <input type='text' class="form-control" name="startDate" /> 
          <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
       <div class='col-md-5'> 
        <div class="form-group"> 
         <div>End</div> 

         <div class='input-group date' id='endDate'> 
          <input type='text' class="form-control" name="org_endDate" /> 
          <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
          </span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

यह jFiddle काम करता है। http://jsfiddle.net/RR4hw/11/

लेकिन जब मैं इसे नियमित पृष्ठ में शामिल करता हूं तो यह टूट जाता है। यकीन नहीं है कि मैं क्या गड़बड़ कर रहा हूँ।

अग्रिम धन्यवाद।

स्रोत

2014-04-03 dagger2002

आपके जेएसफ़ील्ड में बाहरी संसाधनों के साथ कुछ समस्याएं प्रतीत होती थीं।

मैंने काम करने के लिए jsFiddle अद्यतन किया है। मैंने बाहरी संसाधनों को बदल दिया और कोड में कुछ मामूली समायोजन किए।

एचटीएमएल

<div class="container"> 
    <div class="col-sm-6" style="height:75px;"> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>Start</div> 

       <div class='input-group date' id='startDate'> 
        <input type='text' class="form-control" name="startDate" /> 
        <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
     </span> 
        </span> 
       </div> 
      </div> 
     </div> 
     <div class='col-md-5'> 
      <div class="form-group"> 
       <div>End</div> 

       <div class='input-group date' id='endDate'> 
        <input type='text' class="form-control" name="org_endDate" /> 
        <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
     </span> 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

JAVASCRIPT

jQuery(function() { 
    jQuery('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' }); 
    jQuery('#endDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' }); 
    jQuery("#startDate").on("dp.change",function (e) { 
     jQuery('#endDate').data("DateTimePicker").setMinDate(e.date); 
    }); 
    jQuery("#endDate").on("dp.change",function (e) { 
     jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date); 
    }); 
});

अद्यतन

अपने jsFiddle में, आप संदर्भ "बूटस्ट्रैप-datepicker.m in.js "और नहीं" bootstrap-datetimepicker.min.js "।
ऐसा लगता है कि "bootstrap-datepicker.min.js" को "moment.js" की आवश्यकता है एक शर्त के रूप में। कृपया ध्यान दें कि आदेश शामिल है।
अंत में, "en-gb.js" को "bootstrap-datetimepicker.min.js" के बाद सूचीबद्ध करने की आवश्यकता है।

अद्यतन समाधान के साथ jsFiddle अपडेट किया गया।

स्रोत

2014-04-03 19:22:55 malkassem

नीचे के रूप में आप क्या बदल दिया? बाहरी पर। मैं देखता हूं कि आपने jQuery में प्रारूप जोड़ा है। यही बात है न? – dagger2002

मैंने आपके पास जो कुछ भी था उससे अलग यूआरएल का इस्तेमाल किया। एक ही फ़ाइल नाम लेकिन विभिन्न यूआरएल। – malkassem

सहायता के लिए धन्यवाद। मुझे अभी एहसास हुआ कि आपने इसे बूटस्ट्रैप 3.1 से बूटस्ट्रैप 2.2 में बदल दिया है। यह काम नहीं करेगा क्योंकि मेरी साइट बूटस्ट्रैप 3 का उपयोग कर रही है। टाइम स्क्रिप्ट संस्करण मैं बूटस्ट्रैप 3 के साथ काम का उपयोग कर रहा था। – dagger2002

स्क्रिप्ट में jsFiddle में ऑर्डर शामिल नहीं है, नीचे काम करने योग्य नमूने के लिए संशोधित क्रम है। जैसा कि @malkassem moment.js द्वारा सुझाया गया है बूटस्ट्रैप दिनांक पिकर के लिए काम करने के लिए आवश्यक है।

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>   
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>     
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>`

स्रोत

2015-03-10 04:56:36 Jeevanantham

तिथि और/या समय पिकर काम कर पाने के लिए

सबसे आसान तरीका पैकेज नीचे

Install-Package Bootstrap.v3.Datetimepicker.CSS

और फिर से स्थापित करने _Layout में स्थापित फ़ाइलों को संदर्भित

<!-- JS --> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> <!-- Bootstrap v3.3.5 --> 
<script src="~/Scripts/moment.js"></script> 
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script> 
<script src="~/Scripts/Core.js"></script>

और फिर जोड़ने के द्वारा होता है </body> टैग

से पहले लेआउट पृष्ठ पर स्क्रिप्ट के नीचे

<script> 
jQuery(document).ready(function() { 

    jQuery('.datepicker').datetimepicker({ format: 'DD/MM/YYYY' }); 
    jQuery('.datetimepicker').datetimepicker(); 

}); 
</script>

उस्तरा दृश्य प्रयोग में

@Html.EditorFor(model => model.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } }) 
@Html.EditorFor(model => model.MyDateTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })

स्रोत

2015-07-01 14:02:33 Moji

बूटस्ट्रैप-डेटाेटिमपिकर काम नहीं कर रहा

उत्तर

संबंधित मुद्दे