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

Posted 2023-05-08

【中文标题】保持引导日期选择器始终打开

【英文标题】：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 中保持日历始终打开？