使 Span 打开和关闭 In-Line Bootstrap 日期选择器日历

Posted 2023-05-09

【中文标题】使 Span 打开和关闭 In-Line Bootstrap 日期选择器日历

【英文标题】：Make a Span open and close an In-Line Bootstrap Date Picker Calendar

【发布时间】：2015-07-11 20:42:59

【问题描述】：

说明：

我正在为使用 thisa Bootstrap Datepicker 插件的应用程序构建一个插件 http://www.eyecon.ro/bootstrap-datepicker/

因此，我尝试在我的插件中为已经使用该日期选择器库的应用程序使用相同的日期选择器插件。

我的应用是一个项目管理应用，它在弹出的模态窗口中显示项目任务。在任务模式中，有一个截止日期字段。

我想在打开模式时显示任务的截止日期值。当用户单击现有截止日期字段的文本时，我想显示并显示一个内联日期选择器日历。就像上面链接到的库一样！

因此，用户单击截止日期以显示日期选择器。然后他们单击一个日期值，该日期值将 AJAX 发布到服务器并保存新的日期值。然后它应该使用新的日期值更新他们最初单击的文本，然后隐藏/关闭日期选择器。

一切都非常简单，但我可以使用一些帮助！

我有一个有效的 JSFiddle 演示：http://jsfiddle.net/jasondavis/dd1bmrrc/

我的自定义代码也都显示在下面。缺少的只是 Bootstrap 日期选择器库、jQuery、MockAjax 库和 CSS。不过，它都加载在上面链接的 JSFiddle 上。

您还可以在此处http://www.eyecon.ro/bootstrap-datepicker/ 的日期选择器项目页面上查看一些选项

---

问题

在我的演示页面http://jsfiddle.net/jasondavis/dd1bmrrc/ 上，您会看到我有一个保存日期值的跨度。

它旁边是一个文本输入，点击它会显示日期选择器日历。

选择日期后，我的跨度被更新，日期选择器被隐藏。

再次单击我的 span 会显示日期选择器文本框。

然后您还必须单击文本框才能查看日期选择器日历。

所以我的目标是没有文本框。 Span 值应该打开和关闭 Datepicker，不需要存在文本框！

这可能吗？

---

守则

html：

<span id="due-date-span">1/1/2015</span>
<input type="text" class="span2" value="02-16-2012" id="task-due-date-cal">

日期选择器的 javascript：

$(function()

    // Show Date Picker Calaendar when "Due Date" SPAN text is clicked on:
    $('#due-date-span').on('click', function()
        $('#task-due-date-cal').show();
    );

    // Instantiate and run Date Picker Calendar plugin
    var dueDatePicker = $('#task-due-date-cal').datepicker(
        format: 'mm-dd-yyyy',

    // When Date Picker Date is clicked on to change a Date value:
    ).on('changeDate', function(ev)

        dueDate = new Date(ev.date);

        // Make AJAX POST to save Due Date value to the server and update DOM.
        $.ajax
        (
            type: "post",
            url: "updateDueDate",
            data: "date="+dueDate,
            success: function(result)
            
                // UPDATE SPAN #due-date-span with new Date value
                $('#due-date-span').text(dueDate);

                // Close/Hide Date Picker, until it is clicked to show again
                $('#task-due-date-cal').hide();
                $('#task-due-date-cal').datepicker('hide');
            
        );

    );

);

Demo 的模拟 AJAX 请求：

// Mock AJAX response for AJAX request to /updateDueDate to Update In-line Task Due Date Fields
$.mockjax(
    url: '/updateDueDate',
    responseTime: 900, // simulate lag
    response: function(settings) 
        //console.log(settings.data);
        console.log('info', 'UPDATE TASK FIELD AJAX REQUEST SENT', settings.data);
        if(settings.data.value == 'err') 
            this.status = 500;
            this.responseText = 'Validation error!';
         else 
            this.responseText = '';
        
    
);

【参考方案1】：

一种方法是保留输入，将其放置在跨度之上，但使用 css 使其对用户不可见。事件仍然在输入上触发

#task-due-date-cal, #task-due-date-cal:focus
    position:absolute;
    z-index:10000;
    left:0;
    top:0;
    background:none;
    font-size:0;
    border:none;
    margin:0;
    box-shadow:none;  

我使用了一个额外的包装器，其位置相对于输入和跨度

DEMO

【讨论】：

在发布我的问题后，我实际上尝试了这个，隐藏了文本输入并看到它的行为符合我的需要，但日历最终与浏览器顶部对齐并左为 0！因此，您的方法似乎可能与文本字段对齐，从而解决了该问题。我认为这可能是要走的路，我讨厌它感觉像这样的“黑客”，但如果它是唯一的路，那么我会去的！谢谢你的回答，

我知道它可能需要出现在一个新问题中，但您是否知道如何使它在屏幕中看起来“内嵌”而不是看起来像弹出窗口？这张图片显示了它的放置位置，因此您可以了解我为什么要将它嵌入 i.imgur.com/VAA5mEt.png 显示现有日历的位置

我无法启动演示站点，但是这个 fork 显示了一个内联版本。我什至没有看文档就做了隐藏技巧，主要是为了练习