CDN地址
https://www.bootcdn.cn/gijgo/
官方效果演示:
https://gijgo.com/datetimepicker
注意:
如果是下载到本地的话,需要一并下载两个文件,
一个是gijgo-material.ttf ,一个是:gijgo-material.woff
从这里下载:
https://cdnjs.com/libraries/gijgo
效果:
点击(此处)折叠或打开
- <!doctype html>
- <html lang="en">
- <head>
- <title>Title</title>
- <!-- Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <div class="col-sm-12">
- <div class="card">
- <div class="card-body">
- <h4 class="card-title">日期选择演示</h4>
- <p class="card-text">请选择日期</p>
- <input id="datepicker" class="col-12">
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- Optional JavaScript -->
- <!-- jQuery first, then Popper.js, then Bootstrap JS -->
- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
- <script src="https://cdn.bootcss.com/popper.js/1.15.0/esm/popper.min.js"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
- <script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/gijgo.min.js"></script>
- <script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/messages/messages.zh-cn.min.js"></script>
- <script>
- $("#datepicker").datepicker({
- locale: 'zh-cn',
- weekStartDay: 1,
- format: 'yyyy-mm-dd hh:mm:ss',
- footer: true,
- modal: true
- });
- </script>
- </body>
- </html>