首页 > js教程 > 正文

vue.js的原生日历实现方法

原创 2018-03-14 0 416

之前的CSDN编译器有问题,所以现在重新整理出来给大家,本文主要和大家分享vue.js的原生日历实现方法,希望能帮助到大家。

先po上效果图:

这里写图片描述

html代码:

  <script type="text/x-template" id="calendar">
        <p id="">
            <!-- 年份 月份 -->
            <p class="month">
                <ul>
                    <!--点击会触发pickpre函数,重新刷新当前日期 @click(vue v-on:click缩写) -->
                    <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
                    <li class="year-month" @click="pickYear(currentYear,currentMonth)">
                        <span class="choose-year">{{ currentYear }}</span>
                        <span class="choose-month">{{ currentMonth }}月</span>
                    </li>
                    <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
                </ul>
            </p>
            <!-- 星期 -->
            <ul class="weekdays">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li style="color:red">六</li>
                <li style="color:red">日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
                <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                <li v-for="dayobject in days">
                    <!--本月-->
                    <!--如果不是本月  改变类名加灰色-->

                    <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>

                    <!--如果是本月  还需要判断是不是这一天-->
                    <span v-else>
                        <!--今天  同年同月同日-->
                        <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
                            class="active">{{ dayobject.day.getDate() }}</span>
                        <span v-else>{{ dayobject.day.getDate() }}</span>
                    </span>

                </li>
            </ul>
        </p>
    </script>
    <p id="app">
        <calendar></calendar>
    </p>

js代码:

  Vue.component("calendar", {
            template: "#calendar",
            data: function () {
                return {
                    currentDay: 1,
                    currentMonth: 1,
                    currentYear: 1970,
                    currentWeek: 1,
                    days: [],
                }
            },
            created() {                let that = this;
                that.initData(null);
            },
            methods: {
                initData: function (cur) {
                    let that = this;                    let leftcount = 0; //存放剩余数量
                    let date;                    if (cur) {
                        date = new Date(cur);
                    } else {                        let now = new Date();                        let d = new Date(that.formatDate(now.getFullYear(), now.getMonth(), 1));
                        d.setDate(35);
                        date = new Date(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                    }
                    that.currentDay = date.getDate();
                    that.currentYear = date.getFullYear();
                    that.currentMonth = date.getMonth() + 1;
                    that.currentWeek = date.getDay(); // 1...6,0
                    if (that.currentWeek == 0) {
                        that.currentWeek = 7;
                    }                    let str = that.formatDate(that.currentYear, that.currentMonth, that.currentDay);
                    that.days.length = 0;                    // 今天是周日,放在第一行第7个位置,前面6个
                    //初始化本周
                    for (let i = that.currentWeek - 1; i >= 0; i--) {                        let d = new Date(str);
                        d.setDate(d.getDate() - i);                        let dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
                        dayobject.day = d;
                        that.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
                    }                    //其他周
                    for (let i = 1; i <= 35 - that.currentWeek; i++) {                        let d = new Date(str);
                        d.setDate(d.getDate() + i);                        let dayobject = {};
                        dayobject.day = d;
                        that.days.push(dayobject);
                    }

                },
                pickPre: function (year, month) {
                    let that = this;                    // setDate(0); 上月最后一天
                    // setDate(-1); 上月倒数第二天
                    // setDate(dx) 参数dx为 上月最后一天的前后dx天
                    let d = new Date(that.formatDate(year, month, 1));
                    d.setDate(0);
                    that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
                pickNext: function (year, month) {
                    let that = this;                    let d = new Date(that.formatDate(year, month, 1));
                    d.setDate(35);
                    that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                },
                pickYear: function (year, month) {
                    alert(year + "," + month);
                },                // 返回 类似 2016-01-02 格式的字符串
                formatDate: function (year, month, day) {
                    let y = year;                    let m = month;                    if (m < 10) m = "0" + m;                    let d = day;                    if (d < 10) d = "0" + d;                    return y + "-" + m + "-" + d
                },
            }
        })        let vm = new Vue({
            el: '#app',
        })

css代码:

* {    margin: 0;    padding: 0;}/*日历*/#calendar 
{    width: 98%;    
border: 2px solid #A4A7B0;    
height: 335px;   
margin-left: 0.5%;}.month 
{    width: 92%;    height: 48px;    
border: 2px solid #FFFFFF;    
margin-left: 3%;    margin-top: 20px;}.month ul 
{    margin: 0;    padding: 0;    
display: flex;    
margin-top: 11px;    
justify-content: space-between;}.year-month 
{    flex-direction: column;    
align-items: center;    
justify-content: space-around;}.choose-year 
{    padding: 0 20px;   
font-size: 16px;    
font-weight: 200;}.choose-month 
{    text-align: center;    
font-size: 16px;    
font-weight: 200;}.arrow 
{    width: 3%;   
 height: 25px;}.arrow1 
 {    background: url(left.png) no-repeat 0 0 /100% 100%;    
 margin-left: 44px;}.arrow2 
 {    background: url(right.png) no-repeat 0 0 /100% 100%;   
  margin-right: 44px;}.month ul li {    color: #999;    
  font-size: 20px;    
  text-transform: uppercase;    
  letter-spacing: 3px;    
  list-style: none;}.weekdays 
  {    margin: 0;    
  color: #FFFFFF;    
  background: #A4A7B0;    
  width: 96.6%;    
  margin-top: 26px;    
  height: 34px;    
  line-height: 34px;    
  margin-left: 2.2%;}.weekdays li 
  {    display: inline-block;    
  text-align: center;    
  color: #11616f;    
  font-size: 14px;    
  font-weight: 100;    
  width: 12.7%;}.days 
  {    padding: 0;    
  margin: 0;    
  display: flex;    
  flex-wrap: wrap;    
  justify-content: space-around;}.days 
  li {    list-style-type: none;    
  display: inline-block;    
  width: 14.2%;    
  text-align: center;    
  padding-bottom: 3px;    
  padding-top: 7px;    
  font-size: 12.78px;    
  color: rgb(14, 220, 235);    
  font-weight: 200;}.days li span span 
  {    height: 29.5px;    
  width: 27px;    
  line-height: 29.5px;    
  display: inline-block;}.days li .class-30 
  {    background: url(bg_30.png) no-repeat 0 0 /100% 100%;}.days li .class-60 
  {    background: url(bg_60.png) no-repeat 0 0 /100% 100%;}.days li .class-3060 
  {    background: url(bg_3060.png) no-repeat 0 0 /100% 100%;}.days li .other-month 
  {    padding: 5px;    color: #84a8ae;}

相关推荐:

js最简单的原生日历

以上就是vue.js的原生日历实现方法的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript Vue.js 方法
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 小云云

      学生

    • 想不好签名了...
    • 5865篇
      文章总数
    • 416
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新