Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1738623
  • 博文数量: 273
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 1999
  • 用 户 组: 普通用户
  • 注册时间: 2014-03-31 14:30
个人简介

自己慢慢积累。

文章分类

全部博文(273)

分类: Python/Ruby

2020-01-01 01:17:57

CDN地址

https://www.bootcdn.cn/gijgo/
官方效果演示:
https://gijgo.com/datetimepicker

注意:
如果是下载到本地的话,需要一并下载两个文件,
一个是gijgo-material.ttf ,一个是:gijgo-material.woff
从这里下载:
https://cdnjs.com/libraries/gijgo

效果:



点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">

  3. <head>
  4.     <title>Title</title>
  5.     <!-- Required meta tags -->
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  8.     <!-- Bootstrap CSS -->
  9.     <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  10. </head>

  11. <body>
  12.     <div class="container">
  13.         <div class="row">
  14.             <div class="col-sm-12">
  15.                 <div class="card">
  16.                     <div class="card-body">
  17.                         <h4 class="card-title">日期选择演示</h4>
  18.                         <p class="card-text">请选择日期</p>
  19.                         <input id="datepicker" class="col-12">
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </div>
  25.     <!-- Optional JavaScript -->
  26.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  27.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  28.     <script src="https://cdn.bootcss.com/popper.js/1.15.0/esm/popper.min.js"></script>
  29.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  30.     <script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/gijgo.min.js"></script>
  31.     <script src="https://cdn.bootcss.com/gijgo/1.9.13/combined/js/messages/messages.zh-cn.min.js"></script>
  32.     <script>
  33.         $("#datepicker").datepicker({
  34.         locale: 'zh-cn',
  35.         weekStartDay: 1,
  36.         format: 'yyyy-mm-dd hh:mm:ss',
  37.         footer: true,
  38.         modal: true
  39.         });
  40.     </script>
  41. </body>

  42. </html>

阅读(1268) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~