【HelloWorld.vue】

<template>
<div class="hello">
<van-row class="m-header">
<van-col span="">
<van-icon name="arrow-left" class="m-header-icon" />内容</van-col>
</van-row>
<van-button type="primary" @click="showpopup">按钮</van-button>
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="date"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
/>
</van-popup>
</div>
</template>
<script>
import { Popup } from 'vant';
Vue.use(Popup);
export default {
data() {
return {
show: false,
minDate: new Date(,,),
maxDate: new Date(,,),
currentDate: new Date()
};
},
methods:{
popup:function(){
if(!this.show){
this.show = true;
}else{
this.show = false;
}
},
formatter(type, value) {
  if (type === 'year') {
  return `${value}年`;
  } else if (type === 'month') {
   return `${value}月`
  } else if (type === 'day') {
  return `${value}日`
  }
  return value;
  }
}
};
</script>

position弹框位置等属性查看vant API 【Popup 弹出层】

type="datetime"

具体到时间

type="year-month"

只有年、月

vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】的更多相关文章

  1. layer弹框,弹出后自动关闭

    今天做项目,出现一个问题,需求是用ajax做文件上传功能,代码写好之后,测试发现问题. 弹出层出现以后我没有主动点击确定和关闭等操作,程序自动关闭了弹出层 一步一步排查,找到了错误,首先,先确认你页面 ...

  2. elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错

    ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...

  3. cookie-在关闭浏览器之前弹框只弹一次

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title> ...

  5. iOS 15 无法弹出授权弹框之解决方案---Your app uses the AppTrackingTransparency framework, but we are unable to locate the App Tracking Transparency permission request when reviewed on iOS 15.0

    2021年9月30日下午:我正愉快的期盼着即将到来的国庆假期,时不时刷新下appstoreconnect的网址,28号就提上去的包,今天还在审核中....由于这个版本刚升级的xcode系统和新出的iO ...

  6. [组件封装]微信小程序-底部弹框

    描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...

  7. html自定义弹框

    一.要实现的功能 1.弹框弹出时有遮罩 2.弹框内的文字过多时右侧有滚动条 3.根据执行结果变更弹框title的样式   二.具体实现 思路:定义一个有宽高的div,默认隐藏,当要显示时,设置为dis ...

  8. 在弹框中获取foreach中遍历的id值,并传递给地址栏(方法2)

    1.php有时候我们需要再弹框中获取foreach中遍历的数据(例如id),在弹框中点击按钮并传递给地址栏跳转.那么应该怎么做呢.第二种方法. 2. 可以在弹框中给出一个input hidden 点击 ...

  9. pc端弹框

    pc弹框插件:http://aui.github.io/artDialog/doc/index.html#quickref-bubble PC端,手机端,layui很好用,分页啥的:http://ww ...

随机推荐

  1. 两种简单实现菜单高亮显示的JS类(转载)

    两种简单实现菜单高亮显示的JS类   近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web ...

  2. [原]CentOS 7 网卡子接口的创建

    OS:CentOS 7 在linux上创建vlan需要加载802.1q模块: 1.检测OS是否已经加载802.1q模块 [root@controller ~]# modinfo 8021q filen ...

  3. 微信小游戏 main.js没有被压缩

    发布时,发现main.js没有被压缩. 在config.wxgame.ts里增加如下图.

  4. 【CF526F】Pudding Monsters cdq分治

    [CF526F]Pudding Monsters 题意:给你一个排列$p_i$,问你有对少个区间的值域段是连续的. $n\le 3\times 10^5$ 题解:bzoj3745 Norma 的弱化版 ...

  5. 中小学教育缴费----支付宝回传数据.net core 接收中文乱码

    问题描述: 中小学教育缴费,发送账单到家长支付宝,家长支付成功之后,支付宝回传数据,验签的时候失败了,排查之后发现账单名称乱码了.支付宝回传的时候中文传的是GBK编码格式,但是我接收的是%D5˵%A5 ...

  6. at MySql.Data.MySqlClient.MySqlStream.ReadPacket 或 FUNCTION account.AddMinutes does not exist

    Application Exception MySql.Data.MySqlClient.MySqlException FUNCTION account.AddMinutes does not exi ...

  7. SQL中的between and

    "between xx and  xx "在SQL中的用法 这个大家都很熟悉,但是当问到是否包含两端的值时,就有点儿不确定了.在W3School网站上,有这样的一段话: 参考:ht ...

  8. vue + vue-router+vuex+elementUI开发环境搭建

    先在npm中安装vue脚手架, //先安装国内镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装vue cn ...

  9. HDU5988/nowcoder 207G - Coding Contest - [最小费用最大流]

    题目链接:https://www.nowcoder.com/acm/contest/207/G 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5988 ...

  10. 查询大数据表的效率对比:Linq to SQL、Entity Framework、企业库存储过程、ADO.Net

    最近因为要开发大数据量网站,特作比较. Linq to SQL 查询 记录数:399997Linq to SQL 查询 Milliseconds:1910视图查询 记录数:399997视图查询 Mil ...