正文 

当前位置： 首页 > 问答 >

保持引导日期选择器始终打开

     2023-05-08     40

关键词：

【中文标题】保持引导日期选择器始终打开【英文标题】：keep bootstrap datepicker always open 【发布时间】：2018-06-23 14:36:47 【问题描述】：

希望日期选择器始终可见，而不是在单击日历时。 所以我只是想知道如何实现这一目标。我正在尝试KeepOpen = true;，但这不起作用。我想知道我怎样才能做到这一点。

这里我留下一些 JS 和 html 代码供您检查。如果您需要更多参考资料，我可以提供。

<script type="text/javascript">
 $(function ()  var bindDatePicker = function() 
    $(".date").datetimepicker(
    useCurrent: false,
    keepOpen: true,
    format:'YYYY-MM-DD',
        icons: 
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-arrow-up",
            down: "fa fa-arrow-down"
        
    ).find('input:first').on("blur",function () 

        // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
        // update the format if it's yyyy-mm-dd
        var date = parseDate($(this).val());

        if (! isValidDate(date)) 
            //create date based on momentjs (we have that)
            date = moment().format('YYYY-MM-DD');
        

        $(this).val(date);
    );

var isValidDate = function(value, format) 
    format = format || false;
    // lets parse the date to the best of our knowledge
    if (format) 
        value = parseDate(value);
    

    var timestamp = Date.parse(value);

    return isNaN(timestamp) == false;


var parseDate = function(value) 
    var m = value.match(/^(\d1,2)(\/|-)?(\d1,2)(\/|-)?(\d4)$/);
    if (m)
        value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

    return value;


bindDatePicker();


 );

这里是包含的 div：

<div class="container">
        <div class="row">
            <div class='col-sm-3'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' name="datepicker" autocomplete="off" class="form-control" id="datepicker" />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

Always display bootstrap-datepicker, not just on focus的可能重复 【参考方案1】：

您必须使用.show() 方法来保持您的dateTimePicker 可见，请注意所有DateTimePicker 的功能都可以通过数据属性访问，例如

$('.date').data("DateTimePicker").show();

工作演示：

$( document ).ready(function() 
    
    var bindDatePicker = function() 
        $(".date").datetimepicker(
            useCurrent: false,
            keepOpen: true,
            format:'YYYY-MM-DD',
            icons: 
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            
        ).find('input:first').on("blur",function () 

            // check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
            // update the format if it's yyyy-mm-dd
            var date = parseDate($(this).val());

            if (! isValidDate(date)) 
                //create date based on momentjs (we have that)
                date = moment().format('YYYY-MM-DD');
            

            $(this).val(date);
        );
        
        // here show dateTimePicker via js
        $('.date').data("DateTimePicker").show();
    

    var isValidDate = function(value, format) 
        format = format || false;
        // lets parse the date to the best of our knowledge
        if (format) 
            value = parseDate(value);
        

        var timestamp = Date.parse(value);

        return isNaN(timestamp) == false;
    

    var parseDate = function(value) 
        var m = value.match(/^(\d1,2)(\/|-)?(\d1,2)(\/|-)?(\d4)$/);
        if (m)
            value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);

        return value;
    

    bindDatePicker();


);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="row">
        <div class='col-sm-3'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' name="datepicker" autocomplete="off" class="form-control" id="datepicker" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

Glade 帮了大忙， 有没有办法在React 中保持日历始终打开？

设置默认日期引导日期选择器

】设置默认日期引导日期选择器【英文标题】：SetDefaultDateBootstrapDatepicker【发布时间】：2014-03-1921:20:31【问题描述】：如何在BootstrapDatepicker中设置默认日期？我想设置一个日期：24/12/2006当我打开日期选择器时，它应该在日历上... 查看详情

引导验证器和日期时间选择器冲突

...验证器无法识别从选择器中选择的日期字段，并且该字段保持红色-表示尚未选择日期。我有一个小提琴here，包括我的代码。但它似乎也不起作用。非常感谢任何 查看详情

谷歌浏览器突然开始自动打开引导时间和日期选择器

】谷歌浏览器突然开始自动打开引导时间和日期选择器【英文标题】：Googlechromesuddenlystartedopeningbootstraptimeanddatepickerautomatically【发布时间】：2021-04-0621:06:37【问题描述】：在我的网站中，我添加了bootstrapMaterialDatePicker用于从日... 查看详情

如何更改引导日期选择器月视图以显示季度

...度报告使用bootstrap-datepicker，并且我想在我的应用程序中保持相同的标准，因此如果我避免使用选择框来显示季度，那就太好了。当您处于月视图模 查看详情

引导日期选择器上的棘手问题

