如何使用bootstrap datepicker？

Question

我對Angular.js（或一般的網絡編程）相當新。 我有一個非常基本的問題 - 我想在我的應用程序中包含一個日期選擇器。 為此，我嘗試設置bootstrap datepicker：

https://bootstrap-datepicker.readthedocs.org/en/latest/#

我有jQuery和Bootstrap依賴包括：

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/blog.css">
    <script src="angular-datepicker.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/blogController.js"></script>

我真的不明白，從現在起我應該如何使用它？ 我可以在我的HTML模板中包含一些輸入字段，但我究竟如何調用調用日期選擇器窗口小部件的腳本？

Answer 1

在input字段中添加id或class ，並在調用datepicker后將其用作選擇器。

在您的HTML中：

<input type="text" class="datepicker">

在你的JS中：

$('.datepicker').datepicker();

Answer 2

full code just test

<!DOCTYPE HTML>
<html>
    <head>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" media="screen"
              href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


    </head>
    <body>
        <div class="well">
            <div id="datetimepicker4" class="input-append"> 
                <input data-format="yyyy-MM-dd" type="text"></input> 
                <span class="add-on"> 
                    <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i> 
                </span> 
            </div> 
        </div> 

        <script type="text/javascript"
                src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script> 
        <script type="text/javascript"
                src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
        </script>
        <script type="text/javascript"
                src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
        </script>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker4').datetimepicker({pickTime: false});
            });
        </script>
       </body>
</html>

如何使用bootstrap datepicker？

問題描述

2 個解決方案

解決方案1
3 已采納 2015-05-17 14:50:00

解決方案2
0 2016-06-16 10:04:36

如何使用bootstrap datepicker？

問題描述

2 個解決方案

解決方案1 3 已采納 2015-05-17 14:50:00

解決方案2 0 2016-06-16 10:04:36

解決方案1
3 已采納 2015-05-17 14:50:00

解決方案2
0 2016-06-16 10:04:36