HTML/JS - Bootstrap Datepicker

HTML/JS - Bootstrap Datepicker

本文关键字：Bootstrap Datepicker JS HTML      更新时间：2023-09-26

过去，我构建的系统都使用jQuery日期选择器，它工作得很好。最近，我决定在我的设计中使用Twitter引导程序，并很快了解到它不喜欢jQuery UI。

我现在正试图让 http://www.eyecon.ro/bootstrap-datepicker/工作。

我已经查看了所有类似的问题及其解决方案，但似乎找不到任何直接适用于我的情况的问题。

JavaScript：

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="../images/favicon.ico">
<script type="text/javascript" src="js/tinybox.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script>
    $('#date').datepicker();
    function delete(id)  
        {
        var r=confirm("Are you sure you want to delete?")
            if (r==true)
            {
                location.href = "delete.php?id=" + id;
            }
        }
    function single(id)
        {
            TINY.box.show({iframe:'../view.php?id=' + id,boxid:'frameless',width:550,height:170,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})
        }
</script>

该网页：

<input name="date" class="src_date" type="textarea" placeholder="DD-MM-YYYY" id="date" required>

我也尝试过使用 JS：

$(function() {
    $("#date").datepicker({dateFormat: 'dd-mm-yyyy'});
});

此问题通常是 JS 冲突的结果，其中另一个插件导致 $ 变量行为异常。要解决这个问题，只需用jQuery包装你的函数：

$('#date').datepicker();

=> 

jQuery(function($){
    $("#date").datepicker({format: 'dd-mm-yyyy'});
});

此外，您的dateFormat参数适用于 jQuery UI，对于引导日期选择器，只需使用 format 就像我在上面的例子中使用的那样。

好像

这不起作用：

$(function() {
   $("#date").datepicker({dateFormat: 'dd-mm-yyyy'});
});

那么似乎你必须首先加载你的jQuery库，然后再加载其他库：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/tinybox.js"></script>
<script src="js/bootstrap-datepicker.js"></script>

jquery后加载tinybox并检查您是否下载了datepicker并tinybox js，例如，

否则试试这个，

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://sandbox.scriptiny.com/tinybox2/tinybox.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script>
$(function() {
   $("#date").datepicker({dateFormat: 'dd-mm-yyyy'});
});
</script>

现场演示

相关文章：