精华内容
下载资源
问答
  • DEMO下载 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML view class="tui-picker-content&...时间选择器(选择时分)view> pi

    效果体验二维码(外联图片失效了)

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    声明

    bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变。
    造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成。
    处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bindchange事件中。
    感谢:感谢qq_41906890指出的问题!

    下载

    DEMO下载

    效果图

    精确到秒的微信小程序日期时间选择器

    实现原理

    利用微信小程序的picker组件的多列选择器实现!

    WXML

    <view class="tui-picker-content">
      <view class="tui-picker-name">时间选择器(选择时分)</view>
      <picker mode="time" value="{{time}}" start="09:00" end="17:30" bindchange="changeTime">
        <view class="tui-picker-detail">
          午饭时间: {{time}} 
        </view>
      </picker>
    </view>
    
    <view class="tui-picker-content">
      <view class="tui-picker-name">日期选择器(选择年月日)</view>
      <picker mode="date" value="{{date}}" start="2017-10-01" end="2017-10-08" bindchange="changeDate">
        <view class="tui-picker-detail">
          国庆出游: {{date}}
        </view>
      </picker>
    </view>
    
    <view class="tui-picker-content">
      <view class="tui-picker-name">日期时间选择器(精确到秒)</view>
      <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDateTime" bindcolumnchange="changeDateTimeColumn" range="{{dateTimeArray}}">
        <view class="tui-picker-detail">
          选择日期时间: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}
        </view>
      </picker>
    </view>
    <view class="tui-picker-content">
      <view class="tui-picker-name">日期时间选择器(精确到分)</view>
      <picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
        <view class="tui-picker-detail">
          选择日期时间: {{dateTimeArray1[0][dateTime1[0]]}}-{{dateTimeArray1[1][dateTime1[1]]}}-{{dateTimeArray1[2][dateTime1[2]]}} {{dateTimeArray1[3][dateTime1[3]]}}:{{dateTimeArray1[4][dateTime1[4]]}}
        </view>
      </picker>
    </view>
    

    WXSS

    @import "../picker/picker.wxss";
    

    使用的是三级联动选择器的样式,所以直接 import 引入!

    JS

    var dateTimePicker = require('../../utils/dateTimePicker.js');
    
    Page({
      data: {
        date: '2018-10-01',
        time: '12:00',
        dateTimeArray: null,
        dateTime: null,
        dateTimeArray1: null,
        dateTime1: null,
        startYear: 2000,
        endYear: 2050
      },
      onLoad(){
        // 获取完整的年月日 时分秒,以及默认显示的数组
        var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
        var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
        // 精确到分的处理,将数组的秒去掉
        var lastArray = obj1.dateTimeArray.pop();
        var lastTime = obj1.dateTime.pop();
        
        this.setData({
          dateTime: obj.dateTime,
          dateTimeArray: obj.dateTimeArray,
          dateTimeArray1: obj1.dateTimeArray,
          dateTime1: obj1.dateTime
        });
      },
      changeDate(e){
        this.setData({ date:e.detail.value});
      },
      changeTime(e){
        this.setData({ time: e.detail.value });
      },
      changeDateTime(e){
        this.setData({ dateTime: e.detail.value });
      },
      changeDateTime1(e) {
        this.setData({ dateTime1: e.detail.value });
      },
      changeDateTimeColumn(e){
        var arr = this.data.dateTime, dateArr = this.data.dateTimeArray;
    
        arr[e.detail.column] = e.detail.value;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    
        this.setData({
          dateTimeArray: dateArr,
          dateTime: arr
        });
      },
      changeDateTimeColumn1(e) {
        var arr = this.data.dateTime1, dateArr = this.data.dateTimeArray1;
    
        arr[e.detail.column] = e.detail.value;
        dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
    
        this.setData({ 
          dateTimeArray1: dateArr,
          dateTime1: arr
        });
      }
    })
    

    外部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, seco];
    }
    function dateTimePicker(startYear,endYear,date) {
      // 返回默认显示的数组和联动数组的声明
      var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
      var start = startYear || 1978;
      var end = endYear || 2100;
      // 默认开始显示数据
      var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : 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.forEach((current,index) => {
        dateTime.push(current.indexOf(defaultDate[index]));
      });
    
      return {
        dateTimeArray: dateTimeArray,
        dateTime: dateTime
      }
    }
    module.exports = {
      dateTimePicker: dateTimePicker,
      getMonthDay: getMonthDay
    }
    

    总结

    1. 将初始化列表以及初始化默认显示的数组放到dateTimePicker.js,防止页面逻辑太乱,而且可以多处使用;
    2. 判断是否为闰年,在三木表达式中,必须将能别400整除放在前边,因为或运算只要一个条件满足,就会返回true,不会执行后续表达式;
    3. switch case的合并方法需要注意格式;
    4. 如果只需要联动列表更新,二结果展示栏不更新,则在changeDateTimeColumn函数中只更新dateTimeArray的值。

    WXRUI体验二维码

    WXRUI体验码

    如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

    更多微信小程序实例

    展开全文
  • react时间选择时间选择器组件

    千次阅读 2019-09-26 20:45:27
    react时间选择时间选择器组件

    react时间选择器 时间选择器组件

    展开全文
  • 需要element的DateTimePicker 日期时间选择器 部分代码如下: <el-form-item label="出发时间:" prop="startTime"> <el-date-picker v-model="editForm.startTime" :picker-options="pickerOptions"/...

    需求:选一个开始时间,要求精确到小时,小于当前时刻的小时不让选择,只能往后选7天。
    如图:
    在这里插入图片描述
    需要element的DateTimePicker 日期时间选择器
    部分代码如下:

      <el-form-item
        label="出发时间:"
        prop="startTime">
        <el-date-picker
          v-model="editForm.startTime"
          :picker-options="pickerOptions"// 控制时间选择
          format="yyyy-MM-dd HH:mm"
          type="datetime"
          placeholder="选择日期时间"
        />
      </el-form-item>
    
        pickerOptions: {
          disabledDate(time) {
            let dateTime = new Date();
            let startDateTime = dateTime.setDate(dateTime.getDate() - 1);
            let endDateTime = dateTime.setDate(dateTime.getDate() + 7);
            return (
              time.getTime() < new Date(startDateTime).getTime() ||
              time.getTime() > new Date(endDateTime).getTime()
            );
          },
          selectableRange:
            new Date(new Date().setHours(new Date().getHours() + 1)).format(
              'hh'
            ) + ':00:00 - 23:59:00'
        },
    

    selectableRange:可选时间段
    startDateTime 时间戳
    new Date(startDateTime) 标准时间
    new Date(startDateTime).getTime() 时间戳

    还需要watch监听和computed,如果不监听,那么每一天的当前小时都会被禁用

      computed: {
        startTime() {
          return this.editForm.startTime;
        }
      },
    
      watch: {
        startTime: function(newVal, oldVal) {
          let selectDate = newVal.format('yyyyMMdd');
          let oldDate = oldVal.format('yyyyMMdd');
          let nowDate = new Date().format('yyyyMMdd');
          // 如果两次选择的时间不相等
          if (oldDate !== selectDate) {
            // 如果这次选择的时间等于今天的时间就不让选当前小时之前,否则就可以选全部时间段
            if (selectDate === nowDate) {
              this.pickerOptions.selectableRange =
                new Date(new Date().setHours(new Date().getHours() + 1)).format(
                  'hh'
                ) + ':00:00 - 23:59:00';
            } else {
              this.pickerOptions.selectableRange = '00:00:00 - 23:59:00';
            }
            let realNewVal = new Date(
              newVal.format('yyyy-MM-dd') + oldVal.format(' hh:mm:ss')
            );
            // 如果这个时间比当前时间小,就等于当前时间,否则等于这个参数的时间
            if (realNewVal.getTime() < new Date().getTime()) {
              this.editForm.startTime = new Date();
            } else {
              this.editForm.startTime = realNewVal;
            }
          }
        }
      },
    

    注意:Date 对象(Date 对象用于处理日期与时间)
    new Date() 中国标准时间
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020052814371415.png
    在这里插入图片描述

    展开全文
  • 移动端日期时间选择控件

    千次下载 热门讨论 2016-02-18 22:46:50
    移动端日期时间选择控件
  • JS实现时间选择插件 引导语 在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件。对于未接触的新事物,自己总是感觉不明觉厉。其实,有些实现可以使用很简单的方法即可。以此为例,偶然...

    JS实现时间选择插件

    引导语

          在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件。对于未接触的新事物,自己总是感觉不明觉厉。其实,有些实现可以使用很简单的方法即可。以此为例,偶然的一次翻看课本发现HTML5中已经设计到此种实现。其中,设置input元素的type属性为datetime-local即可实现。

    问题

         实际编码过程中,还是出现了问题。$scope.bill_dateBegin并不能获取到时间选择框中的设置值。

    原因

         AngularJS support the input type datetime-local since version 1.3.0-beta.1

         原来AngularJS 1.3.0-beta.1 极其之上的版本才支持datetime-local的绑定,那就是自己的版本太低导致的了。经过查看版本,发现自己的版本为1.3.0.14,应该不低啊。但实验证明,还是自己的版本过低导致的。尝试使用高版本。

    解决方法

         尝试使用高版本。但使用1.5.0版本还是没效果!

         经过一番询问,还是未能够解决问题。自己尝试着试试type的其它时间类型,当自己使用date类型,发现居然绑定上了,我就呵呵了....而其它的类型例如datetime、datetime-local却无法绑定,费解。我只能说angular还是不够强大!

           

         不过问题还是来了。当自己使用如下语句时,确弹出了下图的信息,而我们则需要这样的格式:2015-12-24 12:00:00。明显日期格式需要进行转换。

         bill_dateEnd = $scope.bill_dateEnd; 

         alert(bill_dateEnd);

          

     

          有关日期时间的转换问题详见博文JS抽离公共函数》。

    感触

    自己的知识面还是比较窄,还是需要多读书《疯狂HTML 5/CSS 3/JavaScript讲义》。

    展开全文
  • layui 时间时间选择器最多选择30天

    千次阅读 热门讨论 2019-04-04 14:57:14
    layui 时间选择器最多选择30天https://www.layui.com/doc/modules/laydate.html ...时间选择:</label> <div class="layui-inline" id="start_div"> <input type="text" name="dateTime" id="...
  • Android-使用DatePicker选择时间和日期(时间选择器)

    万次阅读 热门讨论 2018-07-25 15:51:17
    Android-使用DatePicker选择时间和日期(年 月 日嵌套在DatePickerView中) 在安卓App里面,选择时间日期也是很常见的,比如在大部分APP里面填写...本人写了两篇时间选择器 这篇不适合您的需求,来看看这里 链接  ...
  • 默认的时间选择是精确到年月日时分秒的,只要把class设置成easyui-datetimebox就可以实现 当然他的效果图是这样的: 所以如果需要自定义他的显示格式的话我们需要自己重写他的format方法:(注意下面红色部分需要...
  • 前几天因为一个业务需求 需要实现一个预约时间的效果 效果如下(ps.第一次写小程序 如果写的不好地方还请大家多多指教) 微信小程序自带的picker 是没有这种效果的 实现的原理是基于picker mode的属性 利用多列...
  • 在使用vue+element的时候,因需求,是将两个时间选择器拼接起来当做区间时间选择器,所以限制了开始时间和结束时间,结束时间不能小于开始时间,开始时间也不能大于结束时间,然后写完后,发现自带的清除按钮出现了...
  • vue时间选择控件的使用

    万次阅读 热门讨论 2019-06-28 14:22:32
    使用场景: 第一步:将js导入到项目文件夹中 ...第二步:在route文件夹的index.js中引用js文件 ...第三步:调用js方法,弹出时间选择器 HTML: <input class="js-date-picker" type="text" ...
  • 一个时间选择器,适合双时间选择,实用范围是两次选择,进入时间,离开时间 https://github.com/qiqixuexue/doubleTimeChoose 下载地址
  • PickerView时间选择器和条件选择器

    千次阅读 2017-03-30 11:38:58
    PickerView时间选择器和条件选择器的使用
  • 安卓选择器类库,包括日期选择器、时间选择器、单项选择器、城市选择器、颜色选择器、文件选择器、目录选择器、数字选择器、星座选择器、生肖选择器等。 欢迎大伙儿在issues提交你的意见或建议 地址:...
  • layui时间选择器的使用

    万次阅读 2019-05-28 07:59:22
    时间选择器在一定程度上简化了日期的输入,而layui作为一款备受欢迎的前端框架,时间选择器主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心,并且均支持范围...
  • antd vue时间选择器(年选择器)

    千次阅读 2020-08-31 23:46:30
    antd vue时间选择器(年选择器) 最近项目中用到了antd vue,项目中的版本是1.5.2版本,在做日期选择器时发现只有日,周,月份选择器,独独缺少年份选择器,如果你的项目也是怕升级对整体影响太多,不妨试试下面这种...
  • Unity 制作时间选择

    千次阅读 2019-06-06 13:46:41
    新建TimeDate界面(时间选择界面)。.背景啥的全看个人爱好设计。这里只是随便弄了一个。主要的内容全部在Time的下面。下面开始搭建一下,(以年为例,月,日,时,分,秒和年同理) 新建一张Image,起名Year_Picke....
  • 1、项目开发中在使用日期时间选择器时需要添加默认时间并精确到HH:mm:ss,默认时间为当天的00:00:00~23:59:59 日期选择器相关属性 <el-date-picker v-model="serachForm.gengerateTime" type="datetimerange" ...
  • elementUI日期时间选择器范围(精确到,时、分、秒。????️) 一、html <el-date-picker v-model="record.createTime" :picker-options="pickerOptions" format="yyyy-MM-dd HH:mm:ss" type="datetime" ...
  • HTML5新控件 - 日期和时间选择输入

    万次阅读 2017-09-28 10:36:57
    支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。 注意:目前只有Chrome和Opera提供下拉式日历支持,其它浏览器仍是一个普通文本框。 1,日期控件 - date type="date" value="2015-09-24"/>1 2,...
  • Vant Weapp DatetimePicker 微信小程序 时间选择 设置只能选择当天到前一天的时间限制 微信小程序 我的项目 需要设置时间 为 选择当天和前一天12:00以后的时间。那么如何设置呢?文档里面有一个最大值和最小值 这是...
  • // 时间选择器初始化 开始时间 laydate.render({ elem: '#qBeginTime', format: 'yyyy-MM-dd', done: function (value, date, endDate) { var startDate = new Date(value).getTime(); var endTime = new ...
  • 日期时间选择

    千次阅读 2018-10-24 14:06:13
    日期时间选择框: 1) jsp 部分: &lt;div class="form-group"&gt; &lt;label for="dtp_input1" class="control-label"&gt;开始时间:&lt;/label&gt; &lt...
  • Flutter Date & Time Pickers 时间选择

    万次阅读 2018-12-19 20:47:11
    时间选择是一个函数而不是一个控件 参数 说明 context initialDate 初始化时间 firstDate 开始时间,时间控件选择器从这个时间开始 lastDate 结束时间 ...
  • bootstrap时间控件--时间选择

    千次阅读 2019-08-23 17:03:06
    对应上面的三个时间选择器,写法如下: 首先引入css和js: <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href=...
  • Ionic时间选择插件

    万次阅读 热门讨论 2015-11-23 21:14:00
    纯Angular 写的移动端时间选择插件 轻巧适用 效果如下图      使用方法  1:引入 插件的两个文件 js 和css文件  2:填加插件模块到项目模块中  3:在需要使用时间选择的地方 写上  即可使用 model....
  • H5 移动端 时间选择

    千次阅读 2016-08-30 16:42:55
    移动端 时间选择
  • 最近做一个时间选择器。。。之前没怎么接触过。 但是在设置分钟时间间隔的时候 网上没有找到相关api 和参数设置。。 贴代码看一下。。   默认是这样的。         默认时间间隔是1小时,但是需求是...
  • elementUI 日 周 月 季 年 时间选择控件封装

    千次阅读 热门讨论 2019-08-17 16:49:26
    项目需求,时间选择需要满足按日,按周,按月,按季,按年进行选择,然后组件封装是基于elementUI的,实现效果如图: 日周月季年都有默认选择时间,项目需求,不能选择当前时间,所以按日选择,默认时间为昨天,...
  • element-ui 日期时间选择器限制日期以及时间范围实现效果:实现方式: 实现效果: 实现方式: 1、使用参数 element-ui 控件方法 picker-options disabledDate :控制只能选择今天及以后的日期 selectableRange :控制...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 174,651
精华内容 69,860
关键字:

时间选择