简体   繁体   English

如何添加日期选择器的jQuery插件到bootstrab?

[英]How to add date picker jquery plugins to bootstrab?

I need to add datepicker in my form. 我需要在表单中添加日期选择器。 I want to use jquery with bootstrap. 我想将jquery与bootstrap一起使用。 For the purpose, I googled and got free jquery plugins here . 为此目的,我用Google搜索,并得到免费的jQuery插件这里 Now I am unable to get the functionality. 现在我无法获得该功能。 I am novice to bootstrap. 我是引导新手。 Please help me. 请帮我。

html code: html代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <div class="input-append date datepicker" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" />
</div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/google-code-prettify/prettify.js"></script>
      <script src="js/jquery.js"></script>
      <script src="js/bootstrap-datepicker.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript">
            $(function () {
                $('.datepicker').datepicker();
            });
        </script>
  </body>
</html>

There are plugins to do this which are adapted to work just fine with bootstrap like datepicker - Demo . 有一些插件可以做到这一点,这些插件可以与datepicker-Demo之类的引导程序配合使用。 Repository here .They even add snippets and are well documented. 此处的存储库 。它们甚至添加了摘要,并且有据可查。

I personally use the Bootstrap twitter datepicker plugin. 我个人使用Bootstrap twitter datepicker插件。 It's relatively easy to setup and is one of the best looking pickers out there IMHO, also the possible customization is great. 它相对容易设置,是IMHO上外观最好的选择器之一,而且可能的自定义功能也很棒。 This is the tutorial i used to set it up: http://develop.alpdesigns.ch/pages/other/bootstrap-datepicker.html You can also use the bootstrap libs to theme your whole form like the plugin http://getbootstrap.com/components/ 这是我用来设置它的教程: http : //develop.alpdesigns.ch/pages/other/bootstrap-datepicker.html您还可以使用bootstrap库将整个表单作为主题,例如插件http:// getbootstrap .com / components /

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM