分享vue ui时间组件用法
//js code var jiaban = {
template:`
<i-form v-ref:form_jb :model="form_jb" :rules="rules_form_jb" :label-width="80">
<Form-item label="时间" prop="rangeTime">
<Date-picker type="date" :value.sync="form_jb.rangeTime" placeholder="选择日期" class="w200"></Date-picker>
</Form-item>
<Form-item label="加班小时" prop="hour">
<i-input :value.sync="form_jb.hour" placeholder="数字1到8" class="w100"></i-input>
</Form-item>
<Form-item label="备注">
<i-input :value.sync="form_jb.remarks" type="textarea" :autosize="{minRows: 6,maxRows: 12}" placeholder="请输入..." class="w400"></i-input>
</Form-item>
<Form-item>
<i-button type="primary" @click="subMess('form_jb')" >提交</i-button>
<a href="goLeaveList.html"><i-button type="ghost" style="margin-left: 8px">返回</i-button></a>
</Form-item>
</i-form>`,
data:function(){
return {
form_jb: {
rangeTime:'',
hour:'',
remarks:''
},
rules_form_jb:{
rangeTime:[
{ required: true,type:'date',message: '输入正确日期格式', trigger: 'change' }
],
hour:[
{ required: true, message: '数字1到8', trigger: 'blur change' },
{ message: '数字1到8', trigger: 'blur change', pattern:/^[1-8]{1}$/}
]
}
}
},
methods:{
subMess:function(){
var _this = this;
_this.$refs['form_jb'].validate((valid) => {
if (valid) {
if(confirm("确认是否提交?")){
this.$Message.success('提交成功!');
}
} else {
this.$Message.error('表单验证失败!');
}
})
}
}
}
var tiaoxiu = {
template:`
<i-form :model="form_tx" :label-width="80">
<Form-item label="时间">
<Date-picker type="date" :value.sync="form_tx.startTime" :options="form_tx.startOption" @on-change="checkStartTime" placeholder="开始日期" class="w200 _inline_block"></Date-picker>
<span>
<Checkbox :checked.sync="form_tx.single01" :disabled="states01">下午开始</Checkbox>
</span>
<Date-picker type="date" :value.sync="form_tx.endTime" :options="form_tx.endOption" placeholder="结束日期" class="w200 _inline_block"></Date-picker>
<span>
<Checkbox :checked.sync="form_tx.single02" :disabled="states02">上午结束</Checkbox>
</span>
</Form-item>
<Form-item label="休假天数">
<i-input :value.sync="calc_days" placeholder="自动计算" class="w200" :disabled="true"></i-input>
</Form-item>
<Form-item label="" v-if="form_tx.startTime != ''">
<Row>
<i-col span="24">
<h3>可调休加班记录(两个月内的未调休过的加班)</h3>
<i-table :content="self" :columns="overTimeList.txColumns" :data="overTimeList.txData" no-data-text="暂无数据"></i-table>
</i-col>
</Row>
</Form-item>
<Form-item label="" v-if="form_tx.startTime !='' ">
<Row>
<i-col span="24">
<h3>剩余可调休时间总额
<i-input :value.sync="form_tx.total" placeholder="自动计算" class="w100" :disabled="true"></i-input>
</h3>
</i-col>
</Row>
</Form-item>
<Form-item label="备注">
<i-input :value.sync="form_tx.remarks" type="textarea" :autosize="{minRows: 6,maxRows: 12}" placeholder="请输入..." class="w400"></i-input>
</Form-item>
<Form-item>
<i-button type="primary" :disabled="isSave" @click="subMess">确定</i-button>
<a href="goLeaveList.html"><i-button type="ghost" style="margin-left: 8px">返回</i-button></a>
</Form-item>
<div style="padding-left: 46px;padding-top:15px; padding-right: 100px; line-height: 20px; color: #333;font-size:12px;">当剩余可调休时间>=休假天数时 确定按钮才会显示 否则置灰</div>
</i-form>`,
data:function(){
return {
form_tx: {
startTime:'',
endTime:'',
remarks:'',
total:0,
single01:false,
single02:false,
startOption:{
disabledDate:function(date) {}
},
endOption:{
disabledDate:function(date) {}
}
},
overTimeList:{
txColumns:[
{
title: '加班日期',
key: 'overTimeDate'
},
{
title: '天数',
key: 'days'
},
{
title: '项目名称',
key: 'projectName'
},
{
title: '经办人',
key: 'Mangage'
},
{
title: '处理时间',
key: 'processTime'
}
],
txData:[],
},
states01:false,//下午开始 默认置灰状态
states02:false,//上午结束 默认置灰状态
self:this
}
},
methods:{
dateFormat:function(){//年月日格式化
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return new Date(fmt);
}
},
options:function(){//监听日期限制
var _this = this;
// _this.form_tx.endOption.disabledDate = function(date) {
// return date && date.valueOf() < new Date(_this.form_tx.startTime).getTime();
// };
// _this.form_tx.startOption.disabledDate = function(date) {
// return date && date.valueOf() > new Date(_this.form_tx.endTime).getTime();
// };
_this.form_tx.endOption.disabledDate = function(date) {
return date && date.valueOf() < new Date(moment(_this.form_tx.startTime).format('YYYY-MM-DD')).getTime()-86400000;
};
_this.form_tx.startOption.disabledDate = function(date) {
return date && date.valueOf() > new Date(moment(_this.form_tx.endTime).format('YYYY-MM-DD')).getTime();
};
},
checkStartTime:function(dateStr){//调休开始时间判断
if(dateStr){
this.getOverTimeList();
this.form_tx.total = 20;
}else{
this.overTimeList.txData = [];
this.form_tx.total = 0;
}
},
getOverTimeList:function(){//获取可调休加班记录
this.overTimeList.txData = [
{
overTimeDate: '2017-1-2',
days: 18,
projectName: 'trms',
Mangage: '王大锤',
processTime: '2017-2-08',
id: '001',
},
{
overTimeDate: '2017-1-3',
days: 2,
projectName: '杭研官网',
Mangage: '王大锤2',
processTime: '2017-2-06',
id: '002',
}
];
},
subMess:function(){
if(confirm("确认是否提交?")){
}
}
},
computed:{
calc_days:function(){//自动计算 休假天数
// var d1 = new Date(this.form_tx.startTime).Format("yyyy-MM-dd").getTime();
// var d2 = new Date(this.form_tx.endTime).Format("yyyy-MM-dd").getTime();
// var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';
var d1 = new Date(moment(this.form_tx.startTime).format('YYYY-MM-DD')).getTime();
var d2 = new Date(moment(this.form_tx.endTime).format('YYYY-MM-DD')).getTime();
var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';
if(d1 == d2){ //日期为同一天 判断
if(this.form_tx.single01 && this.form_tx.single02){
this.form_tx.single01 = false;
this.form_tx.single02 = false;
}
if(this.form_tx.single01){
this.states02 = true;
}else{
this.states02 = false;
}
if(this.form_tx.single02){
this.states01 = true;
}else{
this.states01 = false;
}
}else{
this.states01 = false;
this.states02 = false;
}
if(resultDate && this.form_tx.single01){
resultDate = resultDate - 0.5;
}
if(resultDate && this.form_tx.single02){
resultDate = resultDate - 0.5;
}
return resultDate;
},
isSave:function(){ // 验证按钮是否置灰
if(this.calc_days){
console.log(this.form_tx.total)
return !(this.calc_days <= this.form_tx.total);
}else{
return true;
}
}
},
ready: function(){
this.options();
this.dateFormat();
}
}
var qingjia = {
template:`
<i-form :model="form_qj" :label-width="80">
<Form-item label="时间">
<Date-picker type="date" :value.sync="form_qj.startTime" :options="form_qj.startOption" placeholder="开始日期" class="w200 _inline_block"></Date-picker>
<span>
<Checkbox :checked.sync="form_qj.single01" :disabled="states01">下午开始</Checkbox>
</span>
<Date-picker type="date" :value.sync="form_qj.endTime" :options="form_qj.endOption" placeholder="结束日期" class="w200 _inline_block"></Date-picker>
<span>
<Checkbox :checked.sync="form_qj.single02" :disabled="states02">上午开始</Checkbox>
</span>
</Form-item>
<Form-item label="休假天数">
<i-input :value.sync="calc_days_qj" placeholder="自动计算" class="w200" :disabled="true"></i-input>
</Form-item>
<Form-item label="备注">
<i-input :value.sync="form_qj.remarks" type="textarea" :autosize="{minRows: 6,maxRows: 12}" placeholder="请输入..." class="w400"></i-input>
</Form-item>
<Form-item>
<i-button type="primary" @click="subMess" :disabled="isSave">确定</i-button>
<a href="goLeaveList.html"><i-button type="ghost" style="margin-left: 8px">返回</i-button></a>
</Form-item>
</i-form>`,
data:function(){
return {
form_qj:{
startTime:'',
endTime:'',
remarks:'',
total:0,
single01:false,
single02:false,
startOption:{
disabledDate:function(date) {}
},
endOption:{
disabledDate:function(date) {}
}
},
states01:false,//下午开始 默认置灰状态
states02:false,//上午结束 默认置灰状态
}
},
methods:{
dateFormat:function(){//年月日格式化
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return new Date(fmt);
}
},
options:function(){//监听日期限制
var _this = this;
// _this.form_qj.endOption.disabledDate = function(date) {
// return date && date.valueOf() < new Date(_this.form_qj.startTime).getTime();
// };
// _this.form_qj.startOption.disabledDate = function(date) {
// return date && date.valueOf() > new Date(_this.form_qj.endTime).getTime();
// };
//
_this.form_qj.endOption.disabledDate = function(date) {
return date && date.valueOf() < new Date(moment(_this.form_qj.startTime).format('YYYY-MM-DD')).getTime()-86400000;
};
_this.form_qj.startOption.disabledDate = function(date) {
return date && date.valueOf() > new Date(moment(_this.form_qj.endTime).format('YYYY-MM-DD')).getTime();
};
},
subMess:function(){
if(confirm("确认是否提交?")){
}
}
},
computed:{
calc_days_qj:function(){//自动计算 休假天数
// var d1 = new Date(this.form_qj.startTime).Format("yyyy-MM-dd").getTime();
// var d2 = new Date(this.form_qj.endTime).Format("yyyy-MM-dd").getTime();
// var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';
//
var d1 = new Date(moment(this.form_qj.startTime).format('YYYY-MM-DD')).getTime();
var d2 = new Date(moment(this.form_qj.endTime).format('YYYY-MM-DD')).getTime();
var resultDate = (d2-d1 + 86400000)/ 1000 / 60 / 60 / 24 || '';
if(d1 == d2){ //日期为同一天 判断
if(this.form_qj.single01 && this.form_qj.single02){
this.form_qj.single01 = false;
this.form_qj.single02 = false;
}
if(this.form_qj.single01){
this.states02 = true;
}else{
this.states02 = false;
}
if(this.form_qj.single02){
this.states01 = true;
}else{
this.states01 = false;
}
}else{
this.states01 = false;
this.states02 = false;
}
if(resultDate && this.form_qj.single01){
resultDate = resultDate - 0.5;
}
if(resultDate && this.form_qj.single02){
resultDate = resultDate - 0.5;
}
return resultDate;
},
isSave:function(){ // 验证按钮是否置灰
if(this.calc_days_qj){
console.log(this.form_qj.total)
return !!!(this.calc_days_qj);
}else{
return true;
}
}
},
ready: function(){
this.options();
this.dateFormat();
}
}
var newToAddLeave = function(){
return new Vue({
el:'#appList',
data:{
leaveVal:"jiaban",
leaveType:[{code:"jiaban",babel:"加班"},{code:"tiaoxiu",babel:"调休"},{code:"qingjia",babel:"请假"}]
},
components:{
jiaban:jiaban,
tiaoxiu:tiaoxiu,
qingjia:qingjia
}
})
}()
//html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TRMS</title>
</head>
<body>
<div id="appList" v-cloak>
<style type="text/css">
.vue-system-fill .ivu-table td, .vue-system-fill .ivu-table th {
min-width: 0;
height: 48px;
box-sizing: border-box;
}
</style>
<div class="vue-system-title">
<Breadcrumb separator=">">
<Breadcrumb-item href=""><span v-text="'主页'"></span></Breadcrumb-item>
<Breadcrumb-item>
<span class="ivu-breadcrumb-item-link" v-text="'申请 '"></span>
</Breadcrumb-item>
</Breadcrumb>
</div>
<div class="vue-system-fill w1200">
<div class="ivu-form-item" style="margin-left:28px;">
<label class="ivu-form-item-label" style="width: 80px;padding-right:2px;" v-text="'申请类型'"></label>
<i-select :model.sync="leaveVal" class="w200" style="display:inline-block;" v-cloak>
<i-option v-for="item in leaveType" :value="item.code">{{item.babel}}</i-option>
</i-select>
</div>
<Row>
<i-col span="24">
<component :is="leaveVal" keep-alive></component>
</i-col>
</Row>
</div>
</div>
<script src="lib/boot.js"></script>
</body>
</html>
分享vue ui时间组件用法的更多相关文章
- vue 自定义过度组件用法
HTML: <div id="example-1"> <button @click="show = !show"> Toggle ren ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- 为公司架构一套高质量的 Vue UI 组件库
有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
- ElementUI（vue UI库）、iView（vue UI库）、ant design（react UI库）中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- 强烈推荐优秀的Vue UI组件库
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- 关于vue ui组件
一.vue ui 组件 1: vue 当前很火前端框架vue 针对PC用户 pc 端与移动端区别 (1)屏幕宽度:992px > (2)操作方式:鼠标 事件 手指:触碰操作 -饿了么:基于 ...
随机推荐
- Android OpenGL ES(七)----理解纹理与纹理过滤
1.理解纹理 OpenGL中的纹理能够用来表示图像.照片,甚至由一个数学算法生成的分形数据.每一个二维的纹理都由很多小的纹理元素组成.它们是小块的数据,类似于我们前面讨论过的片段和像素.要使用纹理,最 ...
- libevent的使用(socket)
这篇文章介绍下libevent在socket异步编程中的应用.在一些对性能要求较高的网络应用程序中,为了防止程序堵塞在socket I/O操作上造成程序性能的下降,须要使用异步编程,即程序准备好读写的 ...
- 【递推DP】POJ1163The Triangle
题目链接:http://poj.org/problem?id=1163 事实上这个题目有非常多解法,可是我们能够看下这个用一位数组的高效动规解法,这个我上课时老师讲的,非常不错. 先保存最后一行4 5 ...
- UVa 10069 Distinct Subsequences（大数 DP）
题意 求母串中子串出现的次数(长度不超过1后面100个0 显然要用大数了) 令a为子串 b为母串 d[i][j]表示子串前i个字母在母串前j个字母中出现的次数 当a[i]==b[j]&am ...
- RecyclerView借助ItemTouchHelper实现拖动和滑动删除功能
RecyclerView是官方推荐代替ListView的空间,怎样实现RecyclerView列表元素的拖动呢? 官方提供了ItemTouchHelper类使用过程例如以下: 定义ItemTouchH ...
- GPU开发笔记（一）
首先我想到的是把安装好的CUDA下的programdata里面的demo都找一找,看看有没有自己需要的demo程序. 然后去CSDN或者pudn上去找找开源的代码. 至于GITHUB还没找过. 其次是 ...
- OpenGL编程逐步深入（十）索引绘制
准备知识 OpenGl提供了一些绘图函数.到目前为止我们使用的glDrawArrays绘图函数属于"顺序绘制".这意味着顶点缓冲区从指定的偏移量开始被扫描,每X(点为1,直线为2等 ...
- codeforces 544 D Destroying Roads 【最短路】
题意:给出n个点,m条边权为1的无向边,破坏最多的道路,使得从s1到t1,s2到t2的距离不超过d1,d2 因为最后s1,t1是连通的,且要破坏掉最多的道路,那么就是求s1到t1之间的最短路 用bfs ...
- PL/SQL恢复默认窗口样式
对于初学者来讲,使用PL/SQL时会不小心将窗体关闭,如下图 2. 怎么恢复呢?其实很简单 3. 搞定 转自:http://blog.csdn.net/hello_word2/article/deta ...
- Web开发、原生开发、混合开发的区别优势：
一.Web 应用 Web应用本质上是为移动浏览器设计的基于Web的应用,它们是用普通Web开发语言开发的,可以在各种智能手机浏览器上运行. 优点: 支持设备广泛: 较低的开发成本: 可即时上线: 无内 ...