Rectangle 27 0

I found a solution that I believe meets your requirements. Rather than try to explain all the differences from the example you provided, it would be much easier to instead show you a standalone example of what I did.

The example uses jquery, jquery-ui, and jeditable. I'm not using jquery.jeditable.datepicker.js, but rather just the addInputType method of $.editable:

$(function () {
    $.editable.addInputType('datepicker', {
        element: function(settings, original) {
            var input = $('<input />');
            input.attr('autocomplete', 'off');
            $(this).append(input);

            // rather than assigning plugin separately, I'm just adding it here
            //     (but doing it this way isn't critical to this solution)
            input.datepicker({
                dateFormat:'yy-mm-dd', 
                showOn: "button",
                buttonImage: "calendar_icon.gif",
                buttonImageOnly: true,
                beforeShow: function() {
                    var editable_datepicker = $(this).parent().parent().get(0);
                    // This is the heart of the solution:
                    editable_datepicker.editing = false;
                },
                onClose: function(a, b) {
                    var form = $(this).parent();
                    form.submit();
                }
            });           
            return input;
        }
    });
});

The key to this solution lies in how the private reset method of $.editable works. It will not reset (cancel) the input if the original parent element's javascript key "editing" is set to false. I just used .datepicker's beforeShow to set it as such.

And here's the remaining code for this example:

$(function() {
    $(".editable_datepicker").editable('ajax_save.php',{
        id          : 'id',
        type        : 'datepicker',
        style       : 'margin:0px;width:80%;display:inline',
        onblur      : 'cancel', // use 'cancel'!
        tooltip     : 'Double click to edit',
        event       : 'dblclick'
    });
});
<span class='editable_datepicker'>01/01/2012</span>

Jeditable and jQuery UI Datepicker onblur cancel not working with show...

jquery jquery-ui-datepicker jeditable
Rectangle 27 0

So that's how it works in jqueryui datepicker. There's an input and an onfocus event to show calendar div. And there's no onblur event. Instead of this there is onmousedown event, attached to the whole document. There we check event.target and its parents for matching to our calendar div class and input.

jquery - How jqueryui datepicker prevents onblur event? - Stack Overfl...

jquery jquery-ui datepicker onblur
Rectangle 27 0

So that's how it works in jqueryui datepicker. There's an input and an onfocus event to show calendar div. And there's no onblur event. Instead of this there is onmousedown event, attached to the whole document. There we check event.target and its parents for matching to our calendar div class and input.

jquery - How jqueryui datepicker prevents onblur event? - Stack Overfl...

jquery jquery-ui datepicker onblur
Rectangle 27 0

It turns out the text box blur event will occur before datepicker will put in its value. I invoked the blur from datepicker's close event.

$(function() {
   $('.datepicker').datepicker({
       onClose: function() {        
       $(this).trigger('blur');
       }
   });
}); //ready

TextBox onBlur Value from jQuery DatePicker - Stack Overflow

jquery datepicker
Rectangle 27 0

Attach a blur event on the datepicker input field and then check its value

$(".dtpicker").blur(function(){
.
.
.

validation - jQuery Datepicker validate similar to onblur - Stack Over...

jquery validation datepicker onblur
Rectangle 27 0

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
});

macca1, thank you for the response. May I ask a follow up for clarity, please? Where would I put that code so that it fires after a date has been selected? I tried just putting it inside my script tags but it goes off right when the page loads when I do that.

Yes, you can do this way. But if you still want to use onblur() event then I can suggest that for each date text field set selected date as data to text field element and in onblur() event check that data is changed or not from previous date. if not just return otherwise process your script

If I'm understanding what you're saying though. The question still remains for me as to how to get the date selected onblur() or onSelect of the calendar control. Just to clarify, the user can pick whatever date they want, but when they do I need to then check if that date is greater than today. That is why the onblur or onSelect needs to be fired after the date is selected. Does that make sense? Thanks.

@d3020 The onSelect is an option that you pass when you first add the datepicker to your element. You add it where you say .datepicker() on your element (probably in your document.ready). Also, if you only want them to pick a future date, you can restrict that: jqueryui.com/demos/datepicker/#option-minDate

Got the onSelect in place. I took a look at that link. It was not apparent to me initially what I'd use to restrict the start date value to be greater than today. I actually need to a couple of things with it including that. Like, make sure end date is greater than start date selected. Then once there valid dates calculate the week difference between the dates. I'd actually pay someone to help me knock this out.

javascript - jQuery - datepicker - onblur - Stack Overflow

javascript jquery datepicker
Rectangle 27 0

You can try something like this:

$(".datepicker").blur(function(){
  var date = "4-5/2012 12:14:60 PM"; // replace this by $(this).val() to get your date from the input
  var validate = Date.parse(date);
  if (validate.isNaN()) {
    // do something if the date is not valid
  }

});

validation - jQuery Datepicker validate similar to onblur - Stack Over...

jquery validation datepicker onblur
Rectangle 27 0

If you are looking for a validation plugin, try jquery validate

validation - jQuery Datepicker validate similar to onblur - Stack Over...

jquery validation datepicker onblur