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

Question

说明：

我正在为使用 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 = '';
        }
    }
});

Answer 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