微信小程序日历插件代码实例

这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.wxml代码

<view class="timePick">
  <picker mode="date" fields="month" value="{{timestamp}}" start="1999-01-01" end="2999-12-12" bindchange="datePickerBindchange">
   {{dateValue}}
  </picker>
 </view>

2.js

data: {
  searchDate:"",
  timestamp:""
 },
onLoad: function(options) {
  //日历默认值设置
  this.timestamp=new Date().getTime()
 },
datePickerBindchange:function(e){
  let date = e.detail.value+'-01 00:00:00.0';
  date = date.substring(0,19);
  // date = date.replace(/-/g,'/');
  let timestamp = new Date(date).getTime(); //插件再次打开时日期
  let picktime=e.detail.value
  let timeString=picktime.replace(/-/g,'年')+'月';
  // this.setData({
  //  dateValue:e.detail.value
  // })
  this.setData({
   searchDate:date,
   // searchDate:picktime,
   dateValue:timeString,  //1019年12月
   timestamp:picktime,
  })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

  • 使用AWK在shell中生成日历小程序

    最近在学习sed和awk时,发现了一本入门级别的好书:<Software Design 中文版 03>. 我们这里的日历程序也是从那里得来,这里强烈推荐希望了解sed和awk的同志们入手本书. 代码段: # 在shell中生成日历 # 使用方式 # awk -f thisFile +2017 # awk -f thisFile +2017.10 # awk -f thisFile +2017.10.10 # function whichWeek(y, m, d, s) { s = 0 if (

  • 小程序实现日历左右滑动效果

    本文实例为大家分享了小程序日历左右滑动效果的具体代码,供大家参考,具体内容如下 效果图 wxml <scroll-view class="scroll-view" scroll-left="{{scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation> <view class='item' style='width:{{itemWidth}}px' wx:for="{{date

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

  • 小程序实现带年月选取效果的日历

    本文实例为大家分享了小程序日历展示的具体代码,供大家参考,具体内容如下 根据前面的日历,又遇到到个好玩的日历需求,分享给大家 这是个带年月左右选取的日历展示!并且当天的对应日会被高亮显示!下面看下实现代码! 1.wxml代码结构 <view class='wrap'> <view> <view class='date-show'> <view class='lt-arrow' bindtap='lastMonth'> <image src='../im

  • 微信小程序日历弹窗选择器代码实例

    应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进! 先上一个效果图:(当天日期为2018-4-18) 时间改为5月份的效果图: 直接上代码: wxml: <view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'> <view class="weui-cell weui-cell_access&qu

  • 微信小程序可滑动周日历组件使用详解

    微信小程序可滑动周日历组件,供大家参考,具体内容如下 看网上周日历组件比较少,自己弄了一个,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突 展示一下效果图 在components组件文件夹下新建calendarWeek文件夹 直接上代码吧: index.wxml <!--components/calendarWeek/index.wxml--> <!-- 日历 --> <view class="date-choose shrink border-bott

  • 微信小程序实现打卡日历功能

    生活中有各种可以打卡的app,例如背单词打卡什么的,本人觉得很有意思,于是本人在大二时做了一款诚信状打卡的微信小程序,这里讲述一下编写的过程. 先说一下开发环境:用的是微信web开发工具开发的,后台采用了Bmob后台,比较方便. 先展示一下成果: 话不多说,直接上代码,里面也有挺多的注释,以防自己忘记,当然各位如果直接复制过去肯定不能有当前的效果,注意后台数据的交互,不过做一个界面还是没有问题的. Calendar.wxml 页面文件 页面上显示出来的东西,布局上主要是一个年月栏.上一个月和下一

  • 微信小程序日历插件代码实例

    这篇文章主要介绍了微信小程序日历插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.wxml代码 <view class="timePick"> <picker mode="date" fields="month" value="{{timestamp}}" start="1999-01-01" end="2999-

  • 微信小程序图表插件(wx-charts)实例代码

    微信小程序图表工具,charts for WeChat small app 基于canvas绘制,体积小巧 支持图表类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 代码分析 Here 参数说明 opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas宽度,单位为px opts.height Number required can

  • Python爬取微信小程序通用方法代码实例详解

    背景介绍 最近遇到一个需求,大致就是要获取某个小程序上的数据.心想小程序本质上就是移动端加壳的浏览器,所以想到用Python去获取数据.在网上学习了一下如何实现后,记录一下我的实现过程以及所踩过的小坑.本文关键词:Python,小程序,Charles抓包 目标小程序: 公众号"同城商圈网"左下角"找商家"->汽车维修->小车维修->所有的商家信息,如下图所示: 环境 PC端:Windows 10 移动端:iPhone 软件:Charles Char

  • 微信小程序实现购物车代码实例详解

    其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在onShow中,而不是onLoad中: onShow: function () { const cart = wx.getStorageSync("cart"); let address = wx.getStorage

  • 微信小程序日历组件calendar详解及实例

    微信小程序日历组件calendar详解及实例 模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('

  • 微信小程序 蓝牙的实现实例代码

    微信小程序 蓝牙的实现实例代码 1.简述 蓝牙适配器接口是基础库版本 1.1.0 开始支持. iOS 微信客户端 6.5.6 版本开始支持,Android 客户端暂不支持 蓝牙总共增加了18个api接口. 2.Api分类 搜索类 连接类 通信类 3.API的具体使用 详细见官网: https://mp.weixin.qq.com/debug/wxadoc/dev/api/bluetooth.html#wxgetconnectedbluethoothdevicesobject 4. 案例实现 4.

  • 微信小程序上传图片到服务器实例代码

    上传图片到服务器: 1.先在前端写一个选择图片的区域来触发wx.chooseImage接口并用wx.setStorage接口把图片路径存起来. -wxml <view class="shangchuan" bindtap="choose"> <image style="width:100%;height:100%;" src="{{tempFilePaths}}"></image> <

  • 微信小程序图表插件wx-charts用法实例详解

    本文实例讲述了微信小程序图表插件wx-charts用法.分享给大家供大家参考,具体如下: 微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图.线图.柱状图 .区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个 支持图标类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 雷达图 radar 如何使用? 1. 直接引用编译好的文件 dist/charts.js(js下载地址) .wxml

随机推荐