精华内容
下载资源
问答
  • 在页面上使用input 日期输入框时,不想显示为默认的 mm/dd/yyyy,而是默认填充当前日期,先看原图 html 代码 <!DOCTYPE html> <html lang="en"> <head> &...

    在页面上使用input 日期输入框时,不想显示为默认的 mm/dd/yyyy,而是默认填充当前日期,先看原图
    html 代码

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
            <style>
                form {
                    margin: 50px;
                }
            </style>
        </head>
        <body>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">选择日期</label>
                    <div class="col-sm-4">
                        <input type="date" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">选择日期</label>
                    <div class="col-sm-4">
                        <input type="date" class="form-control">
                    </div>
                </div>
            </form>
        </body>
    </html>

    那么有没有一种简单的方法可以直接将 new Date() 转化为我们想要的日期格式呢,而不是通过一个日期格式化的方法来解决这个问题
    答案是有的, 该方法就是使用 valueAsDate, 顾名思义就知道它是干什么的了, 这个属性在MDN上有提过
    MDN: input date
    那么具体代码如何,看下面
    html 代码

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
            <style>
                form {
                    margin: 50px;
                }
            </style>
        </head>
        <body>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">选择日期</label>
                    <div class="col-sm-4">
                        <input type="date" class="form-control date-picker">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">选择日期</label>
                    <div class="col-sm-4">
                        <input type="date" class="form-control date-picker">
                    </div>
                </div>
            </form>
            <script>
                var defaultDate = document.querySelectorAll('.date-picker');
                for (var i = 0; i<defaultDate.length; i++) {
                    defaultDate[i].valueAsDate = new Date();
                }
            </script>
        </body>
    </html>
    展开全文
  • jQuery date_input日期选择器

    热门讨论 2009-07-07 16:55:55
    jQuery date_input日期选择器 发一JQUERY插件jQuery date_input,是日期选择器..... 这个选择器是我已经修改过的,官方下载的选择界面是英文的,然后我把它又汉化了一下..根据中国国情,又修改了日期格式!! 效果图演示...
  • 用来在输入日期的输入框直接选择日期,不用手工填写,一来不容易出错哦,输入规范。二来用户体验性好。
  • CSS/HTML 5简洁带图标的input日期选择器说明css代码html代码演示效果图 说明 演示效果分辨率为1980x1080分辨率效果 高度可定制修改 纯css代码控制 使用的input type=“date/week/month” html标签 非自定义js日期...

    CSS/HTML 5简洁带图标的input日期选择器

    说明

    演示效果分辨率为1980x1080分辨率效果
    高度可定制修改
    纯css代码控制
    使用的input type=“date/week/month” html标签 非自定义js日期组件

    css代码

    		#date {
      width: 1100px;
      height: 50px;
      border: 0px solid #FFF;
      float: left;
      margin-left: 118px;
      margin-top: 46px;
    }
    
    #startTime {
      float: left;
      margin-left: 0px;
     background: #FFFFFF;
    
    }
    
    #endTime {
      float: left;
      margin-left: 30px;
      background: #FFFFFF;
    }
    
    #TimeRight{
    	float: right;
    	background: #FFFFFF;
    width: 20px;
    height: 50px;
    }
    
    input[type="month"] {
      width: 158px;
      height: 50px;
      border: none;
      line-height: 1;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
    
      padding-left: 14px;
      font-size: 1rem;
      color: #525C66;
      outline: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	padding-right:-00px; 
    	background:url("../../assets/img/出生年月.png") no-repeat scroll right center transparent; 
    
    
    }
    
    input[type="month"]::-webkit-inner-spin-button {
      visibility: hidden;
    }
    
    input[type="month"] {
      outline: none;
      /* background: url(../assets/img/出生年月.png) no-repeat right; */
    
    }
    
    input[type="month"]:after {}
    
    
    
    input[type="month"]::-webkit-calendar-picker-indicator {
      /*这是控制下拉小箭头的*/
      border: 0px solid #ccc;
      border-radius: 0px;
      /*  box-shadow: inset 0 1px #fff, 0 1px #eee; */
      color: #FFF;
      
      
      /* width: 0px;
      height: 0px; */
    }
    .Time {
    
      width: 80px;
      height: 50px;
      background: #FFFFFF;
      float: left;
    }
    
    #TimeFont {
      font-size: 14px;
      color: #8F9DB3;
      float: left;
      margin-left: 20px;
      margin-top: 15px;
    }
    
    
    
    

    html代码

    <div id="date">
    				<div id="startTime">
    					<div class="Time" for=""><span id="TimeFont">开始时间</span></div>
    
    					<input type="month" v-model="startTime" style="">
    					<div id="TimeRight"></div>
    				</div>
    				<div id="endTime">
    					<div class="Time" for=""><span id="TimeFont">结束时间</span></div>
    
    					<input type="month" v-model="endTime">
    					<div id="TimeRight"></div>
    
    				</div>
    				
    			</div>
    
    

    演示效果图

    演示效果图上的图标、图片类,我已经上传到博客文件里。
    不能设置免费下载,大家可以加我QQ来获取文件 1209793794
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • HTML5 Input 日期选择器

    千次阅读 2020-04-26 12:01:47
    HTML5 Input DatePicker...input type="datetime"> 元素。 是 HTML5 中的新对象。 访问 Input Date 对象 var x = document.getElementById("myDate"); 日期(<input type="date" />) 最基本的日期选择器...

    HTML5 Input DatePicker 对象

      Input Date 对象表示 HTML `<input type="datetime">` 元素。
    

    是 HTML5 中的新对象。

    访问 Input Date 对象

    var x = document.getElementById("myDate");
    

    日期(<input type="date" />

    最基本的日期选择器,只能从日历中选择某个日期。
    在这里插入图片描述

    周(<input type="week" />)

    选择的不是一个日期了,而是周,请注意周数显示的方式。
    在这里插入图片描述

    月份(<input type="month" />)

    选择的是月份,跟“date”类型比起来少了后面的日期数。
    在这里插入图片描述

    时间(<input type="time" />)

    最简单的一种显示,没有日历,只能选择时间。
    在这里插入图片描述

    日期+时间(<input type="datetime" />)

    既显示日期组件,又显示时间,其实就是“date”类型和“time”类型的组合(已废弃,chrome已无效,使用“datetime-local”代替)

    本地日期时间(<input type="datetime-local" />)

    代替"datetime"的存在
    在这里插入图片描述

    使用"datetime-local"编写日期选择器

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
    
    <body>
        <label>
            <span>选择日期</span>
            <input type="datetime-local" class="measureDate" placeholder="请选择日期">
        </label>
    
        <script type="text/javascript">
            let date = new Date()
            let yyyy = date.getFullYear()
            let MM = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1)
            let dd = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate()
            let HH = date.getHours() < 10 ? ("0" + date.getHours()) : date.getHours()
            let mm = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : date.getMinutes()
    
            let curDay = yyyy + '-' + MM + '-' + dd + 'T' + HH + ':' + mm;
            $('.measureDate').val(curDay)
            console.log(date)
        </script>
    </body>
    
    </html>
    
    展开全文
  • jquery的date input日期组件使用

    万次阅读 2012-10-28 09:42:27
    jquery的date input日期选择控件,在一些日期表单上使用,效果还是比较好的。 官方介绍和下载地址 http://jonathanleighton.com/projects/date-input/ 使用前需要导入jquery库和date input的库和css文件 ...


    jquery的date input日期选择控件,在一些日期表单上使用,效果还是比较好的。

    官方介绍和下载地址 http://jonathanleighton.com/projects/date-input/

    使用前需要导入jquery库和date input的库和css文件
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.date_input.js"></script>
    <link rel="stylesheet" href="css/date_input.css" type="text/css">

    官网下载的包里就包含了js和css文件。

     使用前先改变默认的日期格式,下面是中文日期。参数设置都很简单,就是最后的dateToString参数值是返回的日期格式,这里是 年-月-日 的格式。可以自己更改。

    $.extend(DateInput.DEFAULT_OPTS, { month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    	short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], 
    	short_day_names: ["日","一", "二", "三", "四", "五", "六"],
    	dateToString: function(date) {
    	    var month = (date.getMonth() + 1).toString();//月份
    	    var dom = date.getDate().toString();//日
    	    if (month.length == 1) month = "0" + month;//控制月份为10一下的显示为01格式
    	    if (dom.length == 1) dom = "0" + dom;//同月份
    	    return date.getFullYear() + "-" + month + "-" + dom;
    	  }
    	}
    );

     *在下载的压缩包里,有个translations目录,里面有默认语言的日期设置,jquery.date_input.zh_CN.js就是中文日期,不过他的short_day_names参数是["一", "二", "三", "四", "五", "六","日"]。星期日和一显示不对。

    响应inpu组件代码

    $(function(){$("#birthday").date_input();});

    birthday是组件ID

    <input readonly  id="birthday" type="text" name="birthday" size="20">

    展开全文
  • input 日期控件

    千次阅读 2015-07-09 13:29:45
    <input id="startTime" style="width: 100px" required="true" name="startDate" editable="false" missingMessage="开始时间必须填写" class="easyui-datebox" value="${theme.startTime}"></input> ...
  • html input 日期加上范围限制

    千次阅读 2019-09-29 14:05:01
    input id="date" name="dateName" required min="2013-01-01" max="2013-09-23"type="date"/> https://zhidao.baidu.com/question/1493762451327171059.html 转载于:https://www.cnblogs.com/sulanla...
  • HTMLinput日期输入类型

    2017-06-11 14:25:00
    在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站。 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法...
  • layui table表格中加input 日期插件

    千次阅读 2019-03-29 14:56:35
    代码片段:table中加日期插件,同时有获取 该表格日期的方式 table.render({ elem: '#cbitable', id: 'demoFin', height: 312, url: '/BonusSettlement/findByIdBonusDistributionDetails/' + $proId, //数据...
  • input class="form-control" readonly="readonly" formControlName="listingDate" [format]="'yyyy-mm'" type="text" id="month" appDatepicker [format]="'mm'" [startView]="3" [minView]="3
  • input type=“datetime-local”>日期输入框 今天由于项目中需要使用日期输入框,所以就找了一下相关的文章,结果竟然没发现符合预期的方法。 日期输入框,如果想要使输入框存在默认值,一般写法: <tr> &...
  • input使用了日期控件onchange失效问题 由于日期控件内部对change进行其他设置,所以我们使用的时候会失效。 虽然有些控件把change事件改成了失去焦点事件,但还是没有我们想要的效果。 那么实现这个效果很简单...
  • 通过下拉菜单的选项,将文本框中的日期更改为当前日期的90天后 技巧: d.getMonth()是从0开始计算的,所以要加上1,d.getFullYear()才能取到当前的年份 $("#accountTypeDropDown").change(function() { var str = ...
  • 首先熟悉一下datepicker的部分属性设置以及详细解释:  //js中的datepicker属性设置 ... beforeShowDay: $.noop, //在显示日期之前调用的函数 calendarWeeks: false, //是否显示今年是第几周 clearBt...
  • input 日期选择器中设置初始值

    万次阅读 2016-12-05 12:21:28
    <input type= "date" id= "startDate" > 2、编写JS代码   document. getElementById ( 'startDate' ).valueAsDate= new Date() ; 3、TS实现方式 (<HTMLInputElement>document. ...
  • WdatePickerhui内部会change进行其他设置,进而失效 我们需要WdatePicker({onpicked:函数名})这样写 ... <input id="startDate" value="" ...class="Wdate wdate_input" readonly="readonly"onFocus="WdatePi...
  • 自己也亲测了!...得把把年月日和时间用date函数分别格式化 再用大写T分割开 放在value里 就可以了 echo(date('Y-m-d',time())."T".date('H:i:s',time())); 而且必须是“-”,不是“/” ...
  • bootstrap--input选择日期

    2016-10-13 11:06:06
    bootstrap--input选择日期
  • Input输入框日期控件

    千次阅读 2019-10-03 03:41:26
    案例 https://pan.baidu.com/s/1i6BNLcT 密码:p77m 转载于:https://www.cnblogs.com/chenlove/p/8424155.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,868
精华内容 2,347
关键字:

input日期