首页 文章

使 Span 打开并关闭内联引导日期选择器日历

提问于
浏览
3

Explanation:

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

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

我的应用程序是一个Project Management应用程序,它在弹出的Modal窗口中显示Project Tasks . 在任务模式中,有一个 Due Date 字段 .

我想在打开模态时显示任务的截止日期值 . 当用户单击现有截止日期字段的文本时,我想显示并显示内联日期选择器日历 . 就像链接到上面的库!

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

一切都很简单,但我可以用一点帮助!

我有一个工作JSFiddle演示:http://jsfiddle.net/jasondavis/dd1bmrrc/

我的自定义代码也显示在下面 . 缺少的是Bootstrap Date Picker库,jQuery,MockAjax库和CSS . 它全部加载在上面链接的JSFiddle上 .

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


The Problem

在我的演示页面http://jsfiddle.net/jasondavis/dd1bmrrc/,你会看到我有一个持有Date值的 Span .

旁边是一个文本输入,单击该按钮会显示日期选择器日历 .

选择日期后,我的范围会更新,并且隐藏日期选择器 .

再次单击我的 Span 显示日期选择器文本框 .

然后,您还必须单击文本框以查看日期选择器日历 .

所以我的目标是没有文本框 . Span值应该打开并关闭Datepicker,而不需要存在文本框!

这有可能吗?


The Code

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 = '';
        }
    }
});

1 回答

  • 1

    一种方法是保留输入,将其放在 Span 的顶部,但使用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;  
    
    }
    

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

    DEMO

相关问题