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
Related
I have a date picker in my XML view and it allowed to enter integer and even saved. How to validate if the user entered in right date format.
<DatePicker value="{model>Date}" valueFormat="yyyyMMdd"
displayFormat="dd/MMM/YYYY" change="Change"/>
Try this, THI.
Hope it helps.
onChange: function(oEvent) {
var bValid = oEvent.getParameter("valid");
var oDP = oEvent.getSource();
if (!bValid) {
sap.m.MessageToast.show("Entered date range isn't valid");
oDP.setValueState("Error");
return;
}
},
I'm really just looking to assign additional information to dates. I am currently setting up datepicker with the following:
beforeShowDay: function(date){
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, ajaxDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
},
Where ajaxDates is an array containing a list of available dates such as:
var ajaxDates = [ "26-2-2015", "27-2-2015"];
It's for a booking system were I have another array containing the number of seats available for every date. I had seen a post that I can no longer find were someone was attaching additional information to the dates. If someone could point me in the right direction that would be great!
Edit: I have noticed that the a title is attached to each date which on hover shows the tooltip as "Available" or "Unavailable". Is there any easy method to access through the datepicker?
The solution that I was referring to was:
Add custom parameter to jQuery UI Datepicker
An example of how to set additional parameters is as followed:
var input = $("#datepicker");
var result = $("#result");
var courses = {
"02-09-2013" : "history",
"10-09-2013": "physics"
};
input.datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
firstDay: 1,
numberOfMonths: 3,
onSelect: function(dateText, pickerObj){
result.attr("data-course-id", courses[dateText]);
course.innerHTML = courses[dateText];
},
altField: "#result"
});
http://jsfiddle.net/Seandeburca/qbLwD/
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();
}
}
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'
});
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.