<think>根据用户需求，用户希望在小程序中使用picker组件设置默认值为
当前日期。
微信小程序的picker组件在mode="
date"时，可以通过设置value属性来指定默认
日期。根据引用[2]，value是字符串格式，表示选中的
日期，格式为"YYYY-MM-DD"。
因此，实现步骤：
1
. 在页面的
data中初始化一个
日期变量（如current
Date），格式为"YYYY-MM-DD"
2
. 在onLoad生命周期或页面初始化时，使用new
Date()获取
当前日期，并格式化为"YYYY-MM-DD"
3
. 将格式化后的
日期设置为
data中current
Date的值
4
. 在picker组件中，设置value属性为这个变量
5
. 同时，为了显示
当前日期，可以在picker的显示区域使用该变量
注意：根据引用[2]，picker的mode="
date"时，value是必填属性。
示例代码：
在wxml中：
```xml
<picker mode="
date" value="{{current
Date}}" start="1900-01-01" end="2100-12-31" bindchange="
dateChange">
<view>
当前选择：{{current
Date}}</view>
</picker>
```
在js中：
```javascript
Page({
data: {
current
Date: '' // 初始化为空字符串
},
onLoad: function() {
// 获取
当前日期
const
date = new
Date();
const year =
date.getFullYear();
const month =
date.getMonth() + 1; // 月份从0开始，需要+1
const day =
date.get
Date();
// 格式化成YYYY-MM-DD，注意月份和
日期小于10要补0
const
dateStr = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
this
.set
Data({
current
Date:
dateStr
});
},
//
日期改变事件
dateChange: function(e) {
// 更新
当前日期
this
.set
Data({
current
Date: e
.detail
.value
});
}
});
```
这样，当页面加载时，picker就会显示
当前日期。用户选择新
日期后，通过bindchange事件更新current
Date。
另外，根据引用[4]和[5]中关于设置默认值的例子，都是通过设置value为
data中的一个变量，然后在初始化时给该变量赋值来实现默认值的。
§§相关问题§§
1
. 如何设置
微信小程序picker组件的
日期范围（如只能选择今天之后的
日期）？
2
. 微信小程序picker组件如何实现选择年月（mode=year/month）？
3
. 如何自定义
微信小程序picker组件的样式？</think>###
微信小程序设置 picker 默认值为
当前日期
在
微信小程序中，为 `picker` 组件设置默认值为
当前日期需要以下步骤：
#### 实现步骤
1
. **初始化数据**：在页面的 `
data` 中定义
日期变量
2
. **获取
当前日期**：在 `onLoad` 生命周期函数中获取系统时间
3
. **格式化
日期**：将
日期转换为 `YYYY-MM-DD` 格式（picker 要求的格式）
4
. **绑定数据**：将格式化后的
日期赋值给 picker 的 `value` 属性
5
. **处理
日期变更**：通过 `bindchange` 事件更新
日期值
#### 完整代码示例
```javascript
// page
.js
Page({
data: {
current
Date: '' // 初始化
日期变量
},
onLoad() {
// 获取
当前日期并格式化
const
date = new
Date();
const year =
date.getFullYear();
const month =
date.getMonth() + 1; // 月份从0开始需+1
const day =
date.get
Date();
// 格式化为 YYYY-MM-DD
const formatted
Date = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
// 设置默认值
this
.set
Data({
current
Date: formatted
Date
});
},
//
日期变更事件处理
handle
DateChange(e) {
this
.set
Data({
current
Date: e
.detail
.value
});
}
});
```
```xml
<!-- page
.wxml -->
<picker
mode="
date"
value="{{current
Date}}"
start="1900-01-01"
end="2100-12-31"
bindchange="handle
DateChange"
>
<view>
当前日期: {{current
Date}}</view>
</picker>
```
#### 关键说明
1
. **value 属性**：`value="{{current
Date}}"` 设置默认选中
日期[^2][^4]
2
. **
日期格式**：必须使用 `YYYY-MM-DD` 格式（如 `2023-08-15`）[^2]
3
. **
日期范围**：通过 `start` 和 `end` 属性限制可选
日期范围[^2]
4
. **默认值更新**：`onLoad` 中设置初始值确保组件加载时显示
当前日期
#### 效果说明
- 页面加载时自动显示
当前日期
- 用户选择新
日期后会触发 `handle
DateChange` 更新显示
-
日期选择器将默认选中
当前日期对应的年/月/日
本文介绍了一种在微信小程序中获取并统一日期格式的方法，避免因手机地区设置不同导致的日期显示差异问题。
扫一扫
2586
到【灌水乐园】发言
