如何从未来日期限制引导日期选择器

Posted 2023-05-07

【中文标题】如何从未来日期限制引导日期选择器

【英文标题】：how to restrict bootstrap date picker from future date

【发布时间】：2014-01-24 16:45:20

【问题描述】：

我想限制 bootstrap 的日期选择器采用未来日期。我只想启用截至今天的日期。我该如何实现这一点。

这是我的代码

<script>
  var FromEndDate = new Date();

   $(function()
     $('.datepicker').datepicker(
       format: 'mm-dd-yyyy',
       endDate: FromEndDate, 
       autoclose: true
     );
   );
</script>

任何机构都可以帮助解决这个问题

【问题讨论】：

你试过了吗？ ***.com/questions/12652492/…，具体为：endDate: '+0d'

是的，我做了，但它不起作用......

还有一个maxDate:0 选项，如here 所述。 gl

【参考方案1】：

这是一个有效解决方案的演示：

http://jsfiddle.net/tjnicolaides/cjp7y/

<script>
$(function()
    $('.datepicker').datepicker(
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    );
);
</script>

编辑：支持 startDate 和 endDate 的 Bootstrap Datepicker 版本在这里：https://github.com/eternicode/bootstrap-datepicker

原项目，即该插件当前的热搜结果，目前没有该功能：http://www.eyecon.ro/bootstrap-datepicker/

【讨论】：

我试过了，但它在我的代码中不起作用。日期选择器工作正常，但不限制未来日期

你确定你所有的外部库都正确链接了吗？当您尝试激活日期选择器时，您是否在控制台中看到任何错误？

另外：您使用的是什么版本的 Datepicker 库？

你能链接到一个公共 URL 来证明这不起作用吗？

我认为您使用的插件版本可能不支持 endDate 属性。该项目已分叉，我建议将您的版本替换为此处的最新版本：github.com/eternicode/bootstrap-datepicker/blob/master/js/…

【参考方案2】：

将endDate 属性设置为+0d

<script> 
    $(function() 
        $('.datepicker').datepicker(
            format: 'mm-dd-yyyy',
            endDate: '+0d',
            autoclose: true
        );
    );
</script>

FIDDLE

【讨论】：

它在我的浏览器中不起作用。我正在使用谷歌浏览器来检查它。

@PranavRam 不要尝试将 GitHub 用作 CDN；它不起作用。在 Chrome 中查看小提琴时，它不起作用，我在控制台中看到 Refused to execute script from 'https://raw.github.com/eternicode/bootstrap-datepicker/master/js/bootstrap-datepicker.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.。

感谢 Pranav，它就像一个魅力。我尝试了很多其他选项，例如 maxDate: '0' 等，但都失败了。但是您的回答可以节省我的时间。

【参考方案3】：

这段代码对我有用..

$('#txtTo').datepicker(
    dateFormat: "dd/MM/yy",
    changeMonth: true,
    changeYear: true,
    ignoreReadonly: true,
    maxDate: 'now'
);

【参考方案4】：

试试这个，

$(function () 
    $('.datepicker').datepicker(
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    );
);

我从Git使用date picker

Demo

【讨论】：

试试看，var today = new Date(); $('.datepicker').datepicker( startDate: new Date(today.getFullYear()-5, today.getMonth(), today.getDate()) );有关详细信息，请参阅问题github.com/uxsolutions/bootstrap-datepicker/issues/485

现在 Datepicker startDate 选项将采用 Date 参数见bootstrap-datepicker.readthedocs.io/en/stable/…

【参考方案5】：

$(document).ready(function()
    $(".datepicker").datepicker(
        endDate:'today'
    );
);

将此添加到您的 js 用户只能选择截至今天的日期，并且用户不能手动向输入元素输入自定义日期值。如果用户输入自定义值，那么它将自动更改为当前日期

【参考方案6】：

由于插件中的问题，使用此 datepicker.js 会发生这种情况

http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js

【参考方案7】：

您可以使用选项 endDate 来完成。在 endDate 选项中指定的日期之后的所有日期都被禁用。如果您想禁用今天之后的日期，请在输入标签中使用：

<input type="text" data-provide="datepicker" data-date-end-date="0d">

来源：https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#id5

【参考方案8】：

以上解决方案都不适合我。经过大量的搜索和调试，我终于修复了它。我在下面分享我的解决方案，如果像我一样面临同样问题的人可以尝试以下解决方案。

var now = new Date();
$('[name=depdate]').datepicker(
    format: 'yyyy-mm-dd',
    onRender: function(date) 
        if(date.valueOf() > now.addDays(15).valueOf()) 
            return 'disabled';
         else if(date.valueOf() < now.valueOf()) 
            return 'disabled';
        
    
)
.on('changeDate', function()
    $(this).datepicker('hide');
).data('datepicker');

【参考方案9】：

$(function()
    $('.datepicker').datepicker(
        format: 'mm-dd-yyyy',
        onRender:function(date)
            return date.valueOf() > FromEndDate.valueOf()?'disabled':'';
        
     );
);

【参考方案10】：

试试这个：

var date=new Date();
$('#datetimepicker').datetimepicker(
    format: 'MM/dd/yyyy',
    language: 'en',
    startDate : new Date('2015-01-01'),
    endDate :  date
);