Jeditable Datepicker onblur problem - datepicker

I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
var form = this;
settings.onblur = function(e) {
t = setTimeout(function() {
original.reset.apply(form, [settings, self]);
}, 100);
};
$(this).find('input').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-y',
closeAtTop: true,
onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
});
},
submit : function(settings, original) { }
});
$(function() {
$('.edit_eta').editable('update_must_fix_eta.php', {
id: 'bugid',
name: 'eta',
type: 'datepicker',
event: 'click',
select : true,
width: '50px',
onblur:'cancel',
cssclass : 'editable',
indicator : 'Updating ETA, please wait.',
style : 'inherit',
submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1}
});
});
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.

Have you tried jeditable-datepicker plugin? It seems to do exactly what you need.
It enables jQuery UI Datepicker in Jeditable. Here's the demo.

Yes, I was using the same. I had to disable Prev and Next buttons which navigate to previous and next months respectively. I display 3 months calendar when the link is clicked and if the user wants to enter a date which does not fall in any of these 3 months I let him enter it manually by making the input text box editable. That solved my problem.

Related

SugarCRM: Month and Year selector is not working in datepicker

I have a situation like when status changes, the dialog window will open. In that dialog window I have 3 date fields. I used SugarCRM's default date picker. But when I want to change the year and month, the selector/input is not working. In fact on clicking these, the mouse pointer focuses in the first input field.
My code is below:
$.each(calenderSets, function(index, value){
Calendar.setup ({
inputField : index,//input field Id
ifFormat : cal_date_format,
daFormat : cal_date_format,
button : value,//calender icon ID
singleClick : true,
dateStr : "",
step : 1,
weekNumbers:false
});
});
And Dialog window:
dialog = new YAHOO.widget.Dialog('dialog1', {
width: winWidth,
fixedcenter : "contained",
visible : false,
draggable: true,
position: 'absolute',
close:true,
centered: true,
/*effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE, duration:0.2},
{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.2}],*/
modal:true
});
dialog.setHeader("All * marked fields are required");
dialog.setBody(Body here);
dialog.setFooter('<button title="save" type="button" class="report-scheduler-btn" name="save" onClick="saveInvoiceDetails()">Save</button>');
dialog.render(document.body);
dialog.show();
setCalenderToDateFields();
I just found and fixed this issue by adding the following to custom/themes/default/css/style.css:
.yui-calcontainer .yui-cal-nav {
z-index: 1001;
}
Because my date picker (as is yours) is within a UI dialog container, the default z-index of 3 in the .yui-cal-nav class isn't high enough to interact with the form fields in the date nav section (despite being able to see them). The overlay for my UI dialog has a z-index of 1000, so setting the z-index of .yui-cal-nav to 1001 put it high enough that I could interact with the form fields.

Is it possible to have a date input in a w2ui toolbar

I am wondering if there is any way one could place a date input control in a toolbar similar to the one used for date input on a form?
Yes, it's possible, but it's quirky.
You will have to define the input field as a toolbar button:
{ type: 'html', id: 'roles', html: '<input id="id_role">' },
and in the toolbar's onRefresh() event you will have to cast the input to the desired w2filed:
onRefresh: function(event) {
if(event.target == 'roles'){
// w2field in toolbar must be initialized during refresh
// see: https://github.com/vitmalina/w2ui/issues/886
event.onComplete = function(ev){
$("#id_role").w2field('list', { items: roles });
};
}
},
In my example I'm inserting a drop down list, but you can adjust it to your needs.
Please see https://github.com/vitmalina/w2ui/issues/886 for an "official" reply.

jquery Datepicker not calling blur function if clicked on iframe

I have a page in which I have a date field and a CKeditor textarea(which creates an iframe at the textarea place) . On date picker I have defined a blur function to check date validity, which works correctly.
However, the issue is when I click on a datepicker field the calendar popup gets generated then I enter a invalid date and then click on inside ckeditor , the calendar remains open however focus gets lost but still the blur function doesn't get called. Hence invalid date goes to server. (I need client side validation for this date field) .
$(function(){
$(".dateClass").datepicker({
changeMonth : true,
changeYear : true,
yearRange: "-10:+10",
dateFormat : "dd/mm/yy",
buttonText : "Choose",
showOtherMonths : true,
selectOtherMonths : true
});
$(".dateClass").blur(function(){
if(this.value!=undefined && this.value!=null && this.value.replace(/^\s+|\s+$/g, '')!=''){
if(!isDateValid(this.value) && calendarOpen==0){
alert('Please enter a valid date in dd/mm/yyyy format');
this.focus();
}
}
});
});
CKeditor is actually embedding an iframe in the page.
How do I call blur function when user clicks on date field and then on iframe ??
thnx I got it to work by doing a way around
document.onfocusout = function(e){ //for IE8 and lesser
if( e === undefined ){
//keeping validations here
}
}
$(window).blur( function(e){ //for other browsers –
if( e !== undefined ){
//keeping validations here
}
}
Use onSelect for your required situation as
$(".dateClass").datepicker({
changeMonth : true, changeYear : true,
yearRange: "-10:+10", dateFormat : "dd/mm/yy",
buttonText : "Choose", showOtherMonths : true,
selectOtherMonths : true ,
onSelect: function(dateText, inst) { var date = $(this).val(); var time = $('#time').val(); alert('on select triggered');
}
});
Sorry for unformated code.
Hope it will help
http://forum.jquery.com/topic/jquery-datepicker-onblur

Extjs3.3.0 numberfield

The window contain a form which including NumberField(allowBlank: false), as soon as you open the window the NumberField is outlined in red. saying the field is required. but we hope the NumberField should not be outlined in red unless the user clicks the filed and clicks away without entering anything. how to config this NumberField.
extjs library: 3.3.0
Here is what I do.
Basically I listen to 'focus'/'blur' event and if value is blank, call markInvalid, otherwise clearInvalid.
xtype : 'numberfield',
fieldLabel :'number',
markNumberInvalid : function(){
if(this.getValue() == ""){
this.markInvalid();
}else{
this.clearInvalid();
}
},
listeners : {
'focus' : function(){
this.markNumberInvalid();
},
'blur' : function(){
this.markNumberInvalid();
}
}

Truncated text with jEditable

So I have an editable line of text on my website. Whenever the text is changed and is above a certain length, I truncate the text.
Simplified jsfiddle here - http://jsfiddle.net/3kwCr/1/
On subsequent clicks on the text to edit, the truncated value with ellipsis is picked up. How do I get jEditable to pick up the actual value which is present as an attribute in the div?
data: function() { $('.editable-value').attr('value') }
will not work as I have several of these editable lines of text
I need something like
data: function() { this.attr('value') }
where this would the div object to which .editable has been applied to.
Just wrap this into jQuery object so you can use jQuery methods on it. Below is updated code. I also updated the example jsFiddle.
$('.editable').editable(function(value, settings) {
$(this).attr('value', value);
if (value.length > 10) {
return(value.slice(0,10)) + '...';
} else {
return(value);
}
}, {
data : function(value) { return($(this).attr('value')); },
type : 'text',
submit : 'OK'
});