使用uni-poup制作日历弹出框

template:

下面是uni-poup代码，uni-poup插件需要到uni-app插件商城下载

<uni-popup ref="calendarPop" type="center">

@click="$refs.calendarPop.close()"

class="iconfont icon-cha theme_color"

style="font-size: 44rpx"

></i>

</view>

<picker

data-box="listParams"

data-attr="start_time"

mode="date"

class="gray flex1"

@change="handlePickerDate"

</picker>

</view>

<picker

data-box="listParams"

data-attr="end_time"

mode="date"

class="gray flex1"

@change="handlePickerDate"

</picker>

</view>

</uni-popup>

methods里面写

handlePickerDate(e) {//当你开始时间，结束时间都选择，e会打印两次，第一次为开始时间，第二次未结束时间

let { value } = e.detail;

let { box, attr } = e.currentTarget.dataset;

this[box][attr] = value;

this.pullDownRefresh();//只是为了刷新页面

使用uni-poup制作日历弹出框相关推荐

用CSS制作日历弹出框的心得
* 整体思路 1.用table做,本来认为一定要给td设定宽高,后来发现其实不用,经测验,td为inline-block,可以设置宽高,默认也会靠正常流的内容自动撑开. 2.td内插入一个a标签,将其 ...
[原]一步一步自己制作弹出框
说到javascript弹出框的制作,将其实现步骤分开,其实很容易. 下面,将拆分页面弹出框的制作步骤. 首先,准备编辑工具(废话),其实,您可以使用notepad..嘿嘿. 弹出框的组成结构: ...
axure 点击按钮弹出框_Axure动态面板教程：弹出框效果的制作
作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件--Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成 ...
使用popwindow制作弹出框与获得焦点弹出软键盘
如果是声明一各类 public class VideoFilterDialog extends PopupWindow 那么在构造方法中添加: conentView = inflater.inflat ...
干掉MessageBox，自定义弹出框JMessbox (WindowsPhone)
先上效果图 QQ退出效果 ...
asmx 接受 ajax post,jQuery ajax调用web服务（asmx）触发认证弹出框
在我的asp.net 4.0电子商务web应用程序中,登录的客户可以点击锚点,如"过去6个月内的订单"或"订单去年"来查看他过去的订单.当点击这样的锚,我做一个 ...
纯div+css制作的弹出菜单
纯div+css制作的弹出菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
lhgdialog弹出框组件参数详解(自己曾经开发的fuzz项目中用到过)
lhgdialog弹出框组件参数详解鸣谢:http://blog.csdn.net/hurryjiang/article/details/7657623 同文:http://wjch-111.it ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...

使用uni-poup制作日历弹出框

使用uni-poup制作日历弹出框相关推荐

最新文章

热门文章