Question

http://eonasdan.github.io/bootstrap-datetimepicker/

您好

我正在尝试使用min max date选项但不确定如何使用它，因为文档没有提供示例代码。

我在stackoverflow上发现你可以这样做：

minDate：moment（）

但是这会引发一个错误，即没有定义时刻。

我猜它无法找到包含在页面上的moment.js，否则该插件将无法正常工作。

我想要达到的目的是在当天之前10天停用并显示当天30天。

由于

＆＃13;

manager_users_path

＆＃13;

Answer 1

var todayDate = new Date().getDate();

$('#element').datetimepicker({
  timepicker:false,
  formatDate:'Y/m/d',
  minDate: new Date(),
  maxDate: new Date(new Date().setDate(todayDate + 30))
});

通过使用此示例，您可以选择用户在不使用momentjs的情况下选择今天和接下来30天之间的日期。您可以根据自己的需要提供minDate和maxDate的值。例如，如果您想在过去30天到下一个30天之间提供选项，请设置

minDate: new Date(new Date().setDate(todayDate - 30))
maxDate: new Date(new Date().setDate(todayDate + 30))

Answer 2

回答我的问题。使用的框架要求您向配置文件添加时刻，否则它将不允许使用http://momentjs.com/或任何其他JS - 与设置框架的人交谈，并且出于安全原因他们这样做。

Kasun的回答是正确的，但更好的方法是使用Moment.js，因为datetimepicker正在使用这个JS。

因此，要回答第二部分，即在当天之前10天禁用并显示当天30天，您需要设置如下选项。我不需要在10天前完成这项工作，但只需要一定的天数即可选择。我已经添加了评论以使事情清楚，但他们不应该在那里。

$mydatepicker.datetimepicker({
    minDate: moment(), // Current day
    maxDate: moment().add(30, 'days'), // 30 days from the current day
    viewMode: 'days',
    format: 'DD MMMM YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
});

以上操作将启用minDate和maxDate之间的所有日期。

您也可以直接输入日期范围：

$mydatepicker.datetimepicker({
    minDate: moment("12/01/2015"),
    maxDate: moment("12/30/2015"),
    viewMode: 'days',
    format: 'DD MMMM YYYY',
    dayViewHeaderFormat: 'MMMM YYYY',
});

这将禁用你输入的日期之前和之后的所有日子（）。

这不是问题的一部分，但我希望在加载日历时显示输入值中的当前日期，但它不会显示占位符文本。我认为它是因为使用minDate所以我只是用jQuery来替换输入的值。

$datepickerInput.val(moment());

Answer 3

请使用JavaScript Date Object：

minDate: (new Date()).getDate()

Answer 4

禁用

$("#editreservation_to").datetimepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');

启用

$("#editreservation_to").datetimepicker({minDate:false,maxDate:false}).removeAttr('readonly');

Answer 5

首先，您需要下载jQuery.js和moment.js文件并将其包含在您的网页中，以便能够使用上述插件。（如果你点击上面的两个超链接，你现在可以在浏览器中打开它们，所以直接下载它们并继续链接它们就像我完成的那样。并且我的答案后的Bootstrap配置为使用它的{{ 3}}）

如果您想进一步探索jQuery和Moment.js，请点击以下链接到他们的官方网站：

Bootstrap CDN links
jQuery.js

以下是我为您的问题创建的网页：

<html>
<head>
    <title></title>
    <script type="text/javascript" src="<YOUR_PATH_TO>/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="<YOUR_PATH_TO>/moment.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <!-- Your Date Picker Plugin -->
    <script type="text/javascript" src="<YOUR_PATH_TO>/bootstrap-datetimepicker.js"></script>
</head>
<body>
<div class="container">
    <div class="row" style="margin-top:50px;">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function () {
    var maxDate = getAdjustedDate(+30);
    var minDate = getAdjustedDate(-10);
    var tempDt = new Date();
    console.log("today: "+tempDt.getDate());
    console.log("minDate: "+minDate);
    console.log("maxDate: "+maxDate);

    $('#datetimepicker1').datetimepicker({
      maxDate: maxDate,
      minDate: minDate
    });
});

var getAdjustedDate = function (adjustment) {
    var today = new Date();
    today.setDate(today.getDate() + adjustment);

    var dd = today.getDate()-1;
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd
    };

    if(mm<10){
        mm='0'+mm
    };

    return mm+'/'+dd+'/'+yyyy;
};
</script>

</body>
</html>

希望这个示例可以在其他任何地方使用，如果你配置得足够公平。

请问你是否要我澄清任何事情，我会尽我所能帮助。

最诚挚的问候，
Kasun Randika

Bootstrap 3 datepicker - minDate和maxDate

5 个答案: