bootstrap datetimepicker

效果预览

我们先来看一下效果
bootstrap datetimepicker_第1张图片可以看到这款插件的功能很强大,涵盖了十年视图,年视图,月视图,甚至小时视图,分钟视图都有,几乎能够满足大部分人的需要。不仅如此,还有完善的文档,方便我们个性化设置噢,我们一起去看看吧!

datetimepicker

中文文档: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

插件下载地址: https://github.com/smalot/bootstrap-datetimepicker/archive/master.zip (如果点击这里无法下载插件就进入中文文档找到“下载ZIP包”进行下载)

依赖

  • bootstrap.min.css
  • jQuery.min.js
  • bootstrap.min.js

此外,还需导入datetimepicker自身文件。

  • bootstrap-datetimepicker.min.css
  • bootstrap-datetimepicker.min.js
  • bootstrap-datetimepicker.zh-CN.js (若要汉化要导入这个包,在js的locales目录下)

至此,导包工作完成,接下来就能使用了。每个人需求不同,建议使用前先查阅中文文档,了解常用的参数和使用方法。这里就贴个我的样例代码。

代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>testtitle>
		<link rel="stylesheet" href="static/plugins/bootstrap/css/bootstrap.min.css">
		<script src="static/js/jQuery.js">script>
		<script src="static/plugins/bootstrap/js/bootstrap.min.js">script>
		<link rel="stylesheet"
			href="static/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
		<script src="static/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js">script>
		<script src="static/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js">
		script>
	head>
	<body>
		<form class="form-horizontal" style="border: 1px red solid;margin-top: 30px;">
			<div class="container">
				<div class="row">
					<div class="form-group col-sm-6">
						<label for="name" class="col-sm-2 control-label">姓名label>
						<div class="col-sm-10">
							<input type="text" id="name" class="form-control">
						div>

					div>
					<div class="form-group col-sm-6">
						<label for="age" class="col-sm-2 control-label">年龄label>
						<div class="col-sm-10">
							<input type="text" id="age" class="form-control">
						div>

					div>
				div>
				<div class="row">
					<div class="form-group col-sm-6">
						<label for="salary" class="col-sm-2 control-label">薪资label>
						<div class="col-sm-10">
							<input type="text" id="salary" class="form-control">
						div>

					div>
					<div class="form-group col-sm-6">
						<label for="department" class="col-sm-2 control-label">部门label>
						<div class="col-sm-10">
							<select id="department" class="form-control">
								<option value="">IToption>
								<option value="">教育option>
								<option value="">服务option>
								<option value="">公检option>
								<option value="">托管option>
							select>
						div>
					div>
				div>
				<div class="row">
					<div class="form-group col-sm-6">
						<label for="datetime" class="col-sm-2 control-label">入职日期label>
						<div class="col-sm-10">
							<input type="text" id="datetime" class="form-control" placeholder="年 / 月 / 日">
						div>
					div>
				div>
				<div class="row">
					<div class="form-group col-sm-6">
						<div class="col-sm-offset-2 col-sm-3">
							<button type="submit" class="btn btn-primary form-control">提交button>
						div>
					div>
				div>
			div>
		form>


		<script type="text/javascript">
			$('#datetime').datetimepicker({
				language: 'zh-CN', //显示中文
				format: 'yyyy-mm-dd', //显示格式
				autoclose: true, //选中自动关闭
				todayBtn: true, //显示今日按钮
				todayHighlight: true, // 今日高亮显示
				weekStart: 1, //一周从哪一天开始。0(星期日)到6(星期六)	
				startDate: "2021-1-1", //日期选取的起始时间
				minView: "month", // 最小视图为月份,如果为 day 的话还会让你选小时
				daysOfWeekDisabled: '0', // 哪天不可选 0(星期日)到6(星期六)	
				endDate: new Date(), //日期选取的截止时间,因为入职日期最多填写到今天,所以可以直接用new Date(),表示当天

			})
		script>

	body>
html>

你可能感兴趣的:(bootstrap,bootstrap,html,前端)