vue-hash-calendar,移动端日期时间选择插件
按照惯例,先上效果图



vue-hash-calendar
- 基于 vue 2.X 开发的日历组件
- 支持手势滑动操作·1
- 原生 js 开发,没引入第三方库
- 上下滑动 切换 周/月 模式
【周模式中】 左右滑动可切换 上一周/下一周
【月模式中】 左右滑动可切换 上一月/下一月
安装使用说明
npm i vue-hash-calendar
// 在入口文件中(main.js),导入组件库
import vueHashCalendar from 'vue-hash-calendar'
// 引入组件CSS样式
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
// 注册组件库
Vue.use(vueHashCalendar)
// 在VUE文件中引入组件
<vue-hash-calendar></vue-hash-calendar>
CDN 方式引入
//在 index.html 加入以下两个 CDN 链接:
js CDN:https://cdn.jsdelivr.net/npm/vue-hash-calendar@1.1.17/lib/vue-hash-calendar.umd.min.js
css CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@1.1.17/lib/vue-hash-calendar.css
//然后在 webpack 配置中,加入以下配置。
externals: {
'vue-hash-calendar': 'VueHashCalendar'
},
Demo

或者请用浏览器的手机模式查看:https://www.hxkj.vip/demo/calendar/
-
vue-hash-calendar,移动端日期时间选择插件的更多相关文章
- 基于zepto的移动端日期+时间选择插件
前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各 ...
- react-hash-calendar,移动端日期时间选择插件
按照惯例,先上效果图 vue 版本同款日历:https://github.com/TangSY/vue-hash-calendar react-hash-calendar 支持手势滑动操作 上下滑动 ...
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- vue3-hash-calendar,一款基于vue3.x开发的移动端日期时间选择组件
在大家的催更下,鸽了一天又一天,vue3-hash-calendar 终于在今天诞生了. 按照惯例,先上效果图 Demo 扫描上方二维码或者请用浏览器的手机模式查看:https://www.hxkj. ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑
$(function () { var currYear = (new Date()).getFullYear(); var opt={}; //opt.date = {preset : 'date' ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 基于zepto的移动端日期和时间选择控件
前段时间给大家分享过一个基于jQuery Mobile的移动端日期时间拾取器,大家反应其由于加载过大的插件导致影响调用速度.那么今天我把从网络上搜集到的两个适合移动端应用的日期和时间选择插件分享给大家 ...
随机推荐
- Atcoder F - Mirrored(思维+搜索)
题目链接:http://arc075.contest.atcoder.jp/tasks/arc075_d 题意:求rev(N)=N+D的个数,rev表示取反.例如rev(123)=321 题解:具体看 ...
- hdu 5969 最大的位或(贪心)
Problem Description B君和G君聊天的时候想到了如下的问题.给定自然数l和r ,选取2个整数x,y满足l <= x <= y <= r ,使得x|y最大.其中|表示 ...
- CF990B Micro-World 贪心 第十六
Micro-World time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- cve_2019_0708_bluekeep复现采坑
0X01 简介 Microsoft Windows是美国微软公司发布的视窗操作系统.远程桌面连接是微软从Windows 2000 Server开始提供的功能组件. 2019年5月14日,微软发布了月度 ...
- linux部署html代码到linux服务器,并进行域名解析
本博客主要是说一下,如何将本地写好的html代码部署到linux服务器,并进行解析.下一篇博客将写一下,如何将html代码部署到阿里云服务器,并进行域名解析,以及在部署过程中遇到的问题和解决方法. 1 ...
- Python 为了提升性能,竟运用了共享经济
大家或许知道,Python 为了提高内存的利用效率,采用了一套共用对象内存的分配策略. 例如,对于那些数值较小的数字对象([-5, 256]).布尔值对象.None 对象.较短的字符串对象(通常 是 ...
- Corosync fence盘替换
前面创建盘的步骤省略 1.在节点A执行: sbd -d /dev/mapper/fence_lun001 -d /dev/mapper/fence_lun002 -d /dev/mapper/fenc ...
- ACM代码模板
功能介绍 写了I/O函数,支持以下几种方式 read(num); //读入一个数num(任意整数类型,下同) read(num1,num2,num3,num4); //读入任意多个数 read(arr ...
- IBM DB2 SQL error code list
SQL return codes that are preceded by a minus sign (-) indicate that the SQL statement execution was ...
- Day 15 文件打包与压缩
1.什么是文件压缩? 将多个文件或目录合并成为一个特殊的文件.比如: 搬家...脑补画面 img. 2.为什么要对文件进行压缩? 当我们在传输大量的文件时,通常都会选择将该文件进行压缩,然后在进行传输 ...
- 基于zepto的移动端日期+时间选择插件