bootStrap:日期控件(两种方式)

bootStrap:日期控件(两种方式)

bootStrap:日期控件(两种方式)_第1张图片

先引入文件:

<link rel="stylesheet" type="text/css" href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js">script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js">script>

1. 第一种方式(通过class文件)

<script type="text/javascript">
$(".time").datetimepicker({
    language:  "zh-CN",
    format: "yyyy-mm-dd hh:ii:ss",//显示格式
    minView: "hour",//设置只显示到月份
    initialDate: new Date(),//初始化当前日期
    autoclose: true,//选中自动关闭
    todayBtn: true, //显示今日按钮
    clearBtn : true,
    pickerPosition: "bottom-left"
});
script>

*添加控件的位置*

div>

<div class="col-sm-10" style="width: 300px;">
"text" class="form-control time" id="create-expireTime">
div>

2. 第二种方式(通过控件id)

<script type="text/javascript">
$("#create-expireTime").datetimepicker({
    language:  "zh-CN",
    format: "yyyy-mm-dd hh:ii:ss",//显示格式
    minView: "hour",//设置只显示到月份
    initialDate: new Date(),//初始化当前日期
    autoclose: true,//选中自动关闭
    todayBtn: true, //显示今日按钮
    clearBtn : true,
    pickerPosition: "bottom-left"
});
script>
div>

<div class="col-sm-10" style="width: 300px;">
"text" class="form-control" id="create-expireTime">
div>

(年月日)日期控件

$(".time").datetimepicker({
            minView: "month",
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left"
});

你可能感兴趣的:(bootStrap:日期控件(两种方式))