时间日期选择器_antd 日期选择器禁用结束时间之前30天的日期选择 - CSDN
精华内容
参与话题
  • -- 日期Daterange picker --> <link href="/hqt/static/plugin/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet&...

    资源库:链接: https://pan.baidu.com/s/1VvKZWTb0gktsVqyyid4KSA 提取码: 8rww

    <!-- 日期Daterange picker -->
    <link href="/hqt/static/plugin/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
    
    	<input class="form-control" type="text" value="" id="starttime" readonly> 				
    	<input class="form-control" type="text" value="" id="expirationDate" readonly> 
    	
    <!-- 日期控件 -->
    <script src="/hqt/static/plugin/datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src='/hqt/static/plugin/datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js'></script>
    <script>
    	$('#starttime').datetimepicker({
    		format : 'yyyy-mm-dd hh:ii',
    		language : 'zh-CN',
    		weekStart : 1,
    		todayBtn : 1,
    		autoclose : 1,
    		todayHighlight : 1,
    		startView : 2,//日期时间选择器打开之后首先显示的视图。 可接受的值://0 分钟视图;1小时
    		minView : 0, //日期时间选择器所能够提供的最精确的时间选择视图
    		minuteStep:1,//分钟
    		formatViewType : 'time'
    	}).on('hide', function(event) {
    		event.preventDefault();
    		event.stopPropagation();
    		var startTime = event.date;
    		$("#expirationDate").datetimepicker('setStartDate',startTime);
    		$("#expirationDate").val("");
    	});
    
    	$('#expirationDate').datetimepicker({
    		format : 'yyyy-mm-dd hh:ii',
    		language : 'zh-CN',
    		weekStart : 1,
    		todayBtn : 1,
    		autoclose : 1,
    		todayHighlight : 1,
    		startView : 2,//日期时间选择器打开之后首先显示的视图。 可接受的值://0 分钟视图;1小时
    		minView : 0, //日期时间选择器所能够提供的最精确的时间选择视图
    		minuteStep:1,//分钟
    		formatViewType : 'time'
    	}).on('hide', function(event) {
    		event.preventDefault();
    		event.stopPropagation();
    		var endTime = event.date;
    		$("#startDate").datetimepicker('setEndDate',endTime);
    	});
    </script>
    
    展开全文
  • 12款时间时间组件,总有一款适合你,包括日历选择,移动端滑动选择,双月份和时间点,时间
  • 时间日期选择器

    2020-04-18 16:50:53
    时间日期选择器 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE ...

    时间和日期选择器



    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>时间和日期选择器</title>
        <link rel="stylesheet" href="resources/layui/css/layui.css">
    </head>
    <body style="padding: 20px">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">中文版</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">国际版</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2" placeholder="yyyy年MM月dd日HH时mm分ss秒">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">初始值</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test3"
                           placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">其它</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test4"
                           placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
    </div>
    <script src="resources/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['element', 'jquery', 'laydate'], function () {
            var $ = layui.jquery;
            var element = layui.element;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#test1' //指定元素
                , type: 'date'
                , range: "~"
            });
    
            laydate.render({
                elem: '#test2' //指定元素
                , type: 'datetime'
                , format: 'yyyy年MM月dd日 HH时mm分ss秒'
            });
    
            laydate.render({
                elem: '#test3' //指定元素
                //,value:'2019-11-11'  指定具体的时间
                , value: new Date()   //指定当前系统时间
                /* ,min:'2019-01-01'
                ,max:'2025-12-31' */
                /*  ,min: -7
                 ,max: 7 */
                , type: 'time'
                , min: '09:30:00'
                , max: '17:30:00'
                , trigger: 'click'
            });
    
            laydate.render({
                elem: '#test4' //指定元素
                , show: true
                , btns: ['confirm']
                , lang: 'cn'
                , calendar: true,
                mark: {
                    '0-0-15': '工资',
                    '0-9-1': '开学'
                }
            });
    
        });
    </script>
    </body>
    </html>

     

    展开全文
  • DEMO下载 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML view class=&amp;quot;tui-picker-content&...时间选择器(选择时分)view&amp;gt; pi

    效果体验二维码

    WXRUI体验码

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

    声明

    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体验码

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

    更多微信小程序实例

    展开全文
  • 1.Bootstrap的datetimepicker具体用法:https://blog.csdn.net/lianzhang861/article/details/804197752.layui-laydate具体用法:...
    展开全文
  • 时间选择器(timepicker)用法

    万次阅读 2019-01-18 11:15:41
    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。 日期选择插件是一个配置灵活的插件,你...
  • 日期时间选择器:DateTime Picker

    千次阅读 2018-11-05 10:11:05
    日期时间选择器:DateTime Picker 一、概述 下载: http://www.malot.fr/bootstrap-datetimepicker/ 指南: http://www.malot.fr/bootstrap-datetimepicker/demo.php 导入css、js &lt;link href="css/...
  • element-ui 时间日期选择器格式化 时间日期选择器获取到的时间格式为 “Fri Sep 22 2017 00:00:00 GMT+0800 (中国标准时间)” , 这时可以使用element-ui 时间日期选择器中的 format 指定输入框的格式;使用 ...
  • elementUI之时间日期选择器 + watch监听

    千次阅读 2020-01-02 11:53:59
    最近做项目时用到element UI的时间日期选择器,由于是需要设置系统开放时间和关闭时间,所以用到了两个el-date-picker 问题1:需要对两个选择器的所能选的时间范围做限制 限制1:开放时间不能早于当前时间且不...
  • 获取到今天凌晨的时间和现在的时间然后push到时间日期选择器v-model所绑定的值上: <el-date-picker v-model="value1" type="datetimerange" start-placeholder="选择分拨时间" end-placeholder="选择分拨...
  • Android时间日期选择器,高仿小米

    千次阅读 2016-02-23 16:17:48
    时间日期选择在很多项目中都有运用到,Android自带的控件虽说功能齐全,但简直惨不忍睹。在github上看到有大神写了个WheelView控件,实现滚动选择...这个是我根据WheelView源码仿着小米闹钟时间选择写的时间日期选择器
  • element-ui 时间日期选择器格式化 时间日期选择器 获取到的时间格式为Fri Sep 22 2017 00:00:00 GMT+0800 (中国标准时间)   但是 后台需要"yyyy-MM-dd"格式的 element ui的'change'方法转换 type=&...
  • React Native开源时间日期选择器组件

    千次阅读 2016-05-05 16:30:13
    [译]React Native开源时间日期选择器组件(react-native-datetime)  2016/03/25 | React Native组件资源,外文翻译 | Sky丶清| 暂无评论 | 621 views 尊重版权,转载请注明出处 本文来自:江清清...
  • 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。 看下相应的属性: 具体的来看看代码,布局: ...
  • GitHub 整理|那些优秀的开源时间日期选择器,总有一款适合你 选择时间日期是大部分项目中都会遇到的功能之一。然而,Android 系统 API 提供的一些控件在设计和功能上并不是很完善,如 TimePicker 和 DatePicker ...
  • Android自定义DataTimePicker(日期选择器

    万次阅读 多人点赞 2014-08-23 15:40:14
    Android自定义DataTimePicker(日期选择器) 笔者有一段时间没有发表关于Android的文章了,关于Android自定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中。本篇博客给大家分享的是自定义一个日期选择器,...
  • ![图片说明](https://img-ask.csdn.net/upload/201709/30/1506753324_415347.png) ![图片说明]...求各位大神给个demo,取当前时间30分钟以后24小时以前
  • 效果如下: 代码如下 &lt;el-date-picker v-model="value5" type="datetimerange" :picker-options="...开始日期" end-placeholder="结束日期" align="right&
  • Flutter 日期选择器时间选择器

    千次阅读 2020-09-14 21:05:30
    Flutter日期选择器
  • 本文优先于个人博客网站首发。如有更新不完整或不及时请打开如下网址访问。 求你了,点它!...因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间...
1 2 3 4 5 ... 20
收藏数 174,132
精华内容 69,652
关键字:

时间日期选择器