java月历组件_vue之手把手教你写日历组件

---恢复内容开始---

1.日历组件

1.分析功能:日历基本功能,点击事件改变日期,样式的改变

1.结构分析:html

4fcf8c49bd61a50d7ff5fbdca5190d72.png

1.分为上下两个部分

2.上面分为左按钮,中间内容展示,右按钮

下面分为周几展示和日期展示

3.基本结构页面html书写

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{{ item }}

class="every-day"

v-for="item in 42"

:key="item"

>{{ item }}

*{

margin: 0px;

border: 0px;

list-style: none;

}

.calender2{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

height:380px;

width:420px;

border: 1px solid #ccc;

}

.date-header{

margin-left: 10px;

height: 40px;

width: 350px;

line-height: 40px;

text-align: center;

}

.pre-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent rgb(35, 137, 206) transparent transparent;

}

.next-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent transparent transparent  rgb(35, 137, 206);

}

.show-date{

margin-left: 40px;

margin-top: 0px;

display: inline-block;

line-height: 40px;

text-align: center;

width: 310px;

color: rgb(35, 137, 206);

}

.week-header{

background: rgb(35, 137, 206);

color: #fff;

font-size: 14px;

text-align: center;

line-height: 20px;

}

.week-header div{

margin: 0;

padding: 0;

display: inline-block;

height: 20px;

width: 60px;

}

.every-day{

display: inline-block;

height: 50px;

width: 60px;

text-align: center;

line-height: 50px;

}

.other-day{

color: #ccc;

}

.now-day{

background: rgb(35, 137, 206);

}

.active-day{

/* padding: 2px */

/* border-sizing:content-box; */

border: 2px solid rgb(35, 137, 206);

}

7512d981c4eb0968428f89c4d63c9c4a.png

4.一些事件以及逻辑

1.使得当前的日期为今天的日期

{{ year }}年{{ month }}月{{ day }}日

data(){

return{

year:null,

month:null,

day:null

}

},

created(){

this.getInitDate();

},

methods:{

getInitDate(){

const date = new Date();

this.year = date.getFullYear();

this.month = date.getUTCMonth() + 1;

this.day = date.getDate();

}

}

2.设置该月日期起始值(找到一号是在哪里)

beginDay(){

return new Date(this.year, this.mounth - 1, 1).getDay();

}

3.当月天数字体正常显示

v-if="item - beginDay >= 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

4.当月天数之前的部分变灰,外加正常显示日期

注意几个数学问题:

1.当前月天数日期

2.上月剩余天数

3.此月显示的下月天数

v-if="item - beginDay > 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

class="other-day"

v-else-if="item - beginDay <= 0"

>{{ item - beginDay + prevDays }}

class="other-day"

v-else>{{ item - beginDay -curDays }}

5.能知道当前日期,能点击其他日期,并且会有相应的变化

知道当前日期:

this.curDate = `${this.year}-${this.month}-${this.day}`

判断今天是不是当前日期,并且给一个样式:

'now-day':`${year}-${month}-${item - beginDays}` == curDate

当点击当月有的日期的时候会根据你的点击显示的日期发生变化

判断是点击的那一天:

'active-day':`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`

点击这一天,绑定点击事件

@click="handleClickDay(item - beginDay)"

handleClickDay(day){

this.day = day

}

6.前后两个按钮的功能

handlePrev(){

if(this.month == 1){

this.month = 12

this.year--

}else{

this.month--

}

},

handleNext(){

if(this.month == 12){

this.month = 1

this.year++

}else{

this.month++

}

}

7.判断点击的是否为当月的最后一天

computedDay(){

const allDay = new Date(this.year, this.month, 0).getDate();

if(this.day > allDay){

this.day = allDay;

}

}

将这个函数分别在handlePrev(),handleNext()里面执行-------注意是this.computedDay();

440ef54c84e587ca3e1d21ecac33994c.png

完成

---恢复内容结束---

1.日历组件

1.分析功能:日历基本功能,点击事件改变日期,样式的改变

1.结构分析:html

4fcf8c49bd61a50d7ff5fbdca5190d72.png

1.分为上下两个部分

2.上面分为左按钮,中间内容展示,右按钮

下面分为周几展示和日期展示

3.基本结构页面html书写

2019年8月9日

v-for="item in ['日','一','二','三','四','五','六']"

:key= item

>{{ item }}

class="every-day"

v-for="item in 42"

:key="item"

>{{ item }}

*{

margin: 0px;

border: 0px;

list-style: none;

}

.calender2{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

height:380px;

width:420px;

border: 1px solid #ccc;

}

.date-header{

margin-left: 10px;

height: 40px;

width: 350px;

line-height: 40px;

text-align: center;

}

.pre-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent rgb(35, 137, 206) transparent transparent;

}

.next-month{

position: absolute;

display: inline-block;

height: 0px;

width:0px;

border:20px solid ;

border-color: transparent transparent transparent  rgb(35, 137, 206);

}

