使跨度打开和关闭内联 Bootstrap 日期选择器日历

Question

解释：

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

所以我试图在我的插件中为已经使用该日期选择器库的应用程序使用相同的日期选择器插件。

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

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

因此，用户单击截止日期以显示日期选择器。然后，他们单击一个日期值，向服务器生成 AJAX post 并保存新日期值。然后它应该用新的日期值更新他们最初点击的文本，然后 hide/close 日期选择器。

一切都非常简单，但是我需要一点帮助！

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

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

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

问题

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

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

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

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

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

所以我的目标是不要文本框。 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');
            }
        });

    });

});

模拟 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

使跨度打开和关闭内联 Bootstrap 日期选择器日历

Make a Span open and close an In-Line Bootstrap Date Picker Calendar

javascript

jquery

twitter-bootstrap

bootstrap-datepicker