uniapp实现日期时间选择器

本文实例为大家分享了uniapp实现日期时间选择器的具体代码,供大家参考,具体内容如下

由于项目需求需要,尝试过使用Vant组件库,但是一直出现问题,插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下:

首先现在根目录下创建util文件夹放dateTimePicker.js

dateTimePicker.js

function withData(param){
  return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start,end){
  var start = start || 0;
  var end = end || 1;
  var array = [];
  for (var i = start; i <= end; i++) {
    array.push(withData(i));
  }
  return array;
}
function getMonthDay(year,month){
  var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;

  switch (month) {
    case '01':
    case '03':
    case '05':
    case '07':
    case '08':
    case '10':
    case '12':
      array = getLoopArray(1, 31)
      break;
    case '04':
    case '06':
    case '09':
    case '11':
      array = getLoopArray(1, 30)
      break;
    case '02':
      array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
      break;
    default:
      array = '月份格式不正确,请重新输入!'
  }
  return array;
}
function getNewDateArry(){
  // 当前时间的处理 年月日时分秒
  var newDate = new Date();
  var year = withData(newDate.getFullYear()),
      mont = withData(newDate.getMonth() + 1),
      date = withData(newDate.getDate()),
      hour = withData(newDate.getHours()),
      minu = withData(newDate.getMinutes());
      // seco = withData(newDate.getSeconds());

  return [year, mont, date, hour, minu];
}
function dateTimePicker(startYear,endYear,date) {
  // 返回默认显示的数组和联动数组的声明
  var dateTime = [], dateTimeArray = [[],[],[],[],[]];
  var start = startYear || 1978;
  var end = endYear || 2100;

 //处理传过来的字符串转化为数组
 let dataArr = date.split(" ")[0].split('/')
 let time = date.split(" ")[1].split(':')
  // 默认开始显示数据 如果把自定义值传过来的话就使用自定义时间 否则用当前时间  ...dataArr数组解构
  var defaultDate = date ? [...dataArr, ...time] : getNewDateArry();

  // 处理联动列表数据
  /*年月日 时分秒*/
  dateTimeArray[0] = getLoopArray(start,end);
  dateTimeArray[1] = getLoopArray(1, 12);
  dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
  dateTimeArray[3] = getLoopArray(0, 23);
  dateTimeArray[4] = getLoopArray(0, 59);
  // dateTimeArray[5] = getLoopArray(0, 59);

 //遍历dateTimeArray数组
  dateTimeArray.forEach((current,index) =>
  //匹配defaultDate[index]值在current数组中的位置
    dateTime.push(current.indexOf(defaultDate[index]))
  );

  return {
    dateTimeArray: dateTimeArray,
    dateTime: dateTime
  }
}
module.exports = {
  dateTimePicker: dateTimePicker,
  getMonthDay: getMonthDay
}

template模板

<picker mode="multiSelector" :range="dateTimeArray"  v-model="dateTime" @change="change" @columnchange="columnchange">
 <view>
  //disable = "true" 是禁用input 防止点击弹出键盘
  <input type="text" disabled="true" v-model="upTower" placeholder="请选择时间" placeholder-class="inputPlace" />
 </view>
</picker>

script部分

//引入事先声明的类
const dateTimePicker = require('@/util/dateTimePicker.js')
 export default {
  data() {
   return {
    // 时间选择器
    dateTimeArray: null,
    dateTime: null,
    startYear: 2000,
    endYear: 2050,
   };
  },
  onLoad() {
   //传入开始展示年份startYear 结束展示年份endYear
   //自定义开始显示时间
   let arr = '2018/09/01 13:00'
   let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear,arr)
   this.dateTimeArray = obj.dateTimeArray
   this.dateTime = obj.dateTime
  },
  methods: {
   //时间格式化
   withData(param){
    return param < 10 ? '0' + param : '' + param;
   },
   change(e){
    let value = []
    e.detail.value.forEach((val,index) => {
     value.push(this.withData(val))
    })
    let dateArray = "20" + value[0] + "-" + value[1] + "-" + value[2] + " " + value[3] + ":" + value[4]
    this.upTower = dateArray
   },
   columnchange(e){
    let dateArr = this.dateTimeArray
    let arr = this.dateTime
    //滑动所在列的数据并对其值进行更新
    arr[e.detail.column] = e.detail.value
    //更新展示月份对应的天数(28 or 29 or 30 or 31)
    dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]])
    //最后把最新的数值赋值到dateTimeArray
    this.dateTimeArray = dateArr
    this.dateTime = arr
   },

