基于 AngularJS 的时间选择器wui-date效果代码-html代码-BFW代码库

基于 AngularJS 的时间选择器wui-date效果代码

代码语言：html

所属分类：选择器

代码描述：基于 AngularJS 的时间选择器wui-date效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/wui.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-1.4.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/wui-date.js"></script>

</head>
<body>

<div class="wui-content">
	<div class="wui-area">
		<h2 class="h2">WUI-DatePicker 日期选择器</h2>
	</div>
	<h3 class="h3">参考</h3>
	<div class="wui-area">
		<h4 class="h4">选择年月日</h4>
		<p>输出格式yyyy-mm-dd</p>
		<wui-date 
			format="yyyy-mm-dd" 
			placeholder="请选择或输入日期" 
			id="date1" 
			btns="{'ok':'确定','now':'此刻'}" 
			ng-model="date1"
		>
		</wui-date>
	</div>
	<div class="wui-area">
		<h4 class="h4">选择年月</h4>
		<p>输出格式yyyy-mm</p>
		<wui-date 
			format="yyyy-mm" 
			placeholder="请选择或输入日期" 
			id="date2" 
			btns="{'ok':'确定','now':'此刻','hitherto':true}" 
			ng-model="date2"
		>
		</wui-date>
	</div>
	<div class="wui-area">
		<h4 class="h4">选择年月日 时分</h4>
		<p>输出格式yyyy-mm-dd hh:mm</p>
		<wui-date 
			format="yyyy-mm-dd hh:mm" 
			placeholder="请选择或输入日期" 
			id="date3" 
			btns="{'ok':'确定','now':'此刻'}" 
			ng-model="date3"
		>
		</wui-date>
	</div>
	<div class="wui-area">
		<h4 class="h4">选择年月日 时分秒</h4>
		<p>输出格式yyyy-mm-dd hh:mm:ss</p>
		<wui-date 
			format="yyyy-mm-dd hh:mm:ss" 
			placeholder="请选择或输入日期" 
			id="date4" 
			btns="{'ok':'确定','now':'此刻'}" 
			ng-model="date4"
		>
		</wui-date>
	</div>
	<div class="wui-area">
		<h4 class="h4">选择'至今'</h4>
		<p>有至今选项按钮</p>
		<wui-date 
			format="yyyy-mm-dd" 
			placeholder="请选择或输入日期" 
			id="date5" 
			btns="{'hitherto':true}" 
			ng-model="date5"
		>
		</wui-date>
	</div>
	<h3 class="h3">起步</h3>
	<div class="wui-area">
		<ul>
			<li>
				1. 在你的项目引入wui.css或wui.min.css,以及font图标文件（与wui.css文件同级）<br/>
				<code>&ltlink rel="stylesheet" type="text/css" href="css/wui.min.css"></code><br/>
			</li>
			<li>
				2. 在你的项目引入wui-date.js或wui-date.min.js,依赖angul.........完整代码请登录后点击上方下载按钮下载查看