.show-date{

margin-left: 40px;

margin-top: 0px;

display: inline-block;

line-height: 40px;

text-align: center;

width: 310px;

color: rgb(35, 137, 206);

}

.week-header{

background: rgb(35, 137, 206);

color: #fff;

font-size: 14px;

text-align: center;

line-height: 20px;

}

.week-header div{

margin: 0;

padding: 0;

display: inline-block;

height: 20px;

width: 60px;

}

.every-day{

display: inline-block;

height: 50px;

width: 60px;

text-align: center;

line-height: 50px;

}

.other-day{

color: #ccc;

}

.now-day{

background: rgb(35, 137, 206);

}

.active-day{

/* padding: 2px */

/* border-sizing:content-box; */

border: 2px solid rgb(35, 137, 206);

}

7512d981c4eb0968428f89c4d63c9c4a.png

4.一些事件以及逻辑

1.使得当前的日期为今天的日期

{{ year }}年{{ month }}月{{ day }}日

data(){

return{

year:null,

month:null,

day:null

}

},

created(){

this.getInitDate();

},

methods:{

getInitDate(){

const date = new Date();

this.year = date.getFullYear();

this.month = date.getUTCMonth() + 1;

this.day = date.getDate();

}

}

2.设置该月日期起始值(找到一号是在哪里)

beginDay(){

return new Date(this.year, this.mounth - 1, 1).getDay();

}

3.当月天数字体正常显示

v-if="item - beginDay >= 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

4.当月天数之前的部分变灰,外加正常显示日期

注意几个数学问题:

1.当前月天数日期

2.上月剩余天数

3.此月显示的下月天数

v-if="item - beginDay > 0 && item - beginDay <= curDays"

>{{ item - beginDay }}

class="other-day"

v-else-if="item - beginDay <= 0"

>{{ item - beginDay + prevDays }}

class="other-day"

v-else>{{ item - beginDay -curDays }}

5.能知道当前日期,能点击其他日期,并且会有相应的变化

知道当前日期:

this.curDate = `${this.year}-${this.month}-${this.day}`

判断今天是不是当前日期,并且给一个样式:

'now-day':`${year}-${month}-${item - beginDays}` == curDate

当点击当月有的日期的时候会根据你的点击显示的日期发生变化

判断是点击的那一天:

'active-day':`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}`

点击这一天,绑定点击事件

@click="handleClickDay(item - beginDay)"

handleClickDay(day){

this.day = day

}

6.前后两个按钮的功能

handlePrev(){

if(this.month == 1){

this.month = 12

this.year--

}else{

this.month--

}

},

handleNext(){

if(this.month == 12){

this.month = 1

this.year++

}else{

this.month++

}

}

7.判断点击的是否为当月的最后一天

computedDay(){

const allDay = new Date(this.year, this.month, 0).getDate();

if(this.day > allDay){

this.day = allDay;

}

}

将这个函数分别在handlePrev(),handleNext()里面执行-------注意是this.computedDay();

440ef54c84e587ca3e1d21ecac33994c.png

完成

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370431.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven project module 依赖项目创建 ---转

一、创建Maven Project 1.右击 --> New --> Other&#xff0c;--> Maven --> Maven Project --> Next 2.如下图&#xff0c;选中Create a simple project --> Next 3.输入Group Id, Artifact Id, Version, Packaging选择pom&#xff0c;因为创建的Maven Pr…

linux常见命令搜集

查找根目录下txt和pdf文件 find / \( -name "*.txt" -o -name "*.pdf" \) -print 正则查找根目录下所有的txt和pdf文件 find / -regex ".*\(\.txt|\.pdf\)$"查找所有非txt文本 find . ! -name "*.txt" -print制定搜索深度 find ~ -max…

需加装饰——装饰模式

装饰模式指的是在不必改变原类文件和使用继承的情况下&#xff0c;动态地扩展一个对象的功能。它是通过创建一个包装对象&#xff0c;也就是装饰来包裹真实的对象。 类图分析 我们先假设一个业务场景&#xff0c;有三种房子需要装修&#xff0c;分别是公寓&#xff0c;木屋和别…

Vue2.0 --- vue-cli脚手架中全局引入JQ

第一步&#xff1a;安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断&#xff08;当前图片安装的是2.2.3版本&#xff0c;如果想安装更高或者其他可以更改版本号&…

Unity——用UnityEditor拷贝FBX中的AnimationClip

最近有个新需求&#xff0c;要用代码添加动画的事件&#xff0c;但是Unity不能直接修改FBX中的AnimationClip 在Animation窗口中可以看到&#xff0c;AnimationClip是Read-Only状态&#xff0c;用代码修改这个AnimationClip也是不会生效的&#xff0c;包括用代码添加事件 解决方…

mvc如何嵌套第三方页面_长文观点丨为什么我不再使用MVC框架?

