精华内容
下载资源
问答
  • bootstrap 时间控件及时间转换

    千次阅读 2017-09-10 15:19:35
    时间控件

    设置当前时间和根据毫秒转换为年月日

        //设置日期默认当天
        function timenow() {
            var timenow = new Date();
            var y = timenow.getFullYear();//年
            var m = timenow.getMonth() + 1;//月
            m = m < 10 ? '0' + m : m;
            var d = timenow.getDate();//日
            d = d < 10 ? ('0' + d) : d;
            var time = y + '-' + m + '-' + d;//字符串拼接成自己想要的时间格式,现在是yyyy/mm/dd格式
            return time;
        }   
        var basePgDate = timenow();
    
       //设置时间控件的时间为30天前
        monthnow : function () {
            var timenow = new Date();
            timenow.setDate(timenow.getDate() - 30);
            var y = timenow.getFullYear();//年
            var m = timenow.getMonth() + 1;//月
            m = m < 10 ? '0' + m : m;
            var d = timenow.getDate();//日
            d = d < 10 ? ('0' + d) : d;
            var time = y + '-' + m + '-' + d;//字符串拼接成自己想要的时间格式,现在是yyyy/mm/dd格式
            return time;
        },
    
        //根据毫秒转换成年月日时分秒格式   
        function getMyDate(str){  
            var oDate = new Date(str),  
            oYear = oDate.getFullYear(),  
            oMonth = oDate.getMonth()+1,  
            oDay = oDate.getDate(),  
            oHour = oDate.getHours(),  
            oMin = oDate.getMinutes(),  
            oSen = oDate.getSeconds(),  
            oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间  
            return oTime;  
        };
    
        //显示补0操作  
        function getzf(num){  
            if(parseInt(num) < 10){  
                num = '0'+num;  
            }  
            return num;  
        }  
    
        console.log($.now())  //1505376532620
        console.log(getMyDate($.now())) //2017-09-14 16:09:48
    
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <link rel = "stylesheet" type="text/css" href = "./assets/datetimepicker/css/bootstrap-datetimepicker.css" / >
        <style>
            #ipt::after {
                content: "222";
                display: block;
                width: 5px;
                height: 8px;
                color: red;
                outline: none;
            }
    
            * {
                box-sizing: border-box;
            }
    
            #box {
                width: 600px;
                margin: 0 auto;
                padding: 35px;
            }
    
            #box2 {
                height: 350px;
                border: 1px solid #ccc;
                overflow-y: auto;
                padding: 30px;
            }
    
            #box2 p {
                margin: 0 auto;
                text-align: center;
            }
    
            #top_nav {
                position: fixed;
                top: 5px;
                left: 50%;
                width: 200px;
                margin-left: -100px;
            }
    
            input.datetimepicker {
                margin-top: 10px;
                outline: none;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p id="top_nav">添加时间控件 <button type="button" id="btn2">添加</button></p>
            <div id="box2"></div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
        <script type="text/javascript" src="./assets/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript" src="./assets/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
            $(function () {
                var timeNum = 1;
                var addTime =
                    '<p class="time-p"><input type="text" value="2017-09-10" class="datetimepicker"><span>&nbsp;&nbsp;选择时间</span></p>';
                $("#btn2").on("click", function () {
                    var $addTime = $(addTime).children().attr("id", "time" + timeNum).end()
                    $("#box2").append($addTime);
                    activeTime(("#time" + timeNum));
                    timeNum++;
                })
    
                function activeTime(tagid) {
                    $(tagid).datetimepicker({
                        format: 'yyyy-mm-dd',
                        language: 'zh-CN',
                        weekStart: 1,
                        bootcssVer: 3,//箭头样式
                        todayBtn: 1,
                        autoclose: 1,
                        todayHighlight: true,
                        startView: 2,
                        minView: 2,
                        pickerPosition: 'bottom-right',//设置显示位置
                        forceParse: 0,
                        keyboardNavigation: 1,
                        forceParse: 1
                    });
                }
                activeTime("#time1")
            })
    展开全文
  • 日期时间控件

    千次阅读 2018-09-05 15:25:33
    日期时间控件 开发软件使用到日期时间控件的地方很多,但是很多时候Html5自带的时间控件无法满足开发的需要,所以使用这种时间控件完全没有问题 引用 很多时候我们开发引用别人的控件时候,发现老是出现错误,是...

    标题


    开发软件使用到日期时间控件的地方很多,但是很多时候Html5自带的时间控件无法满足开发的需要,所以使用这种时间控件完全没有问题


    引用
    很多时候我们开发引用别人的控件时候,发现老是出现错误,是因为我们引用出现错误,我在使用日期时间控件的时候也出现了这样的问题 所以文件一点要放正确,多的浪费,少了要命,请把以下标注的文件全部放入到引用的文件夹里面
    这里写图片描述
    这里写图片描述

    1. 代码
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>使用 layDate 独立版</title>
    </head>
    <body>
    <input type="text" id="test1">
    <script src="/laydate/laydate.js"></script> <!-- 改成你的路径 -->
            <script>
            //执行一个laydate实例
            laydate.render({
              elem: '#test1' //指定元素
            });
    </script>
    </body>
    </html>

    基本的时间日期选择器

    这里写图片描述
    代码

    //年选择器
    laydate.render({
      elem: '#test2'//input标签的 Id
      ,type: 'year'
    });
    //年月选择器
    laydate.render({
      elem: '#test3'
      ,type: 'month'
    });
    //时间选择器
    laydate.render({
      elem: '#test4'
      ,type: 'time'
    });
    //时间选择器
    laydate.render({
      elem: '#test5'
      ,type: 'datetime'
    });
    

    日期范围 时间选择
    这里写图片描述
    代码

    //日期范围
    laydate.render({
      elem: '#test6'
      ,range: true
    });
    //年范围
    laydate.render({
      elem: '#test7'
      ,type: 'year'
      ,range: true
    });
    //年月范围
    laydate.render({
      elem: '#test8'
      ,type: 'month'
      ,range: true
    });
    //时间范围
    laydate.render({
      elem: '#test9'
      ,type: 'time'
      ,range: true
    });
    //日期时间范围
    laydate.render({
      elem: '#test10'
      ,type: 'datetime'
      ,range: true
    }); 
    

    其它功能
    这里写图片描述
    代码

    //初始赋值
    laydate.render({
      elem: '#test19'
      ,value: '1989-10-14'
    });
    //选中后的回调
    laydate.render({
      elem: '#test20'
      ,done: function(value, date){
        alert('你选择的日期是:' + value + '\n获得的对象是' + JSON.stringify(date));
      }
    });
    //日期切换的回调
    laydate.render({
      elem: '#test21'
      ,change: function(value, date){
        alert('你选择的日期是:' + value + '\n\n获得的对象是' + JSON.stringify(date));
      }
    });
    //不出现底部栏
    laydate.render({
      elem: '#test22'
      ,showBottom: false
    });
    //只出现确定按钮
    laydate.render({
      elem: '#test23'
      ,btns: ['confirm']
    });
    //自定义事件
    laydate.render({
      elem: '#test24'
      ,trigger: 'mousedown'
    });
    //点我触发
    laydate.render({
      elem: '#test25'
      ,eventElem: '#test25-1'
      ,trigger: 'click'
    });
    //双击我触发
    lay('#test26-1').on('dblclick', function(){
      laydate.render({
        elem: '#test26'
        ,show: true
        ,closeStop: '#test26-1'
      });
    });
    //日期只读
    laydate.render({
      elem: '#test27'
      ,trigger: 'click'
    });
    //非input元素
    laydate.render({
      elem: '#test28'
    }); 
    

    当然也可以直接显示日期时间控件
    这里写图片描述

    代码

    //直接嵌套显示
    laydate.render({
      elem: '#test-n1'
      ,position: 'static'
    });
    laydate.render({
      elem: '#test-n2'
      ,position: 'static'
      ,lang: 'en'
    });
    laydate.render({
      elem: '#test-n3'
      ,type: 'month'
      ,position: 'static'
    });
    laydate.render({
      elem: '#test-n4'
      ,type: 'time'
      ,position: 'static'
    }); 

    控件下载
    https://download.csdn.net/download/liyonghewangtao/10647254

    展开全文
  • 时间段时间控件

    千次阅读 2013-08-12 23:49:07
    1、项目文件结构如下图: 2、源码 时间控件演示 body{ width: 80%; font-size: 24px; font-weight: bold; text-align: center; }

    1、项目文件结构如下图:


    2、源码

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        
        <title>时间控件演示</title>
        
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	<script type="text/javascript" src="Scripts/jquery-2.0.2.js"></script>
    	<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
    	<style type="text/css">
    	   body{
    	     width: 80%;
    	     font-size: 24px;
    	     font-weight: bold;
    	     text-align: center;
    	   }
    	</style>
    	<script type="text/javascript">
    	   
    	
    	</script>
    
      </head>
      
      <body>
        <fieldset>
            <legend>时间控件</legend>
            <label>开始时间:</label>
            <input type="text" id="startDate" class="Wdate"  onFocus="WdatePicker({dateFmt:'yyyy-MM',maxDate:'#F{$dp.$D(\'endDate\')}')"/>
            <label>——</label>
            <label>结束时间:</label>
            <input type="text" id="endDate" class="Wdate" onFocus="WdatePicker({dateFmt:'yyyy-MM',minDate:'#F{$dp.$D(\'startDate\')}')"/>
        </fieldset>
      </body>
    </html>
    

    3、结果如图


    展开全文
  • jquery时间控件时分秒

    千次下载 热门讨论 2013-05-10 16:38:55
    jquery时间控件时分秒,相当不错,很推荐
  • bootstrap日期时间控件

    万次阅读 2017-05-02 10:03:06
    datetime控件Bootstrap的日期时间控件,使用非常的简单。首先,添加日期时间控件的引用@*datetime控件*@ ~/Content/BootStrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> ~/Content/BootStrap/js...

    datetime控件

    Bootstrap的日期时间控件,使用非常的简单。

    这里写图片描述

    首先,添加日期时间控件的引用

    @*datetime控件*@
        <link href="~/Content/BootStrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
        <script src="~/Content/BootStrap/js/moment-with-locales.js"></script>
        <script src="~/Content/BootStrap/js/bootstrap-datetimepicker.min.js"></script>
        <script src="~/Content/BootStrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    

    链接:http://pan.baidu.com/s/1sl56aw1 密码:jc2y
    页面代码

    <a class='input-group date' id='datetimepicker1' style="float: left; left: 320px;">
                    <input type='text' class="form-control" id='nowdate' style="width: 150px; height: 30px;" />
                    <span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </a>
    

    JavaScript代码

    //设置日期时间控件
    function Datetime() {
        $('#datetimepicker1').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
            locale: moment.locale('zh-cn')
        });
        //默认获取当前日期
        var today = new Date();
        var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
        //对日期格式进行处理
        var date = new Date(nowdate);
        var mon = date.getMonth() + 1;
        var day = date.getDate();
        var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
        document.getElementById("nowdate").value = mydate;
    }
    

    日期时间控件默认值的设置,需要注意的是,在JS中使用的ID是input标签的ID。

    document.getElementById("nowdate").value = mydate;

    此外,设置默认的日期还有一个格式的问题,页面加载之后的日期时间,月份和天数为1~9的话,它的前面没有0。

    这里写图片描述

    但是,通过日期时间控件选择之后的日期时间,它的前面是有0的。

    这里写图片描述

    解决方法,首先获取当前的日期时间,然后通过格式化处理一下即可。

        //默认获取当前日期
        var today = new Date();
        var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
        //对日期格式进行处理
        var date = new Date(nowdate);
        var mon = date.getMonth() + 1;
        var day = date.getDate();
        var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
        document.getElementById("nowdate").value = mydate;
    
    展开全文
  • WPF日期时间控件-DateTimePicker

    热门讨论 2017-08-04 14:41:46
    1.日期时间控件,可以直接点击使用 2.是源代码文件 3.压缩包里面有使用说明文档,并有当初设计时详细的思路流程可以参考
  • Bootstrap 时间控件 datetimepicker

    万次阅读 2018-06-26 19:51:29
    Bootstrap 的时间控件易用且美观,下面将用法记录一下,大家有需要可以直接看官网的介绍,还是很基础的。 网址:http://www.bootcss.com/p/bootstrap-datetimepicker/ Bootstrap有两种时间控件:datepicker 和 ...
  • android时间控件

    万次阅读 2014-06-17 16:50:02
    前言  这一篇博客分别讲解Android平台下,关于日期和时间的几个相关控件。包括DatePicker(日期选择控件)、TimePicker(时间选择控件)、DatePickerDialog...对于时间控件,无非就是一个展示、修改、获取等操作,下
  • Android自定义时间控件选择开始时间到结束时间

    万次阅读 热门讨论 2017-11-30 18:01:28
    大概是去年的这个时候说要做一个关于时间控件的总结,到这会才开始。在整理demo时,发现直接上代码也无法由浅入深讲解,眨眼就是11月30号了,踩着11月份的尾巴,先来一篇,后面再补充。 三丶看代码 (1).需求分析 1...
  • kartik 时间控件如何设置开始时间和结束时间?????????????
  • layui时间控件选择时间范围

    万次阅读 2017-11-20 12:55:24
    解决layui时间控件清空之后无法正常使用的问题,以及时间范围的选择 共有两种解决方式: 方式一(layui 1.x): html代码: div class="layui-inline"> div class="layui-input-inline"> input type=...
  • 好用的C#时间控件超级好用

    热门讨论 2009-10-25 11:07:27
    时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件时间控件
  • 安卓时间控件自定义

    2015-11-27 16:01:24
    安卓自定义的滑动的时间控件,年月日时分秒的时间控件和年月日的时间控件,可以自行改变颜色,线条等
  • easyUI的时间控件

    千次阅读 2017-12-26 11:20:10
    以前没怎么用过easyUI,今天用到时间控件,又了解到了一点东西 时间控件的样式 <input class="easyui-datetimebox" id="starttime" name="starttime" style="width:150px&...
  • 时间控件date-picker 时间差计算

    千次阅读 2019-08-07 15:56:18
    时间控件date-picker 例子 //加载时间控件 $(’.date-picker’).datepicker({ rtl: Metronic.isRTL(),//RTL:right to left(从右向左显示),默认为false,即:从左向右显示 autoclose: true,//选择后自动...
  • HTML 时间控件

    万次阅读 2015-01-25 19:07:21
    在做表单的时候,有时候需要输入时间,为了避免输入的麻烦,可以选择一些现成的时间控件。 本文提供一个简单的样例,示例代码如下:(要成功运行,需要保持和本文对应的目录结构)。js/ css/ 。
  • WdatePicker时间控件限制开始结束时间

    千次阅读 2019-06-12 10:10:32
    时间控件限制: 1、开始时间不能大于结束时间 maxDate:'#F{$dp.$D(\'endDate\')}' 2、结束时间不能小于开始时间 minDate:'#F{$dp.$D(\'startDate\')}' 例子: <div class="control-group"> <label ...
  • C# DateTimePicker:日期时间控件

    万次阅读 2019-06-12 14:47:07
    日期时间控件(DateTimePicker)在时间控件中的应用最多,主要用于在界面上显示当前的时间。 Format 属性提供了 4 个属性值,如下所示。 Short:短日期格式,例如2017/3/1; Long:长日期格式,例如2017年3月1...
  • 限制选择时间控件

    千次阅读 2018-12-16 21:23:44
    最近刚接触的NG-ZORRO,今天小编给大家分享一下NG-ZORRO中,时间控件限制时间选择的知识。 html &lt;nz-range-picker (click)="picker()" [(ngModel)]="dateValue" name="dateValue...
  • 说好的关于时间控件整理,这里就说说常用的自定义,关于基础其他文章写得太详细了 基础学习: Java 日期时间 Date & Time组件(上) Date & Time组件(下) API在线文档Data Calendar DateFormat 三丶需求分析 1....
  • html5原生自带的日期控件和时间控件

    万次阅读 2018-03-28 15:01:30
    直接上代码:&lt;!doctype html&gt; &lt;html&gt; &...html5原生自带的日期控件和时间控件&lt;/title&gt; &lt;script src="http://code.jquery.com/jquery-l
  • jqgrid列表显示时间控件

    千次阅读 2019-08-15 16:47:20
    1.引入时间控件js 2.代码 editoptions:{ dataInit:function(e){ $(e).datetimepicker({ autoclose:tru...
  • 测试用例-时间控件

    千次阅读 2018-10-17 16:13:00
    1.基本功能 年月日时分能正常选择与显示 年月日时分能手动输入的能正常输入与...每个时间控件的按钮都测试一遍,看有无异常退出 有时候点击一次它就会退出 4.选择开始时间后,结束时间还得正常显示,不能存在联...
  • 日期和时间是任何一个系统中很重要的两块内容,我们在这里来分享一下DatePicker日期控件和TimePicker时间控件在安卓中是如何使用的。 这个例子实现的是时间和日期控件的展示,并根据时间或日期的变化来更新显示的...
  • layui的时间控件闪退

    千次阅读 2019-06-23 16:18:00
    在多个页面使用时间控件的时候,可能出现鼠标点击后松开,日期又消失了的问题,处理方式如下: 添加属性:trigger: 'click' $(function(){ //加载日期控件 layui.use('laydate', function(){ var laydate = ...
  • layui动态时间控件,刚开始想的是动态生成id,然后动态去指定,但是那样太麻烦,就用更加简洁的方式进行实现。 layui.use(['form', 'layer', 'jquery', 'laydate'], function () { var form = layui.form , $ = ...
  • 手写小时间控件

    千次阅读 2015-07-30 03:43:30
    一开始先上效果: 说明: 环境:移动端(android和iOS), ...然后在我最近的项目有个时间需求,想了他愣的时间的五分之一后我决定熬夜写个自己定义的时间控件了。 太困了,来不及介绍详情,先这样吧,go
  • AppiumLibrary 时间控件的选择

    千次阅读 2017-04-07 15:02:21
    AppiumLibrary 时间控件的选择 app自动化测试时,对于滑动的时间控件,很复杂要判断的东西也多。 我这里写个之前做的例子: 先看一下这个控件的图片:我们怎样去设置到指定的时间? 这里我们可以看到有四个可以...
  • WdatePicker 时间控件前后时间的设置

    千次阅读 2013-12-11 16:54:24
    WdatePicker.js 时间控件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,619
精华内容 12,247
关键字:

时间控件