Question

我有2个文本框日期来自＆amp;使用jQuery boostrap datepicker的日期。

from

现在我想要点击日期选择器to时，ID为from的文本框将在下周自动填写，选择日期$xml = simplexml_load_file('http://xml.aksel.com.tr/Xml.aspx?SK=d021da08&CK=50288'); $product_code = $_GET['s']; $products = $xml->xpath("//STOK_KODU[contains(text(), '".$product_code."')]/STOK_ADI/GRUPKODU");。

有可能吗？

Answer 1

我不确定你需要从 “填写下周日期自动” ，但是这个例子在第一个选择的第二个日期选择器上选择了+7天。如果您需要选择整周的第二个日期输入，则只需更改内部的onSelect事件即可。

$(document).ready(function() {

$('#from').datepicker(
{
    calendarWeeks: true,
    autoclose: true,
    todayHighlight: true,
    
    onSelect: function (date) {
    var date2 = $('#from').datepicker("getDate");
    var nextDayDate = new Date();
    nextDayDate.setDate(date2.getDate() + 7);
    $('#to').datepicker().datepicker('setDate', nextDayDate);
    }
    
});
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <input type="text" id="from"/>
  <input type="text" id="to"/>

Answer 2

这是一个想法：

  $('.datepicker').datepicker({
    format: {
        /*
         * Say our UI should display a week ahead,
         * but textbox should store the actual date.
         * This is useful if we need UI to select local dates,
         * but store in UTC
         */
        toDisplay: function (date, format, language) {
            var d = new Date(date);
            d.setDate(d.getDate() - 7);
            return d.toISOString();
        },
        toValue: function (date, format, language) {
            var d = new Date(date);
            d.setDate(d.getDate() + 7);
            return new Date(d);
        }
    }
});

您还可以阅读此参考链接http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#inputs

Answer 3

有一个名为 moment.js 的库，它广泛传播并被接受，以便在Date对象上进行计算

＆＃13;

$("#from").datepicker({
  onSelect: function(dateText){
    var fromDate = new Date(dateText);
    var nextDate = moment(fromDate).add(7, 'd').format('MM/DD/YYYY'); // ---> (A)
    $("#to").val(nextDate);
    console.log("u selected", dateText);
    console.log("next date is ", nextDate);
  }
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  From Date : <input id="from" />
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script>
  To Date: <input id='to' />
</body>
</html>

＆＃13;

代码非常明显。

计算以公式（A）进行，格式适用于只返回所要求格式的日期。
计算发生在所选日期。
每次从datePicker中选择日期时，我都会使用回调 onSelect（）。

jQuery Bootstrap日期选择器根据选择日期获得下周日期

3 个答案: