引导日期选择器无法设置 minDate答案

【问题标题】：bootstrap datepicker can't set minDate引导日期选择器无法设置 minDate
【发布时间】：2016-05-29 20:09:56
【问题描述】：

我做了很多修改，我尝试了很多不同的东西，但没有任何效果。我有一个包含日期的 isabled 字段（25-05-2016）。我想用这个值（25-05-2016）为我的日期选择器设置一个 minDate。没有任何效果，即使我直接设置了值。这是我的代码：

var myDate = $('#CRUEventModal #rdvStartDate').val(); //Get the value from field
myDate = moment(myDate , "DD-MM-YYYY");
//myDate  = moment(myDate , "DD-MM-YYYY").add(1, 'months'); one of things i tried

var myDate2 = $('#CRUEventModal #rdvStartDate').val(); // Another things i tried
myDate2 = moment(myDate2 , "DD-MM-YYYY").format('YYYY-MM-DD');

$('#rdvFinDatefinPicker')
    .datepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'dd-mm-yyyy',
        language:"fr",
        autoclose:"true",
        minDate: myDate  //myDate2 didn't work too!
    })
    .on('changeDate', function(e) {
        // Revalidate the date field
        //$('#eventForm').formValidation('revalidateField', 'eventDate');
    });

非常感谢

【问题讨论】：

您使用的是哪个组件？可以链接吗？
我意识到我使用了这个：bootstrap-datepicker.readthedocs.io/en/latest，但我使用了这个的文档：eonasdan.github.io/bootstrap-datetimepicker 最后我将所有文件更改为使用eonasdan.github.io/bootstrap-datetimepicker 我做了一个混合，对不起！当你谷歌“bootstrap datepicker”时，你会发现很多库！

标签： javascript twitter-bootstrap-3 bootstrap-datetimepicker

【解决方案1】：

$('#rdvFinDatefinPicker')
        .datepicker({
            useCurrent: false, //Important! See issue #1075
            format: 'dd-mm-yyyy',
            **startDate: '28-05-2016',**
            language:"fr",
            autoclose:"true",

        })

您应该使用 startdate 函数，它是您想要的日期开始或 enddate 函数也有助于 maxdate...thnaks

【讨论】：

谢谢，实际上我只是意识到我没有阅读好的文档。您的答案基于此：bootstrap-datepicker.readthedocs.io/en/1.3.0-rc.4/… 我的问题基于此：eonasdan.github.io/bootstrap-datetimepicker 在我的代码中，我使用了第一个链接。最后我不知道哪个库是最好的。有什么建议吗？
是的。我也使用日期和时间选择器中的这个引导程序 3。但是在开始日期和结束日期出现问题之后..在我更新了这个引导程序之后，我发现了与日期选择器相同的功能......我也在这个引导程序中做了，但现在我不知道该怎么做..如果我找到它..我会更新你..

【解决方案2】：

使用eonasdan datetimepicker可以得到如下代码：

var myDate = $('#rdvStartDate').val(); //Get the value from field
myDate = moment(myDate , "DD-MM-YYYY");

$('#rdvFinDatefinPicker')
    .datetimepicker({
        useCurrent: false, //Important! See issue #1075
        format: 'DD-MM-YYYY',
        locale:"fr",
        minDate: myDate
    })
    .on('dp.change', function(e) {
        // Revalidate the date field
        //$('#eventForm').formValidation('revalidateField', 'eventDate');
    });

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/fr.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<input id="rdvStartDate" type='text' class="form-control" value="25-05-2016" disabled />
<div class='input-group date' id='rdvFinDatefinPicker'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

请注意，您必须为 momentjs 导入法语语言环境并设置 locale 选项。格式选项必须遵循momentjs rules，因此您必须将其指定为大写。您不需要 autoclose 选项，因为 datetimepicker 有一个 keepOpen 选项，默认为 false。

请注意，日期时间选择器会触发 dp.change event。

我更喜欢 eonasdan datetimepicker，因为它使用了 momentjs 并且拥有丰富的 API。

【讨论】：

【解决方案3】：

**$('#datetimepicker1').datetimepicker({
           // format: 'dddd, MMMM Do YYYY, h:mm:ss a',
            format: "dd-M-yyyy, HH:ii P",
            startDate: '+1d',
            endDate: '+60m',
            showMeridian: true,
            autoclose: true
        });

否则

$('#datetimepicker1').datetimepicker({
       format: 'dddd, MMMM Do YYYY, h:mm:ss a',
       useCurrent: false,
       minDate: moment().add(1, 'd').toDate(),

       locale: 'de',

     });
   });

记住添加你想要开始的一天。我希望它会被使用我在项目中使用的第一个代码...运行良好。

【讨论】：