Make Span open and close the upload date picker calendar in In-Line mode

Explanation:

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

So I am trying to use the same Date Picker plugin in my plugin for an application that already uses this Date Picker library.

My app is a project management app that shows project tasks in a Modal popup. There is a Release Date field in Job Modifications .

I want to show the Due Date value for a task when opening a modal file. When the user clicks on the text for an existing Due Date field, I want to show and show the inline date calendar. Like the library linked above!

Thus, the user clicks the Date button to open the date picker. Then they fetch the date value which makes the AJAX message the server and stores the new date value. Then it has to update the text they originally clicked with the new date value and then hide / close the date picker.

Quite simple, but I can help a little!

I have a working JSFiddle demo: http://jsfiddle.net/jasondavis/dd1bmrrc/

My custom code is also shown below. All that's missing is the Bootstrap Date picker library, jQuery, MockAjax library, and CSS. It's all uploaded to the JSFiddle linked above though.

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


Problem

In my demo page here http://jsfiddle.net/jasondavis/dd1bmrrc/ you can see that I have a range containing a date value.

Next to it is a text input that, when clicked, opens the date picker calendar.

After picking the date, my range is updated and the Date Picker is hidden.

Clicking on my range reveals the Date picker textbox again.

Then you need to click the text box to see the Date Picker Calendar.

So my goal is not to have a textbox. The Span value must open and close a Datepicker without a textbox that must exist!

Is it possible?


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 picking a date:

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

      

+3


source to share


1 answer


One way is to leave the input, place it on top of the top of the range, but using css, making it invisible to the user. Events are still firing at the entrance

#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 to input and range

DEMO

+1


source







All Articles