精华内容
下载资源
问答
  • 在页面中加入input,type=text,设置onclick事件调用js
  • 刚学WeX5不到十节课 写了用同一个input框来让用户输入日期 再次点击输入框选择截至日期 同时在第二次点击输入框时已设置了最小值 感觉实现方法非常笨 所以看看有没有什么能改进的地方 源码如下:define(function...

    刚学WeX5不到十节课 写了用同一个input框来让用户输入日期 再次点击输入框选择截至日期 同时在第二次点击输入框时已设置了最小值 感觉实现方法非常笨 所以看看有没有什么能改进的地方 源码如下:

    define(function(require){

    var $ = require("jquery");

    var justep = require("$UI/system/lib/justep");

    var start = 0;

    var boolean = false;

    var boolean2 = true;

    var Model = function(){

    this.callParent();

    };

    Model.prototype.searchClick = function(event){

    var temp = this.comp("search");

    if(temp.icon == "linear linear-magnifier"){

    boolean = false;

    boolean2 = true;

    this.comp("inDate").set({"min" :"'1900-1-1'"});

    this.comp("inDate").setCSS({"display":""});

    temp.set({"icon":"linear linear-sync"});

    }else{

    var date = this.comp("inDate").val();

    var data = this.comp("account");

    data.setFilter(data, "fDate > '" + start + "'and fDate < '" + date + "'");

    data.refreshData();

    this.modelLoad(event);

    this.comp("inDate").setCSS({"display":"none"});

    start = 0;

    temp.set({"icon":"linear linear-magnifier"});

    }

    };

    Model.prototype.inDateChange = function(event){

    if(boolean2){

    boolean = true;

    this.inDateFocus();

    }

    };

    Model.prototype.inDateFocus = function(event){

    if(boolean){

    start = this.comp("inDate").val();

    this.comp("inDate").set({"min" : "'" + start + "'"});

    boolean2 = false;

    }

    };

    return Model;

    });

    展开全文
  • 日期: <input type="text" id="begin_date" name="begin_date" onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="easyui-validatebox input-text" precision="2" required="true" value="<%= begin...
  • 日期选择框值的变化进行监听,当日期值不满足限定的范围时弹出提示: <div> <label>起始日期<span class="red">*</span></label> <div style="width: 185px"> <...

    1 需求
    对日期选择框值的变化进行监听,当日期值不满足限定的范围时弹出提示:

    <div>
    	<label>起始日期<span class="red">*</span></label>
    	<div style="width: 185px">
    		<input id="startTime" name="startTime" class="Wdate" type="text" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'addEndTime\')}'});"
    			   nullmsg="起始日期不能为空!" datatype="*1-64" autocomplete="off" readonly/>
    	</div>
    	<label>结束日期<span class="red">*</span></label>
    	<div style="width: 185px;">
    		<input id="endTime" name="endTime" class="Wdate" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'addStartTime\')}'});"
    			   nullmsg="结束日期不能为空!" datatype="*1-64" autocomplete="off" readonly/>
    	</div>
    </div>
    

    2 问题
    给id="startTime"的input输入框设置change、propertychange事件都不起作用,此时的change事件和WdatePicker控件的事件冲突了。

    3 解决
    查看WdatePicker的源码后,发现其中有个onpicked的事件函数,即日期选择后的处理函数,所以给输入框设置了onpicked监听事件及对应的处理函数validStartDate,代码如下:

    <div>
    	<label>起始日期<span class="red">*</span></label>
    	<div style="width: 185px">
    		<input id="startTime" name="startTime" class="Wdate" type="text" onclick="WdatePicker({maxDate:'#F{$dp.$D(\'addEndTime\')}',
    		       onpicked: validStartDate});"
    			   nullmsg="起始日期不能为空!" datatype="*1-64" autocomplete="off" readonly/>
    	</div>
    	<label>结束日期<span class="red">*</span></label>
    	<div style="width: 185px;">
    		<input id="endTime" name="endTime" class="Wdate" type="text" onclick="WdatePicker({minDate:'#F{$dp.$D(\'addStartTime\')}'});"
    			   nullmsg="结束日期不能为空!" datatype="*1-64" autocomplete="off" readonly/>
    	</div>
    </div>
    

    validStartDate() 方法如下:

    function validStartDate() {
    	var inputVal = $("#addStartTime").val();
    	// 业务判断
    	...
    }
    

    这样就可以监听到日期选择后的值变化事件了。



    展开全文
  • input type ="text" class ="datetimepicker" > body > < script src ="js/jquery-1.11.3.min.js" > script > < script src ="js/bootstrap-datetimepicker.min.js" > script > < script type ="text/...
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"/>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
    </head>
    <body>
    <input type="text" class="datetimepicker">
    </body>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $('.datetimepicker').datetimepicker({
            minView: "month",
            format: "yyyy-mm-dd",
            language: 'zh-CN',
            autoclose:true
        });
    </script>
    </html>

     

    转载于:https://www.cnblogs.com/dongxiaolei/p/5749960.html

    展开全文
  • 如图,利用element-ui自带的strat-placeholder和end-placeholder,可以修改页面上的input框占位符,但弹出里的占位符并没有变化。 有哪位大佬能指点一下,如何修改弹出里的占位符。谢谢! 可追加悬赏!
  • 但是在项目中,向后台获取数据的时候,是通过“起始-终止”日期范围来查询数据的,需要将从input框获取到的周/月份转换为一个起始日期和终止日期传递到后台。 月&周日历转化为起始-终止日期: html代码: <...

    html5提供了新的input标签类型,type=“week”,type=“month”,用来表示周日历和月日历。通过$(“选择器”).val();获取选择的日期。
    但是在项目中,向后台获取数据的时候,是通过“起始-终止”日期范围来查询数据的,需要将从input框获取到的周/月份转换为一个起始日期和终止日期传递到后台。

    月&周日历转化为起始-终止日期:

    html代码:

    <div id="time">
    		<label for="month">月份选择</label>
    		<input type="month" id="selectorMonth"/>
    		<label for="week">周选择</label>
    		<input type="week" id="selectorWeek"/>
    </div>
    <button class="query" onclick="search()">查询</button>
    

    js代码:

    var startDate="";
    var endDate="";
    function DateRange(value){
    	var year,week,date;
    	var month;
    	var s_month=["04","06","09","11"];
    	var b_month=["01","03","05","07","08","10","12"];
    	if ((/^(\d{4}-\d{2})$/).test(value)){ 				//月份选择
    		year = parseInt(value.substring(0, 4));
    		month = value.substring(5, 7);
    		startDate=year+"-"+month+"-"+"01";
    		if(s_month.indexOf(month)>-1){ //小月
    			endDate=year+"-"+month+"-"+"30";
    		}
    		else if(b_month.indexOf(month)>-1){ //大月
    			endDate=year+"-"+month+"-"+"31";
    		}
    		else if(month=="02"){ //2月
    			if(year%4!=0)
    				endDate=year+"-"+month+"-"+"28";
    			else
    				endDate=year+"-"+month+"-"+"29";
    		}
    	}
    	else if (value.indexOf("W") != -1){ 			//周选择
    		year = parseInt(value.substring(0, 4));
    		week = parseInt(value.substring(6, 8));
    		var days=week*7;
    		var f=year+"-01-01";
    		var first= new Date(f).getDay();//一年第一天周几
    		var offset=first==1?0:first-1;//偏移
    		var monthDays=(year%4==0)?[0,31,29,31,30,31,30,31,31,30,31,30,31]:[0,31,28,31,30,31,30,31,31,30,31,30,31]
    		for(month=0;days>0;month++){
    			days-=monthDays[month];
    		}
    		month-=1;
    		days+=monthDays[month]-offset;//在原先理解的基础上算出的某一周最后一天,偏移后就是某一周最后一天的日期
    		endDate=year+"-"+month+"-"+days;
    		if(days-6>0)//起始日期是否同一个月
    			days=days-6;
    		else{
    			days=6-days;
    			if(month-1<1){ //回到上一年
    				year-=1;
    				month=12;
    			}
    			else month-=1;
    			days=monthDays[month]-days;
    		}
    		startDate=year+"-"+month+"-"+days;
    	}
    }
    

    调用:

    function search(){
    	DateRange($("#selectorMonth").val()); //获取月日历起始截止日期
    	alert(startDate+"-"+endDate);
    	DateRange($("#selectorWeek").val()); //获取周日历起始截止日期
    	alert(startDate+"-"+endDate);
    }
    

    月日历思路比较简单,判断一下平闰年,在判断下月份大小就可以获得起止日期。
    周日历麻烦一点,一开始的时候以为2020第1周的意思是从2020年1月1日起第一个周,也就是2020.01.01-2020.01.07
    但是并不是,下图就是一个周日历截图,实际是指周一开始到周日结束算一周。
    所以就要先判断这一年第一天(1月1号)是不是周一,如果是的话,就好办了,按照原先的理解计算就可以了。
    如果不是的话,就在原先理解的基础上进行偏移,偏移量=这一年第一天的星期数-1,后面这一年的日期计算都要加上这个偏移量。
    周日历

    展开全文
  • html日期选择框

    万次阅读 2017-09-27 23:02:20
    <!DOCTYPE html> <title></title> ​ 日期: <input type="date" name="bday"> <input type="submit"> </form>
  • 本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍,有文本框、密码、单选、多选、提交和重置按钮的使用说明,完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧一、...
  • JQuery 日期选择框

    2018-01-18 17:21:00
    一 jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascript" src="${basePath}/js/jedate.js">...2 input框 <input type="text" p...
  • " [noFilter]="10" notFoundMsg="暂无数据" (selected)="selected($event,i)" placeholder="请选择"> ng-select> div> div> import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';...
  • select选择框和日期选择框无法选择 <pre><code>js <template> <div style="width: 1000px; margin: 0 auto"> <vxe-table border show-all-overflow show-footer class="vxe-...
  • 先看效果:1、单选日历控件2、双选日历控件一、实现原理:1、界面部分:2、事件部分:①日期框中增加鼠标点击事件,弹出动态面板(日期选择框)②日期选择弹窗中,日历数据是一个中继器,鼠标选择中继器的某个单元后...
  • 日期选择框

    2012-04-09 10:33:16
    开始日期 <input id="begin" type="text" size="32" class="Wdate"name="beginTime" onkeypress="keyEvent(event)" onFocus="var firstDay=getFirstDay(); var lastDay =getLastDay(); WdatePicker({dateFmt:'yyyy-...
  • nui— DatePicker:日期选择框

    千次阅读 2018-10-11 16:20:22
    5.12 DatePicker:日期选择框 转至元数据结尾   创建: 未知用户 (zhangping),最新修改于: 八月 07, 2015 转至元数据起始 创建DatePicker 只需要一个id即可创建表单对象: &lt;input id="...
  • 日期时间选择框

    千次阅读 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...
  • 1 效果演示地址: https://www.albertyy.com/2020/7/check2.html 另一篇文章:CSDN-专业IT技术...input>标签一起使用,<label>标签为input元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果,&...
  • <input type="text" name="entryDate" id="entryDate" lay-verify="date" placeholder="选择入职时间" autocomplete="off" class="layui-input"> //入职时间 laydate.render({ ...
  • Datepicker日期选择框插件

    千次阅读 2010-07-29 11:17:00
    在Web开发中,总会遇到... 我们可以自己用javascript写一个日期选择控件,然而,想要写的很好、很漂亮却需要花不少时间和精力。jQuery有一个UI插件:datepicher,可以帮我们实现该功能,而且界面很漂亮。下面就学学如何
  • JSP页面的日期控件可以弹出选择框选择日期 input框的如下 <input type="text" name="starttime" readonly="readonly"/> <input type="text" name="buildtime" readonly="readonly"/> <input type=...
  • 这是一款点击input框弹出日期时间选择插件,可以下拉列表进行选择日期时间代码,jQuery点击弹出下拉框日期选择代码。
  • input type="text" id="purchaseDate" name="purchaseDate" class="easyui-datebox" required="true" data-options="editable:false" size="18"/> 资源文件地址: 链接:...
  • 今天碰到一个问题,正常引入bootstrap-datetimepicker相关css及js之后日期选择框的左右箭头图片显示不出来,不同于网上的直接图表部分为空白,而是找不到图片的样子,问题截图如下:如果只是显示为白色则在input的...
  • 我把bootstrap和bootstrapdaetimepicker包还有jquery都导入到eclipse工程里了,代码也写好了,但是不知道为什么boostrap别的功能都能实现,就是运行时日期控件无法弹出日期选择框。这是我的代码,求大神帮忙看看! ...
  • 点击Input框弹出日期选项

    万次阅读 2016-08-03 08:58:10
    测试地址:... 效果图片: 后台代码: ...点击text文本框弹出日期选择器 body{margin:0;padding:0;font:14px Verdana, Arial, sans-serif;line-height:200%;} #content{padding-left:50px
  • 一、详细内容及解决方案  正常MIniUI的MonthPicker中的月份和星期默认是英文的,我百度搜索...input id="date1" class="mini-monthpicker" value="" allowInput="false" showTodayButton="false" onvaluechanged...
  • 本文介绍的是jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 本教程源码下载: 效果图为: 1.首先引入js文件<script type="text/javascript" src="jeDate/jedate.js...
  • input name="expiryDate" id="expiryDate" type="text" readonly="readonly" maxlength="20" class="input-large Wdate "   value="&lt;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 413
精华内容 165
关键字:

input日期选择框