बूटस्ट्रैप DateTimePicker एक समारोह

मैं http://eonasdan.github.io/bootstrap-datetimepicker/ से DateTimePicker उपयोग करने के लिए कोशिश कर रहा हूँ और मैं त्रुटि हो रही है नहीं है "Uncaught TypeError:। $ (...) DateTimePicker कार्य नहीं है"बूटस्ट्रैप DateTimePicker एक समारोह

यहाँ मेरी भी शामिल कर रहे हैं:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

यहाँ कोड

<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <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 class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false //Important! See issue #1075 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    }); 
</script>

किसी भी मदद की बहुत सराहना की जाएगी है।

स्रोत

2015-10-21 unbootabru

में किसी भी अन्य त्रुटियों निम्नलिखित तरीके से जे एस फ़ाइलें शामिल करें जेएस कंसोल? – Reeno

नहीं, केवल एक ही – unbootabru

मेरे लिए काम करता है: https://jsfiddle.net/cfwat90p/ (यह ठीक है आपका कोड, जिसमें 'bootstrap.min.css' गुम है, लेकिन एक गायब सीएसएस-फ़ाइल का कारण नहीं है जेएस-त्रुटि) – Reeno

नीचे सही कोड है। DateTimePicker तरह के बजाय datepicker/timepicker उपयोग करने के लिए

<html> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 

<body> 



<div class="container"> 
    <div class='col-md-5'> 
     <div class="form-group"> 
      <div class='input-group date' id='datetimepicker6'> 
       <input type='text' class="form-control" /> 
       <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 class='input-group date' id='datetimepicker7'> 
       <input type='text' class="form-control" /> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(function() { 
      $('#datetimepicker6').datetimepicker(); 
      $('#datetimepicker7').datetimepicker({ 
       useCurrent: false //Important! See issue #1075 
      }); 
      $("#datetimepicker6").on("dp.change", function (e) { 
       $('#datetimepicker7').data("DateTimePicker").minDate(e.date); 
      }); 
      $("#datetimepicker7").on("dp.change", function (e) { 
       $('#datetimepicker6').data("DateTimePicker").maxDate(e.date); 
      }); 
     }); 
    }); 
</script> 



</body> 


</html>

स्रोत

2015-10-21 15:35:26 Suraj

मुझे थोड़ा सा शामिल/जावास्क्रिप्ट को स्थानांतरित करना पड़ा क्योंकि यह एक फ्लास्क ऐप था, लेकिन यह ऑर्डर काम करता था। धन्यवाद – unbootabru

हैप्पी कोडिंग @ user3784402 – Suraj

समस्या यह है कि आप bootstrap.min.css शामिल नहीं किया है, यह भी फ़ाइलों के अनुक्रम हो सकता है:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

DEMO

स्रोत

2015-10-21 15:31:45

@ user3784402, सुनिश्चित करें, आपने बूटस्ट्रैप सीएसएस फ़ाइल शामिल की है। –

धन्यवाद यह अनुक्रम पुन: व्यवस्थित करने के बाद मेरे लिए काम कर रहा है –

यह सही काम करता है !!! धन्यवाद। –

प्रयास करें:

बदल देते हैं:

साथ

$('#datetimepicker1').datetimepicker();

$('#datetimepicker1').datepicker(); // or timepicker for time picker

स्रोत

2018-01-01 19:35:26

बूटस्ट्रैप DateTimePicker एक समारोह

उत्तर

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