如何在15天后使用javascript在文本框中自动显示日期?

时间:2018-10-11 05:54:41

标签: javascript php jquery laravel

我在这里有两个文本框,一个是发布日期,第二个是结束日期。 当用户选择发布日期时,我要在发布日期之后15天的结束日期中显示日期。

例如:如果用户选择发布日期为2018年10月1日,则2018年10月15日必须为结束日期。

 <div class="control-group">
            <label class="control-label">Published Date</label>
            <div class="controls">
            <input type="text" id="published_date" name="published_date" data-date="01-01-2017" data-date-format="yyyy-mm-dd" value="<?php echo date('Y-m-d');?>" class="datepicker span11">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">Ending Date</label>
            <div class="controls">
            <input type="text" id="ending_date" name="ending_date" disabled>
            </div>
        </div>

3 个答案:

答案 0 :(得分:1)

您可以使用此js代码段将15天添加到Date对象。

let date = new Date(document.getElementById("published_date").value); // making a date object with string
date.setDate(date.getDate() + 15); // setting date 15 days after
document.getElementById("ending_date").value = new_date.toISOString().slice(0, 10); // formatting to yyyy-mm-dd

由于JS中的Date构造函数使用自由格式的字符串进行输入,因此可以使用Date元素的字符串值创建一个#published_date对象。

创建Date对象之后,使用Date.prototype.setDate()Date.prototype.getDate()设置初始日期之后15天的日期。

最后以Date.prototype.toISOString()#ending_date格式设置yyyy-mm-dd元素的值并切片字符串。

希望这会有所帮助!

答案 1 :(得分:0)

var published_date = document.getElementById('published_date').value;
published_date = new Date(published_date);
ending_date = new Date(published_date.getTime() + (1000 * (3600 * 24 * 15)));

document.getElementById('ending_date').value = ending_date.getFullYear() + "-" + (ending_date.getMonth() + 1) + "-" + (ending_date.getDate() < 10 ? "0" + ending_date.getDate() : ending_date.getDate());

published_date.getTime() + (1000 * (3600 * 24 * 15))总计15天(以毫秒为单位)。

希望有帮助!

答案 2 :(得分:0)

使用此javascript

 <script>
    var date = new Date(document.getElementById("published_date").value);
   date.setDate(date.getDate() + 15);
   document.getElementById("ending_date").value = date

    </script>