微信小程序日期选择器实例代码
作者:QGqiezi 发布时间:2023-08-19 00:22:57
标签:微信小程序,选择器
/* JS代码部分 */
3 const date = new Date()
const years = []
const months = []
const days = []
const hours = []
const minutes = []
var thisMon = date.getMonth();
var thisDay = date.getDate();
for (let i = 2017; i <= date.getFullYear() + 1; i++) {
years.push(i)
}
for (let i = date.getMonth(); i <= 11; i++) {
var k = i;
if (0 <= i && i < 9) {
k = "0" + (i + 1);
} else {
k = (i + 1);
}
months.push(k)
}
if (0 <= thisMon && thisMon < 9) {
thisMon = "0" + (thisMon + 1);
} else {
thisMon = (thisMon + 1);
}
if (0 <= thisDay && thisDay < 10) {
thisDay = "0" + thisDay;
}
var totalDay = mGetDate(date.getFullYear(), thisMon);
for (let i = 1; i <= 31; i++) {
var k = i;
if (0 <= i && i < 10) {
k = "0" + i
}
days.push(k)
}
for (let i = 0; i <= 23; i++) {
var k = i;
if (0 <= i && i < 10) {
k = "0" + i
}
hours.push(k)
}
for (let i = 0; i <= 59; i++) {
var k = i;
if (0 <= i && i < 10) {
k = "0" + i
}
minutes.push(k)
}
function mGetDate(year, month) {
var d = new Date(year, month, 0);
return d.getDate();
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: thisMon,
days: days,
day: thisDay,
value: [1, thisMon - 1, thisDay - 1, 0, 0],
hours: hours,
hour: "00",
minutes: minutes,
minute: "00",
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]],
hour: this.data.hours[val[3]],
minute: this.data.minutes[val[4]],
})
var totalDay = mGetDate(this.data.year, this.data.month);
var changeDate = [];
for (let i = 1; i <= totalDay; i++) {
var k = i;
if (0 <= i && i < 10) {
k = "0" + i
}
changeDate.push(k)
}
this.setData({
days: changeDate
})
},
})
/* css代码部分 */
.time-title{
float:left;
width:20%;
text-align:center;
color:#45BCE8;
}
.picker-text{
text-align:center;
}
/*mask*/
.time_screens {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
opacity: 0.5;
overflow: hidden;
}
/* html代码部分 */
<view class="time_screens">
<view style="text-align:center;color:#45BCE8">{{year}}-{{month}}-{{day}}
<label style="float:left;margin-left:30px;">取消</label>
<label style="float:right;margin-right:30px;">确定</label>
</view>
<view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">
</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column class="picker-text">
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column class="picker-text">
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column class="picker-text">
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
/* Json */
{
"navigationBarTitleText": "XXXX"
}
总结
以上所述是小编给大家介绍的微信小程序日期选择器实例代码,希望对大家有所帮助
来源:https://www.cnblogs.com/QGqiezi/archive/2018/07/18/9328265.html
0
投稿
猜你喜欢
- em 和 strong 的区别,可以从三个层次上来谈。首先看 HTML 4.01 中的说明:EM: Indicates emphasis.S
- 本文总结了input的各种使用方法,挺全面的1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus
- 网站或应用的登录页面有时候通常用户会看很多遍,同时也有机会诱使临时用户注册,所以,一个设计良好的登录页面会比你想象的更有用。这里是一些我们收
- 安全性问题一直DBA是比较关心的问题,因为建立数据库的目的就是让相关的的客户端来进行访问,所以很难避免不出现安全隐患,例如客户端链接的权限、
- 装饰器模式(Decorator Pattern)是什么装饰器模式是一种结构型模式,它允许你在运行时为一个对象动态地添加新的行为,而不影响其原
- 汉字转换为UTF-8的一段代码终于找到这段代码了,一个ASP写的中文转UTF-8,大家可以试试function chinese2u
- 代码如下:---找出促销活动中销售额最高的职员 ---你刚在一家服装销售公司中找到了一份工作,此时经理要求你根据数据库中的两张表
- 设计网站的同志背景主要有两种:学计算机、学艺术。基本上会写代码的不懂设计,会设计的不懂代码,这个格局似乎到今天还没变。某些学计算机的同学,有
- 双击编辑功能如何实现:例如:标题 (鼠标双击“标题”文字 即出现可编辑的输入框形式及提交按钮) <!D
- 这是一篇关于怎样精简代码和Asp 特征以获得最快执行速度的详细文章。对于一个急燥的用户来说,任何在按下用户按钮到结果出现在它们的屏幕之间的延
- 使用 Microsoft® SQL Server™ 2000,可以选择在一台计算机上安装 SQL Ser
- body {font-family: Arial, sans-serif; }这是我迄今
- 大家觉得在接手遗留代码时,见到什么东东是最让人感到不耐烦的?复杂无比的 UML ?我觉得不是。我的答案是,超过两个 else 的 if ,或
- 1.断点调试是啥?难不难?断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下
- IE的for...in循环存在严重的缺陷,除了性能低下外,有许多属性不可遍历,著名有这三兄弟:constructor ,toString ,
- 复制代码 代码如下: public partial class CMS_DBDataContext { partial void OnCre
- ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写 的,主要用于创建前端用户界面,是一个与后台技术无关的
- 原图代码 src = cv2.imread("28.png") gray_src = cv2.c
- 以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼
- 作者:Roland Smart原文链接:http://www.adaptivepath.com/ideas/newsletter/archi