精华内容
下载资源
问答
  • 在页面上使用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>
    展开全文
  • 日期输入框 今天由于项目中需要使用日期输入框,所以就找了一下相关的文章,结果竟然没发现符合预期的方法。 日期输入框,如果想要使输入框存在默认值,一般写法: <tr> <td>课程开始时间</td> ...

    关于<input type=“datetime-local”>日期输入框
    今天由于项目中需要使用日期输入框,所以就找了一下相关的文章,结果竟然没发现符合预期的方法。
    日期输入框,如果想要使输入框存在默认值,一般写法:

    <tr>
    	<td>课程开始时间</td>
    	<td><input id="coursestarttime" type="datetime-local" value="2019-01-01T08:23"></td>
    </tr>
    

    其中value一般不会是固定的,所以上面这种写法必须要自己想办法将后台的日期转化为规定格式:“yyyy-MM-ddThh:mm:ss”,自己在后台转好传过来,或是js中转化,非常麻烦(网上很多,就不说了)。
    所以我就试了各种方法,突然就想到了<fmt:>标签!!!居然成功了!!发现还挺方便!
    加上标签之后的写法:

    <tr>
    	<td>课程开始时间</td>
    	<td><input id="coursestarttime" type="datetime-local" value=<fmt:formatDate value='${course.coursestarttime}' pattern='yyyy-MM-dd\'T\'hh:mm:ss'/>></td>
    </tr>
    

    当然前面还需自行引入fmt标签

    <%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    

    注意:pattern='yyyy-MM-dd’T’hh:mm:ss’中字母T一定要加引号!而又由于引号需要使用转义字符,所以引号要使用\转义!
    我自己觉得原因可能是,因为<fmt>是使用simpledateformt实现的,simpledateformat中如果使用了T,会报错:无法识别的字符T。所以T需要加引号,如:
    SimpleDateFormat sdf = new SimpleDateFormat(“yyyyMMdd’T’HHmmss”);
    所以pattern='yyyy-MM-dd’T’hh:mm:ss’中字母T要加引号。
    不过最令我惊奇的是,value后居然可以跟标签,难道因为标签最后会转化为字符串????

    自己琢磨出了一个方法还挺开心!希望大佬可以指正这样写是否正确,或者有更好的写法!欢迎讨论!

    展开全文
  • 只需要把所选的输出迄今input输入框,根据默认的假设,显示是在时间的形式的时间戳。不符合规定。需要格成一个特定的公式格公式。但input上ng-model不能直接对用于filter。因此内容需要一种方法来在这里显示格式化。...

    最近使用angular日期选取器。只需要把所选的输出迄今input输入框,根据默认的假设,显示是在时间的形式的时间戳。不符合规定。需要格成一个特定的公式格公式。但input上ng-model不能直接对用于filter。因此内容需要一种方法来在这里显示格式化。

    网上寻找解决方式就是写个directive,详细实例代码例如以下:

    JS

    angular.module('dateRange',[]).directive('dateFormat', ['$filter',function($filter) {
        var dateFilter = $filter('date');
        return {
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
    
                function formatter(value) {
                    return dateFilter(value, 'yyyy-MM-dd'); //format
                }
    
                function parser() {
                    return ctrl.$modelValue;
                }
    
                ctrl.$formatters.push(formatter);
                ctrl.$parsers.unshift(parser);
    
            }
        };
    }]);


    HTML

    <input type="text" ng-model="start_date" date-format disabled="disabled">

    显示效果如图。详细的格式化改动代码中的format就可以。



    版权声明:本文博客原创文章。博客,未经同意,不得转载。

    展开全文
  • jquery实现input点击输入框弹出日期

    千次阅读 2016-12-20 22:02:59
    if(_||G.eCont||new RegExp(/input|textarea|div|span|p|a/ig).test(D))G.elProp=D=="INPUT"?"value":"innerHTML";else return;if(G.lang=="auto")G.lang=R?navigator.browserLanguage.toLowerCase():navigator....

    这个功能使用到了jQuery中的focus函数,

    所需的js,

    /*
     * My97 DatePicker 4.8 Beta1
     * License: http://www.my97.net/dp/license.asp
     */
    var $dp,WdatePicker;(function(){var $={
    $langList:[{
    	name:"en",charset:"UTF-8"},
    	{name:"zh-cn",charset:"gb2312"},
    	{name:"zh-tw",charset:"GBK"}
    ],
    $skinList:[
    	{name:"default",charset:"gb2312"},
    	{name:"whyGreen",charset:"gb2312"}
    ],
    $wdate:true,
    $crossFrame:true,
    $preLoad:false,
    doubleCalendar:false,
    enableKeyboard:true,
    enableInputMask:true,
    autoUpdateOnChanged:null,
    whichDayIsfirstWeek:4,
    position:{},
    lang:"auto",
    skin:"default",
    dateFmt:"yyyy-MM-dd",
    realDateFmt:"yyyy-MM-dd",
    realTimeFmt:"HH:mm:ss",
    realFullFmt:"%Date %Time",
    minDate:"1900-01-01 00:00:00",
    maxDate:"2099-12-31 23:59:59",
    startDate:"",
    alwaysUseStartDate:false,
    yearOffset:1911,
    firstDayOfWeek:0,
    isShowWeek:false,
    highLineWeekDay:true,
    isShowClear:true,
    isShowToday:true,
    isShowOK:true,
    isShowOthers:true,
    readOnly:false,
    errDealMode:0,
    autoPickDate:null,
    qsEnabled:true,
    autoShowQS:false,
    
    specialDates:null,specialDays:null,disabledDates:null,disabledDays:null,opposite:false,errMsg:"",quickSel:[],has:{},getRealLang:function(){var _=$.$langList;for(var A=0;A<_.length;A++)if(_[A].name==this.lang)return _[A];return _[0]}};WdatePicker=T;var X=window,S={innerHTML:""},M="document",H="documentElement",C="getElementsByTagName",U,A,R,G,a,W=navigator.appName;if(W=="Microsoft Internet Explorer")R=true;else if(W=="Opera")a=true;else G=true;A=J();if($.$wdate)K(A+"skin/WdatePicker.css");U=X;if($.$crossFrame){try{while(U.parent&&U.parent[M]!=U[M]&&U.parent[M][C]("frameset").length==0)U=U.parent}catch(N){}}if(!U.$dp)U.$dp={ff:G,ie:R,opera:a,status:0,defMinDate:$.minDate,defMaxDate:$.maxDate};B();if($.$preLoad&&$dp.status==0)E(X,"onload",function(){T(null,true)});if(!X[M].docMD){E(X[M],"onmousedown",D);X[M].docMD=true}if(!U[M].docMD){E(U[M],"onmousedown",D);U[M].docMD=true}E(X,"onunload",function(){if($dp.dd)O($dp.dd,"none")});function B(){U.$dp=U.$dp||{};obj={$:function($){return(typeof $=="string")?X[M].getElementById($):$},$D:function($,_){return this.$DV(this.$($).value,_)},$DV:function(_,$){if(_!=""){this.dt=$dp.cal.splitDate(_,$dp.cal.dateFmt);if($)for(var B in $)if(this.dt[B]===undefined)this.errMsg="invalid property:"+B;else{this.dt[B]+=$[B];if(B=="M"){var C=$["M"]>0?1:0,A=new Date(this.dt["y"],this.dt["M"],0).getDate();this.dt["d"]=Math.min(A+C,this.dt["d"])}}if(this.dt.refresh())return this.dt}return""},show:function(){var A=U[M].getElementsByTagName("div"),$=100000;for(var B=0;B<A.length;B++){var _=parseInt(A[B].style.zIndex);if(_>$)$=_}this.dd.style.zIndex=$+2;O(this.dd,"block")},hide:function(){O(this.dd,"none")},attachEvent:E};for(var $ in obj)U.$dp[$]=obj[$];$dp=U.$dp}function E(A,$,_){if(R)A.attachEvent($,_);else if(_){var B=$.replace(/on/,"");_._ieEmuEventHandler=function($){return _($)};A.addEventListener(B,_._ieEmuEventHandler,false)}}function J(){var _,A,$=X[M][C]("script");for(var B=0;B<$.length;B++){_=$[B].getAttribute("src");_=_.substr(0,_.toLowerCase().indexOf("wdatepicker.js"));A=_.lastIndexOf("/");if(A>0)_=_.substring(0,A+1);if(_)break}return _}function K(A,$,B){var D=X[M][C]("HEAD").item(0),_=X[M].createElement("link");if(D){_.href=A;_.rel="stylesheet";_.type="text/css";if($)_.title=$;if(B)_.charset=B;D.appendChild(_)}}function F($){$=$||U;var A=0,_=0;while($!=U){var D=$.parent[M][C]("iframe");for(var F=0;F<D.length;F++){try{if(D[F].contentWindow==$){var E=V(D[F]);A+=E.left;_+=E.top;break}}catch(B){}}$=$.parent}return{"leftM":A,"topM":_}}function V(F){if(F.getBoundingClientRect)return F.getBoundingClientRect();else{var A={ROOT_TAG:/^body|html$/i,OP_SCROLL:/^(?:inline|table-row)$/i},E=false,H=null,_=F.offsetTop,G=F.offsetLeft,D=F.offsetWidth,B=F.offsetHeight,C=F.offsetParent;if(C!=F)while(C){G+=C.offsetLeft;_+=C.offsetTop;if(Q(C,"position").toLowerCase()=="fixed")E=true;else if(C.tagName.toLowerCase()=="body")H=C.ownerDocument.defaultView;C=C.offsetParent}C=F.parentNode;while(C.tagName&&!A.ROOT_TAG.test(C.tagName)){if(C.scrollTop||C.scrollLeft)if(!A.OP_SCROLL.test(O(C)))if(!a||C.style.overflow!=="visible"){G-=C.scrollLeft;_-=C.scrollTop}C=C.parentNode}if(!E){var $=Z(H);G-=$.left;_-=$.top}D+=G;B+=_;return{"left":G,"top":_,"right":D,"bottom":B}}}function L($){$=$||U;var B=$[M],A=($.innerWidth)?$.innerWidth:(B[H]&&B[H].clientWidth)?B[H].clientWidth:B.body.offsetWidth,_=($.innerHeight)?$.innerHeight:(B[H]&&B[H].clientHeight)?B[H].clientHeight:B.body.offsetHeight;return{"width":A,"height":_}}function Z($){$=$||U;var B=$[M],A=B[H],_=B.body;B=(A&&A.scrollTop!=null&&(A.scrollTop>_.scrollTop||A.scrollLeft>_.scrollLeft))?A:_;return{"top":B.scrollTop,"left":B.scrollLeft}}function D($){var _=$?($.srcElement||$.target):null;try{if($dp.cal&&!$dp.eCont&&$dp.dd&&_!=$dp.el&&$dp.dd.style.display=="block")$dp.cal.close()}catch($){}}function Y(){$dp.status=2}var P,_;function T(L,D){$dp.win=X;B();L=L||{};for(var J in $)if(J.substring(0,1)!="$"&&L[J]===undefined)L[J]=$[J];if(D){if(!K()){_=_||setInterval(function(){if(U[M].readyState=="complete")clearInterval(_);T(null,true)},50);return}if($dp.status==0){$dp.status=1;L.el=S;I(L,true)}else return}else if(L.eCont){L.eCont=$dp.$(L.eCont);L.el=S;L.autoPickDate=true;L.qsEnabled=false;I(L)}else{if($.$preLoad&&$dp.status!=2)return;var H=F();if(H){L.srcEl=H.srcElement||H.target;H.cancelBubble=true}L.el=L.el=$dp.$(L.el||L.srcEl);if(!L.el||L.el["My97Mark"]===true||L.el.disabled||($dp.dd&&O($dp.dd)!="none"&&$dp.dd.style.left!="-970px")){L.el["My97Mark"]=false;return}I(L);if(H&&L.el.nodeType==1&&L.el["My97Mark"]===undefined){L.el["My97Mark"]=false;var A,C;if(H.type=="focus"){A="onclick";C="onfocus"}else{A="onfocus";C="onclick"}E(L.el,A,L.el[C])}}function K(){if(R&&U!=X&&U[M].readyState!="complete")return false;return true}function F(){if(G){func=F.caller;while(func!=null){var $=func.arguments[0];if($&&($+"").indexOf("Event")>=0)return $;func=func.caller}return null}return event}}function Q(_,$){return _.currentStyle?_.currentStyle[$]:document.defaultView.getComputedStyle(_,false)[$]}function O(_,$){if(_)if($!=null)_.style.display=$;else return Q(_,"display")}function I(G,_){var D=G.el?G.el.nodeName:"INPUT";if(_||G.eCont||new RegExp(/input|textarea|div|span|p|a/ig).test(D))G.elProp=D=="INPUT"?"value":"innerHTML";else return;if(G.lang=="auto")G.lang=R?navigator.browserLanguage.toLowerCase():navigator.language.toLowerCase();if(!G.eCont)for(var C in G)$dp[C]=G[C];if(!$dp.dd||G.eCont||($dp.dd&&(G.getRealLang().name!=$dp.dd.lang||G.skin!=$dp.dd.skin))){if(G.eCont)E(G.eCont,G);else{$dp.dd=U[M].createElement("DIV");$dp.dd.style.cssText="position:absolute";U[M].body.appendChild($dp.dd);E($dp.dd,G);if(_)$dp.dd.style.left=$dp.dd.style.top="-970px";else{$dp.show();B($dp)}}}else if($dp.cal){$dp.show();$dp.cal.init();if(!$dp.eCont)B($dp)}function E(F,E){F.innerHTML="<iframe hideFocus=true width=97 height=9 frameborder=0 border=0 scrolling=no></iframe>";var D=F.lastChild.contentWindow[M],_=$.$langList,C=$.$skinList,H=E.getRealLang();F.lang=H.name;F.skin=E.skin;var G=["<head><script>document.οncοntextmenu=function(){return false;};","var $d, $dp, $cfg=document.cfg, $pdp = parent.$dp, $dt, $tdt, $sdt, $lastInput, $IE=$pdp.ie, $FF = $pdp.ff,$OPERA=$pdp.opera, $ny, $cMark = false;","if($cfg.eCont) {$dp = {};for(var p in $pdp) {$dp[p] = $pdp[p];}}else{$dp = $pdp;};for (var p in $cfg) {$dp[p] = $cfg[p];};","</script><script src=",A,"lang/",H.name,".js charset=",H.charset,"></script>"];for(var I=0;I<C.length;I++)if(C[I].name==E.skin)G.push("<link rel=\"stylesheet\" type=\"text/css\" href=\""+A+"skin/"+C[I].name+"/datepicker.css\" charset=\""+C[I].charset+"\"/>");G.push("<script type=\"text/javascript\" src=\""+A+"calendar.js?\"+Math.random()+\" charset=\"gb2312\"></script>");G.push("</head><body leftmargin=\"0\" topmargin=\"0\" tabindex=0></body></html>");G.push("<script>var t;t=t||setInterval(function(){if(document.ready){new My97DP();$cfg.onload();$c.autoSize();$cfg.setPos($dp);clearInterval(t);}},20);if($FF||$OPERA)document.close();</script>");E.setPos=B;E.οnlοad=Y;D.write("<html>");D.cfg=E;D.write(G.join(""))}function B(I){var G=I.position.left,B=I.position.top,C=I.el;if(C==S)return;if(C!=I.srcEl&&(O(C)=="none"||C.type=="hidden"))C=I.srcEl;var H=V(C),$=F(X),D=L(U),A=Z(U),E=$dp.dd.offsetHeight,_=$dp.dd.offsetWidth;if(isNaN(B))B=0;if(B!="under"&&(($.topM+H.bottom+E>D.height)&&($.topM+H.top-E>0)))B+=A.top+$.topM+H.top-E-2;else B+=A.top+$.topM+Math.min(H.bottom,D.height-E)+2;if(isNaN(G))G=0;G+=A.left+Math.min($.leftM+H.left,D.width-_-5)-(R?2:0);I.dd.style.top=B+"px";I.dd.style.left=G+"px"}}})()

    在页面中的input语句如下, <td><input class="custome_birthday" type="text" placeholder="生日"></td> <td><input class="custome_birthday" type="text" placeholder="生日"></td> ,js中实现点击弹框弹出日期:


        // 生日
            $(".custome_birthday").focus(function () {
                if ($(this).val() == this.defaultValue)
                    $(this).val("");
                WdatePicker({
                    el: this,
                    readOnly: true,
                    dateFmt: "yyyy/MM/dd"
                });
            });





    展开全文
  • 最近与type=”time”类型的input输入框打了不少交道,学到了不少知识,和大家分享下。一、关于兼容性和UI表现1. Safari浏览器Safari桌面端浏览器目前并不支持time输入框,14之后的版本貌似会支持,兼容性图如下:2. ...
  • Input输入框日期控件

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

    2020-06-25 05:24:13
    Input 输入框基础用法禁用状态可清空带 icon 的输入框 官方原文地址:Element Input 输入框 通过鼠标或键盘输入字符 基础用法 <el-input v-model="input" placeholder="请输入内容"></el-input> <...
  • 组件-Element---Input输入框

    千次阅读 2019-07-02 10:41:10
    组件—输入框 基础用法 <el-input v-model="input" placeholder="请输入内容"></el-input> <script> export default { data() { return { input: '' } } } </script&g...
  • <input type="time" /> 使用该标签能进行时间输入,但在mac操作系统上,时间格式变成12小时制,找了许多办法没有解决此类问题 找了如下办法没有解决,请问诸位有何高招 ![图片说明]...
  • 日期控件(input输入框)

    2019-04-07 14:16:04
    用于页面的日期选择,里面的插件涉及js和css,而这两个都是基于jquery的,所以资源中还包含了jquery.显示的日期格式可以设定.
  • 如何获取到input输入框 中date的当前日期 开发工具与关键技术:Visual Studio 2015 作者:徐晶旗 撰写时间:2019年 6月 8日 首先input是表单中的一种元素,所以接下来先给大家讲一下表单的含义。 表单是网页与用户...
  • 简介 本来不打算写输入框的分析,...咋会这么复杂,看过官网的文档后,发现确实应该这么复杂,因为这个输入框不仅仅是只有一个input这么简单,还附带了很多的其他内容,上图仅是一个最基本的形式而已,下面我们依次...
  • input输入框日期显示格式化

    千次阅读 2018-05-23 15:47:00
    在对input框进行属性设置 <input type="text" name="createtime" value="<fmt:formatDate value='${user.createtime }' pattern='yyyy-MM-dd HH:mm:ss'/>" > 转载于:https://www.cnblogs.com/ism...
  • js时间日期输入框

    2014-11-20 11:16:46
    js时间日期输入框 使用方法如下所示: <input class="Wdate" type="text" onClick="WdatePicker()"> 时间输入就是这么简单
  • 方案一:http://www.2cto.com/kf/201412/359293.html方案二:...或者this.mWebView.requestFocusFromTouch() ;(百度的,对我的不起作用)方案三:由于table嵌套使input输入框失效,去除table标签后可弹出软键盘。
  • 今天遇到的问题是日期控件,在js中监听当前input的change事件时无效,其实很简单就解决了 只需要在input输入框中加上箭头所指东西,至此,问题解决
  • 日期输入框演示(html代码),日期输入框演示(html代码),
  • 最近使用了angular日期选择器,不过需要把选中的日期输出到input输入框中,如果按照默认情况,显示的是时间戳形式的时间,不符合要求,需要把格式变成特定格式,但是input上ng-model上又不能直接使用filter,因此...
  • input输入框格式化日期(formatDate)

    万次阅读 2018-03-19 17:14:28
    input type="text" class="form-control" readonly value="&lt;fmt:formatDate value="${ore.from}" pattern="yyyy-MM-dd HH:mm:ss" /&gt;" &gt;
  • 本文来源于Element官方文档: ...基础用法 ...请选择日期 suffix-icon=el-icon-date v-model=input2> 请输入内容 prefix-icon=el-icon-search v-model=input21> 带图标的输入框(slot方式)
  • <input type="text" placeholder="请选择开始日期" id="startDate"> <script src="static/layui/layui.js"></script> layui.use('laydate', function(){ var laydate = layui.laydate; //时间选择器 ...
  • EasyUI之日期输入框dateBox

    千次阅读 2017-04-09 21:13:03
    日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。 2.练习1:使用标签创建日期...
  • layui 日期输入框 禁止输入字符

    千次阅读 2020-06-23 11:00:11
    layui 的日期输入框,输入其他字符时报错。 首先想到加限制,比如 给输入框加 lay-verify="date" ,但是加了layui 中这个限制,就成了必填,空值不行,本来想改一下form.js 中对date的正则,觉得欠妥。 后来的解决...
  • 日期输入框

    2006-10-17 15:27:00
    function dateSelector() //构造dateSelector对象,用来实现一个日历形式的日期输入框。{var myDate=new Date();this.year=myDate.getFullYear(); //定义year属性,年份,默认值为当前系统年份。this.month=myDate....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,750
精华内容 9,500
关键字:

input日期输入框