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

Question

Explanation:

I am building a plugin for an application that uses thisa Bootstrap Datepicker plugin here http://www.eyecon.ro/bootstrap-datepicker/

So I am trying to utilize the same plugin for a Date Picker in my plugin for the app that already uses that Date Picker library.

My app is a Project Management app that shows Project Tasks in a popup Modal window. IN the Task Modal, there is a Due Date field.

I want to show the Due Date value for a Task when the Modal is opened. When a user clicks on the text for an existing Due Date field, I want to reveal and show an inline Date Picker Calendar. Just like the linked to library above!

So a user clicks on the Due date to reveal the date picker. They then click a date value which make an AJAX post to server and saves the new date value. It then should update the text that they originally clicked on with the new date value and then hide/close the date picker.

All pretty simple however I can use a little help please!

I have a Working JSFiddle Demo: http://jsfiddle.net/jasondavis/dd1bmrrc/

My custom code is all shown below as well. All that is missing is the Bootstrap Date Picker library, jQuery, MockAjax library, and CSS. It is all loaded on the JSFiddle linked above though.

You can also see some options on the Date Pickers project page here http://www.eyecon.ro/bootstrap-datepicker/

The Problem

On my demo page here http://jsfiddle.net/jasondavis/dd1bmrrc/ you will see that I have a span holding a Date value.

Next to it is a text input which when clicked on shows the Date Picker Calendar.

After selecting a Date, my span is updated and Date Picker is hidden.

Clicking my span again shows the Date picker text box.

You then have to click the text box as well to see the Date Picker Calendar.

So my goal is to not have the Text Box. The Span value should open and close the Datepicker, without a textbox needing to exist!

Is this even possible?

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 for Date Picker:

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

    });

});

Mock AJAX request for Demo:

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

charlietfl charlietfl · Accepted Answer · 2015-05-02T00:38:02

One way is to leave the input, lay it over top of the span but with css that makes it invisible to user. The events are still triggered on the input

#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;  

}

I used an extra wrapper with position relative around the input and span

DEMO

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

1 Answers