分类：日历

2020
11-03

用vue写一个日历

之前在上家公司做过一个公司人员考勤的东西，里面需要用到日历，当时自己用vue随便写了一个，比较简单，删掉了其他功能的代码，只留下日历，直接看代码<template><divclass="lookForMonth_wrapper"><divclass="lookForMonth_top"><divclass="selectDate"><div>{{year}}年{{month}}月</div><divclass="upDownSelect"><divclass="upDownSelect_item"@click="dateUp"></div><divclass="upDownS... 继续阅读 >
2020
10-15

如何通过JS实现日历简单算法

最近有用到日历可需要编辑文本的日历，为了绑定数据的方便，所以用js写了一套日历，其实思想也是很简单。实现步骤如下：1、首先取得处理月的总天数js不提供此参数，我们需要计算。考虑到闰年问题会影响二月份的天数，我们先编写一个判断闰年的自编函数：functionis_leap(year){return(year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));}2、接着定义一个包含十二个月在内的月份总天数的数组：m_days=newArr... 继续阅读 >
2020
10-13

原生JS实现相邻月份日历

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>原生JS写的日历月历-demobyjs.alixixi.com</title><styletype="text/css"><!--body{font-size:14px;line-height:20px;margin:0px;padding:0px;text-align:... 继续阅读 >
2020
10-10

vue+elementUI实现简单日历功能

vue+elementUI实现简单日历功能 vue+elementUI简单的实现日历功能，供大家参考，具体内容如下<divclass="calender2"><divclass="date-headers"><divclass="date-header"><div><el-buttontype="primary"@click="handlePrev"><iclass="el-icon-arrow-left"></i>上一月</el-button></div><div>{{year}}年{{month}}月{{day}}日</div><div><el-buttontype="primary"@click="handleNext">下一月<iclass="el-icon-arrow-right"></i></el-... 继续阅读 >
2020
10-10

JavaScript实现简单日历效果

JavaScript实现简单日历效果 本文实例为大家分享了JavaScript实现简单日历效果的具体代码，供大家参考，具体内容如下实现效果：根据所选择的年月，列出当月对应是周几，效果图如下：实现思路：1、使用select标签保存年月的所选菜单。使用table标签保存当月天数，表头为固定的周日周一等。2、使用option对象，给年月循环赋值。3、将每月的天数保存到数组中，根据所选的年月获取当月的天数，以及当月一号对应周几，对应周几就在第一行先打印几个空格，然后从一号... 继续阅读 >
2020
10-10

jQuery实现日历效果

本文实例为大家分享了jQuery实现日历效果的具体代码，供大家参考，具体内容如下jquery是用的是2.0版本。1、html代码<!DOCTYPEhtml><!--基于W3C标准不用做任何修改--><html><!--起始标准--><head><!--设置初始化文档信息和文档管理标注--><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><!--整个页面编码utf-8国际编码通用性最强，GBK/gb2312中文--><!--页面三要素--><title>显示详细签到详情</title... 继续阅读 >
2020
10-08

element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

element日历calendar组件上月、今天、下月、日历块点击事件及模板源码  辰小白小白最近在写日历模板，项目已经用了element组件，奈何element日历组件官方文档提供的资料实在太少了。所以这里希望有相关开发需要的朋友能够少走一些辰小白踩过的坑。首先展示一些模板效果图： 这个项目的详细介绍可以下辰小白的这篇文章：后端开发的福音，vue+element实现的vue-element-admin前台框架，开箱即用下面是日历模板首页源码<template><div><el-cardclass="_calendar"><el-container><el... 继续阅读 >
2020
09-29

Android自定义日历效果

Android自定义日历效果 因为工作功能需求，自定义一个日历，效果如下，点击选中日历使用github上面一个前辈的框架implementation'com.necer.ncalendar:ncalendar:5.0.0'implementation'com.github.CodingEnding:PopupLayout:v1.0'//poplayout框架使用基本类型地址，大家可以根据需要学习修改：地址自定义日历的xml文件<?xmlversion="1.0"encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schema... 继续阅读 >
2020
09-28

基于javascript实现日历功能原理及代码实例

日历在学习javascript过程中，菜鸟教程有一个javascript实例---css日历，感觉挺有趣的，在它的基础上增加了一些简单的功能（差点哭辽）。功能按照传统日历方式显示该月的每一天。可以突出显示今天的日期可以翻阅上一个月和下一个月的日历实现step1传统日历布局样式：分别将年份与月份、星期、该月的全部天数采用列表布局，排列组成传统日历的样式。step2初始化和更新月份：先将列表清空（debug过程中，有一个发现，... 继续阅读 >
2020
09-24

原生js实现日历效果

本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下html代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>日历插件</title><linkrel="stylesheet"href="./css/reset.css"><linkrel="stylesheet"href="./css/index.css"></head><body><di... 继续阅读 >