picker属性中 :range=“dateTimeArray” =》dateTimeArray 二维数组,长度表示多少列,数组的每项表示每列的数据 这是多列选择器展示的重点所在

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

(0)

相关推荐

  • JavaScript 日期时间选择器一些小结

    flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScript 日期时间选择器. 下载 演示 GitHub flatpickr 不依赖于任何库.更小的用户界面,但有很多主题.丰富的 API 和事件系统使其适用于任何环境.可用于 webpack ,也可作为 jQuery 插件使用. 安装 安装 flatpickr 模块 使用 NPM 安装 flatpickr 模块.包管理工具: https://www.npmjs.com/package/bower-npm-resolv

  • JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?

  • js实现点击文本框显示日期选择器特效代码分享

    为大家分享的JavaScript图片轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js点击文本框显示日期选择器</title> <link type="text/css" rel="stylesheet" href="calen

  • js实现精确到秒的日期选择器完整实例

    本文实例讲述了js实现精确到秒的日期选择器.分享给大家供大家参考,具体如下: <script> // 主调用函数是 setday(this,[object])和setday(this),[object]是控件输出的控件名,举两个例子: // 一.<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)"> // 二.<input

  • JS时间选择器 兼容IE6,7,8,9

    在线演示: http://demo.jb51.net/js/2012/js_date/ 复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascri

  • javascript英文日期(有时间)选择器

    var languageCode = 'en';    // Possible values:     en,ge,no,nl,es,pt-br,fr                                 // en = english, ge = german, no = norwegian,nl = dutch, es = spanish, pt-br = portuguese, fr = french, da = danish, hu = hungarian(Use UTF-8 

  • 基于Vue组件化的日期联动选择器功能的实现代码

    我们的社区前端工程用的是element组件库,后台管理系统用的是iview,组件库都很棒,但是日期.时间选择器没有那种" 年份 - 月份 -天数 " 联动选择的组件.虽然两个组件库给出的相关组件也很棒,但是有时候确实不是太好用,不太明白为什么很多组件库都抛弃了日期联动选择.因此考虑自己动手做一个. 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象,如:Sun Sep 02 2018 00:00:00 GMT+08

  • Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能

    具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue.js中使用iView日期选择器并设置开始时间结束时间校验</title> <!-- import Vue.js --> <script src="//vuejs.org/js/vue.min.js"></script

  • uniapp实现日期时间选择器

    本文实例为大家分享了uniapp实现日期时间选择器的具体代码,供大家参考,具体内容如下 由于项目需求需要,尝试过使用Vant组件库,但是一直出现问题,插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下: 首先现在根目录下创建util文件夹放dateTimePicker.js dateTimePicker.js function withData(param){ return param < 10 ? '0' + param : '' + param; } function ge

  • Android仿iPhone日期时间选择器详解

    本文实例为大家分享了Android仿iPhone时间选择器的具体代码,供大家参考,具体内容如下 先看效果图 如何使用 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import android.app.Activity; import android.app.AlertDialog; import

  • 微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序如何实现精确的日期时间选择器

    这篇文章主要介绍了微信小程序如何实现精确的日期时间选择器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变. 造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成. 处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bi

  • Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题.一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示.小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker. 示范模型 假如我们有如下一个 Article 模型,含有 pub_

  • Element DateTimePicker日期时间选择器的使用示例

    组件-日期时间选择器 日期和时间点 <template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"> </el-date-pick

  • Vue日期时间选择器组件使用方法详解

    本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi

  • Vue自定义验证之日期时间选择器详解

    目录 Vue自定义验证之日期时间选择器 今日需求 期望效果 干货 效果 vue项目时间选择器 html里面 js里面 Vue自定义验证之日期时间选择器 自定义验证 今日需求期望效果干货value-format 效果推荐 今日需求 查询条件中 当开始时间 和 结束时间 一致时 提示结束时间大于开始时间 期望效果 干货 <el-form :inline="true" :rules="rules"> <el-form-item label="创

  • 关于element-ui日期时间选择器选不中12小时以后的时间详解

    目录 前言 自定义完时间格式 yyyy-MM-dd hh:mm:ss是12小时制 yyyy-MM-dd HH:mm:ss才是24小时制 结语 前言 最近在工作中用到了element-ui的el-date-picker日期时间选择器,遇到了一个小问题,设置完自定义完时间格式后选不中12小时以后的时间.甚是苦恼,最后发现是设置的时间格式有取值范围.虽然不是什么大问题,但是不细心很容易掉坑,所以总结分享出来给大家避坑. 自定义完时间格式 在el-date-picker标签上设置value-format

随机推荐