原创&#xff1a; 张卫滨 译 Jean-Jacques Dubray是一名资深工程师&#xff0c;他最近引入了一个新的模式&#xff1a;状态-行为-模(State-Action-Model&#xff0c;SAM)。SAM是一个函数式反应型的编程模式&#xff0c;它致力于简化数据Model和View之间的交互。它究竟有何优点值…

JSON和XML的区别

转载于:https://www.cnblogs.com/mr-wuxiansheng/p/6974239.html

屏幕适配

rem是什么&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位&#xff0c;em&#xff08;font size of the element&#xff09;是指相对于父元素的字体大小…

【存储过程】MySQL存储过程/存储过程与自定义函数的区别

---------------------------存储过程-------------------- 语法: 创建存储过程: CREATE [definer {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parameter ...]]) [ characteristics..] routime_body 其中: proc_parameter : [IN|OUT|INOUT] parameter_…

Java死锁故障排除和解决

JavaOne年度会议的一大优点是&#xff0c;主题专家介绍了几个技术和故障排除实验室。 其中的一个实验室今年特别吸引了我的注意力&#xff1a;“ HOL6500-查找和解决Java死锁 ”&#xff0c;由Java冠军Heinz Kabutz提出 。 这是我在该主题上看到的最好的演示之一。 我建议您自己…

3. HTML中的容器标签

什么是容器标签&#xff1f;在HTML开发中我们常常会使用一类标签作为容器放置一些内容&#xff0c;我们把这类标签称之为容器标签&#xff0c;可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签&#xff0c;在这里我们就来总结下这些内容。 列表标签 1 <!-- 无…

GitHub上Java的Bloom Bloom实现

布隆过滤器是集数据结构的一种 。 对于那些不了解的对象&#xff0c;“设置数据结构”仅包含一个主要方法。 它仅用于确定特定元素是否包含在一组元素中。 大多数数据结构&#xff08;例如Hash Map &#xff0c; Linked List或Array &#xff09;都可以相当轻松地创建此函数。 …

ni软件管理器_NI 技术支持丨我的 NI 硬件设备不能被识别,怎么办?Windows

这篇指南可以帮助您解决在您的 Windows 系统上无法识别您的 NI 硬件有关的问题。症状包括以下几种情况&#xff1a;连接至 USB 端口时&#xff0c;硬件上的 LED 灯不亮/不闪烁。连接至 USB 后已连接设备的 LED 灯持续闪烁。仅限音频接口&#xff1a;该设备在音频应用程序或 Win…

在Java应用程序中使用密码学

这篇文章描述了如何使用Java密码体系结构 &#xff08;JCA&#xff09;&#xff0c;该体系结构使您可以在应用程序中使用密码服务。 Java密码体系结构服务 JCA提供了许多加密服务&#xff0c;例如消息摘要和签名 。 这些服务可以通过特定于服务的API来访问&#xff0c;例如Me…

CSS学习笔记-04 a标签-导航练习

个人练习&#xff0c;各位大神勿笑 。。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&qu…

深度学习loss值变为0_利用TensorFlow2.0为胆固醇、血脂、血压数据构建时序深度学习模型(python源代码)...

背景数据描述胆固醇、高血脂、高血压是压在广大中年男性头上的三座大山&#xff0c;如何有效的监控他们&#xff0c;做到早发现、早预防、早治疗尤为关键&#xff0c;趁着这个假期我就利用TF2.0构建了一套时序预测模型&#xff0c;一来是可以帮我预发疾病&#xff0c;二来也可以…

在Spring MVC Web应用程序中使用reCaptcha

CAPTCHA是一种程序&#xff0c;可以生成人类可以通过的测试并对其进行评分&#xff0c;而计算机程序“ 不能 ”通过。 所采取的策略之一是向用户显示具有扭曲文本的图像&#xff0c;并且用户应在输入区域中书写文本。 如果显示的文字与用户输入的文字相同&#xff0c;则我们可以…

课时109.外边距合并现象(掌握)

我们先写一个案例&#xff0c;通过案例来了解 它们之间的水平距离就是两个间距的和 我们看完水平再来看垂直方向 在默认布局的垂直方向上&#xff0c;默认情况下外边距是不会叠加的&#xff0c;会出现合并现象&#xff0c;谁的外边距比较大就听谁的 本文转载于:猿2048➜https:…

纯 CSS实现三角形

最近项目上做评论回复&#xff0c;设计师提高交互性特意设计了小三角&#xff0c;如下&#xff1a; 下面介绍一下实现效果的css方法&#xff1a; 1.border 通过设置上下左右border宽度来实现。 首先查看一下全部设置的效果&#xff1a; <style>   .triangle{     w…

Spring MVC表单验证(带批注)

这篇文章提供了一个简单HTML表单验证示例。 它基于带有注释的Spring MVC示例。 该代码可在GitHub的Spring-MVC-Form-Validation目录中找到。 数据 在此示例中&#xff0c;我们将使用bean和JSR303验证批注&#xff1a; public class MyUser {NotNullSize(min1,max20)private …