单日历插件

最新推荐文章于 2019-04-19 15:06:59 发布

ZYG_Go

最新推荐文章于 2019-04-19 15:06:59 发布

阅读量297

点赞数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
   <link href="dist/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">
<link href="dist/css/bootstrap-3.3.2.min.css" rel="stylesheet" type="text/css">

<link href="dist/js/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<link href="dist/font-awesome-4.7.0/css/font-awesome.min.css"rel="stylesheet" type="text/css">

     <1-- datepicker与datetimepicker 完全是两个插件-->

   <script type="text/javascript" src="dist/js/jquery-2.1.3.min.js"></script>

   <script type="text/javascript" src="dist/js/bootstrap-3.3.2.min.js"></script>
   <script type="text/javascript" src="dist/js/bootstrap-datepicker.min.js"></script>
   <script type="text/javascript" src="dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>

    <script type="text/javascript" src="dist/js/bootstrap-datetimepicker.min.js"></script>
   <script type="text/javascript" src="dist/js/bootstrap-datetimepicker.zh-CN.js"></script>

</head>


<body>

<input type="text" class="datepicker" placeholder="请选择日期" />

<input type="text" class="datetimepicker" placeholder="请选择日期" id="startDate" style="width:130px" /> &nbsp&nbsp 到 &nbsp&nbsp
<input type="text" class="datetimepicker" placeholder="请选择日期"   id="lastTime"/>

<script type="text/javascript">
    $(function () {

       
        $(".datepicker").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: true,//今日按钮
            format: "yyyy-mm-dd ",//日期格式，详见
           startDate: new Date()
        });


$('.datetimepicker').datetimepicker({
   format:"yyyy-mm-dd hh:ii:ss", //日期显示的格式
   autoclose: true,//选中之后自动隐藏日期选择
   language:"zh-CN", //汉化
   todayHighlight:true,
   bootcssVer:3,
   todayBtn:true

   }).on('change',function( ev){
   var startDate = $('#startDate').val();
    $("#lastTime").datetimepicker('setStartDate',startDate);
    $("#startDate").datetimepicker('hide');
   });

   
$('.lastTime').datetimepicker({
   format:"yyyy-mm-dd hh:ii:ss", //日期显示的格式
   autoclose: true,//选中之后自动隐藏日期选择
   language:"zh-CN", //汉化
   todayHighlight:true, //选中时间高亮
   todayBtn:true

   }).on('change',function( ev){
   var startDate = $('#lastTime').val();
    $("#startDate").datetimepicker('setEndDate',startDate);
    $("#lastTime").datetimepicker('hide');
   });
});






   /*$('.datepicker').datepicker('update', '2011-03-05');*/
</script>

</body>
</html>