我现在有两个文本框text，第一个选择了日期，第二个自动显示第一个日期加上280天，要求用js或者jquery实现

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我现在有两个文本框text，第一个选择了日期，第二个自动显示第一个日期加上280天，要求用js或者jquery实现相关的知识，希望对你有一定的参考价值。

我想让第二个文本框里面自动显示第一个文本框里面的日期加上280天后的日期，也就是2012年6月8日加上280天后的日期

<script type="text/javascript">
function test()
//日期格式必须yyyy-mm-dd，月和日不带0，如2011-3-2
var date1 = document.getElementById(\'date1\').value;
var date = new Date(date1.split(\'-\')[0],date1.split(\'-\')[1]-1,date1.split(\'-\')[2]);
date.setDate(date.getDate()+280);
var date2 = date.getFullYear()+\'-\'+(date.getMonth()+1)+\'-\'+date.getDate();
document.getElementById(\'date2\').value=date2;


</script>

<body>
第一个日期:<input id="date1" type="text" onblur="test();"/>
第二个日期:<input id="date2" type="text" readonly="readonly"/>
</body> 参考技术A 将下面的源码复制到你的网站打开，注意jquery.js的路径，输入值要带时分秒的，否则执行不通过。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQUERY操作日期</title>
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript">
//加载单击事件
function f()
var begTime = new Date($("#txtBegTime").val());
var endTime = addDate(280, begTime);
//alert(endTime);
$("#txtEndTime").val(endTime);


//定议函数
function addDate(NumDay,nowDate)
var date = new Date(nowDate);
date.setDate(date.getDate() + NumDay);
return date.getYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();

</script>

</head>

<body>
<p>
<input id="txtBegTime" type="text" onchange="f();" value="2012/06/08 16:01:34" />
<input id="txtEndTime" type="text" />
</p>
</body>
</html>

使用layui在规定的期限内选择日期

　　这几天碰到了layui中的日期与时间这个，本以为很简单的，可是又一个需求是这样的，有两个日期选择框，第一个日期选择框要求最小日期不得小于当前日期，第二个日期选择框要求最小日期为第一个日期选择框的选中日期，最大日期须在24小时内，本以为不会很难。

　　于是按照惯例，先渲染第一个日期选择框，然后渲染第二个日期选择框，结果后来发现这样行不通。还是直接上具体的代码吧。

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <link rel="stylesheet" href="../dist/css/layui.css">
</head>
<body>
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="" class="layui-form-label">时间段</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="startTime">
                </div>
                <div class="layui-form-mid">到</div>
                <div class="layui-input-inline endTime">
                    <input type="text" class="layui-input" id="endTime">
                </div>
            </div>
        </div>
    </form>
    <script src="../dist/jquery.min.js"></script>
    <script src="../dist/layui.js"></script>
    <script>
        let [form,laydate] = ["",""];
        var now = new Date();
        var start = now.getTime();  // 将当前时间转换为时间戳
        layui.use([‘form‘,‘laydate‘],function(){
            form = layui.form;
            laydate = layui.laydate;
            laydate.render({
                elem:‘#startTime‘,
                type:‘datetime‘,  // 可选择年、月、日、时、分、秒
                min:start,   // 规定最小日期
                done:function(value){
                    // value为第一个日期选择框选择的日期
                    const start2 = new Date(value).getTime();
                    const end = start2 + 24*60*60*1000;
                    const elemId = "endTime" + new Date().getTime();
                    // 当第一个日期选择框选择完日期后，将类选择器endTime里的内容清空，给它重新添加内容，且新添加元素的id是动态改变的，这样第二个日期框在第一个日期框每次选择完后会重新渲染
                    $(‘.endTime‘).empty().append(`<input type="text" class="layui-input" id="${elemId}">`)
                    laydate.render({
                        elem:`#${elemId}`,
                        type:‘datetime‘,
                        min:start2,  // 最小日期不得小于第一个日期选择框的值
                        max:end  // 最大日期在24小时内
                    })
                }
            });
        })
    </script>
</body>
</html>

　　虽然这样能解决问题，能保证第二个日期框最小值为第一个日期框的选择值，最大值为第一个日期选择值的24小时内。但是中间存在着一个bug，那就是只有选择第一个日期框后，才能更改第二个日期框中的值，显然这不是我们想要的，我们想要的是，可以直接更改第二个日期框的值，同时满足条件：最小值为第一个日期框的选择值，最大值为第一个日期选择值的24小时内。那么这时候就要对第二个日期框再渲染一次，只不过这次不是在第一个日期框选择后的回调函数里渲染，而是与第一个日期框一起渲染。那么此时的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer</title>
    <link rel="stylesheet" href="../dist/css/layui.css">
</head>
<body>
    <form action="" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="" class="layui-form-label">时间段</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="startTime">
                </div>
                <div class="layui-form-mid">到</div>
                <div class="layui-input-inline endTime">
                    <input type="text" class="layui-input" id="endTime">
                </div>
            </div>
        </div>
    </form>
    <script src="../dist/jquery.min.js"></script>
    <script src="../dist/layui.js"></script>
    <script>
        let [form,laydate] = ["",""];
        var now = new Date();
        var start = now.getTime();  // 将当前时间转换为时间戳
        layui.use([‘form‘,‘laydate‘],function(){
            form = layui.form;
            laydate = layui.laydate;
            laydate.render({
                elem:‘#startTime‘,
                type:‘datetime‘,  // 可选择年、月、日、时、分、秒
                min:start,   // 规定最小日期
                done:function(value){
                    // value为第一个日期选择框选择的日期
                    const start2 = new Date(value).getTime();
                    const end = start2 + 24*60*60*1000;
                    const elemId = "endTime" + new Date().getTime();
                    // 当第一个日期选择框选择完日期后，将类选择器endTime里的内容清空，给它重新添加内容，且新添加元素的id是动态改变的，这样第二个日期框在第一个日期框每次选择完后会重新渲染
                    $(‘.endTime‘).empty().append(`<input type="text" class="layui-input" id="${elemId}">`)
                    laydate.render({
                        elem:`#${elemId}`,
                        type:‘datetime‘,
                        min:start2,  // 最小日期不得小于第一个日期选择框的值
                        max:end  // 最大日期在24小时内
                    })
                }
            });
            laydate.render({
                elem:‘#endTime‘,
                type:‘datetime‘,
                min:,   // 该值为第一个日期框的值，一般是从服务器端获取
                max:    // 该值为第一个日期框值的24小时内，可用时间戳来解决
            })
        })
    </script>
</body>
</html>

 

以上是关于我现在有两个文本框text，第一个选择了日期，第二个自动显示第一个日期加上280天，要求用js或者jquery实现的主要内容，如果未能解决你的问题，请参考以下文章

使用layui在规定的期限内选择日期

My97DatePicker选择两个日期范围不超过30天的demo

连续表单将文本框填充到另一个表单

文本框 onChange 事件和 Datepicker onSelect 冲突

如果在第二次单击时未选择日期并出现日期验证问题，则日期选择器会从日期选择器文本框中清除所选值

VB 写入文件写入特定一行