由于用到了pikaday自定义选择日期插件，使用方法

最新推荐文章于 2025-10-30 03:33:03 发布

原创

最新推荐文章于 2025-10-30 03:33:03 发布 · 864 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中使用Pikaday插件实现日期选择功能，包括插件安装、汉化配置及通过按钮获取选定日期的方法。

项目中运用到pikaday插件来获取自定义选定时间

简述
- 安装
- 配置
注意

简述

pikadiy是一款轻量级的时间选择插件，在JavaScript中可根据自身需求来使用，以下就是效果，以及使用方法。
本文建立在Vue框架中。

安装

使用pikaday需要通过引入css和js来支持，可以在我的资源里下载
也可以通过CDN加载

// CDN

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

同时建议把汉化插件也加载

// 汉化支持
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.28.5/date_fns.min.js"></script>

到这里就可以开始了。

配置

创建input来接受日期数据

// A code block
<input type="text" ref="end" placeholder="end" class="inputs" id="end" readonly>

mounted:function(){
			var that = this;
		    var i18n = { // 需要在程序中进行定义，才可以进行汉化
		            previousMonth :