datetimepicker控件demo

最新推荐文章于 2020-05-15 16:53:32 发布

有趣的杰克

最新推荐文章于 2020-05-15 16:53:32 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/weixin_42731928/article/details/103873245

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<!--  云加速引入css，js文件 -->
  <!-- bootstrap样式 -->
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- 时间选择器样式 -->
  <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  <!-- jqueryJS -->
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <!-- bootstrapJS -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- 时间选择器前置JS -->
<!--  写demo时没有引入这个文件导致报错-->
  <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
  <!-- 时间选择器核心JS -->
  <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>
<body>
<!--为什么要加入这个DIV-->
<!--datetimepicker指定的输入框的外层应该是一个相对定位的标签-->
<div class="col-sm-6">
<!--日期选择框-->
<input type="text"  id="datetimepicker">
</div>
</body>
<script>
  $('#datetimepicker').datetimepicker({
    format: 'yyyy-mm-dd',//日期格式
    minView: 'month',//设置时间选择为年月日
    autoclose: true,//点击完时间直接关闭
    defaultDate:"1998-05-20"//时间选择框默认值
  });
</script>
</html>

官方文档中详细的选项请点击

有趣的杰克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datetimepicker控件demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <link href="https://cdn.bootcss.com/bootstrap/3...
复制链接

扫一扫