】引导日期选择器上的棘手问题【英文标题】：Stickyissueonbootstrapdatepicker【发布时间】：2018-01-1409:20:11【问题描述】：我在一个网站上使用bootstrapdatepicker，它还通过给它的父级一个固定的位置来设置为粘性，它工作正常但是在Ipa... 查看详情

模式中的引导日期选择器不起作用

】模式中的引导日期选择器不起作用【英文标题】：Bootstrapdatepickerinmodalnotworking【发布时间】：2016-05-1801:39:39【问题描述】：我已经尝试用谷歌搜索类似的问题，但到目前为止还没有找到任何东西。我有一个问题，我从jquery创建... 查看详情

为啥这个引导日期选择器不显示日期选择器？

】为啥这个引导日期选择器不显示日期选择器？【英文标题】：Whydoesthisbootstrapdatepickernotshowthedatepicker?为什么这个引导日期选择器不显示日期选择器？【发布时间】：2017-04-2615:29:27【问题描述】：我有使用引导日期选择器的现有... 查看详情

引导日期选择器和引导验证器

】引导日期选择器和引导验证器【英文标题】：Bootstrapdatepickerandbootstrapvalidator【发布时间】：2014-10-2114:52:03【问题描述】：我正在使用来自here的引导日期选择器和来自here的引导验证器。我也在使用引导程序v3.1.1。从日期选择器... 查看详情

更改时引导日期选择器

】更改时引导日期选择器【英文标题】：bootstrapdatepickeronchange【发布时间】：2019-08-2316:17:09【问题描述】：我有一个引导日期选择器，我想在日期更改时提醒它，但它的工作方式不同我正在尝试使用简单的jqueryon.(change)事件，因... 查看详情

引导日期选择器从另一个日期选择器更改 minDate/startDate

】引导日期选择器从另一个日期选择器更改minDate/startDate【英文标题】：BootstrapdatepickerchangeminDate/startDatefromanotherdatepicker【发布时间】：2015-08-0723:49:45【问题描述】：我的页面中有两个日期选择器，它们都是引导程序。条件只是... 查看详情

引导输入类型=“日期”不加载日期选择器

】引导输入类型=“日期”不加载日期选择器【英文标题】：bootstrapinputtype="date"notloadingdatepicker【发布时间】：2015-07-2508:18:21【问题描述】：我正在尝试使用引导输入类型“日期”来创建带有日期选择器的输入字段，但是... 查看详情

在选择时更改引导日期选择器日期格式

】在选择时更改引导日期选择器日期格式【英文标题】：Changebootstrapdatepickerdateformatonselect【发布时间】：2013-11-2808:28:36【问题描述】：我在文本框上使用引导日期选择器。选择日期时的默认日期格式为mm/dd/yyyy。现在我想把它改... 查看详情

如何使用引导日期选择器

】如何使用引导日期选择器【英文标题】：Howtousebootstrapdatepicker【发布时间】：2013-09-0209:45:12【问题描述】：好的，所以我是使用框架和js库的新手，我希望我们引导和引导日期选择器作为表单，我不知道我的文件顺序是否正确... 查看详情

在引导日期选择器中启用特定日期

】在引导日期选择器中启用特定日期【英文标题】：Enablespecificdatesinbootstrapdatepicker【发布时间】：2019-10-0421:57:22【问题描述】：我的网站上有一个引导日期选择器(https://github.com/uxsolutions/bootstrap-datepicker)，并且我想启用和禁用日... 查看详情

如何在引导日期选择器中突出显示特定日期？

】如何在引导日期选择器中突出显示特定日期？【英文标题】：Howtohighlightspecificdatesinbootstrapdatepicker?【发布时间】：2015-05-0104:54:56【问题描述】：我正在使用引导日期选择器。我需要突出显示一些随机日期。例如：我需要突出... 查看详情

引导日期选择器，每月动态禁用日期

】引导日期选择器，每月动态禁用日期【英文标题】：Boostrapdatepicker,disableddatesdynamicallyeachmonth【发布时间】：2017-08-2306:26:28【问题描述】：我可以禁用日期：$(\'#datepicker\').datepicker(todayHighlight:true,datesDisabled:[\'03/06/2017\',\'03/21/2017... 查看详情

引导日期选择器

】引导日期选择器【英文标题】：Bootstrapdatepicker【发布时间】：2012-11-0221:23:48【问题描述】：我正在尝试让突出显示在下拉日期选择器上选择的日期。它目前没有这样做..我错过了什么？<divclass="input-appenddate"id="datepicker"data-dat... 查看详情

引导日期选择器不适用于 Webpack

】引导日期选择器不适用于Webpack【英文标题】：BootstrapdatepickernotworkingwithWebpack【发布时间】：2018-01-1502:27:14【问题描述】：我使用dotnetcorespastater模板创建了一个带有react的aspnetcorespa项目。我正在使用该stater模板附带的默认webpac... 查看详情