When you press the 'Cancel' button, the value appearing in the field is not updated, (that's ok) but fieldDate.getValue() gives the latest value, as if you did a 'Done'
dateField = new Ext.field.DatePicker({
style : style,
id : data.ItemId,
itemId : 'dateField',
picker: {
value: (new Date()),
yearFrom : 1900
}
});
Please suggest.
Related
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.
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
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();
}
}
I have created a datepicker field. When the date picker is displayed and the cancel button is tapped, it takes the first value as the default value. I need to check a condition where I can handle the cancel button on the date pipcker field
case 'Date':
console.log('date value: '+value);
var dt = new Date(value);
console.log('new date: '+dt);
if (dt == 'Invalid Date' || dt == 'NaN/NaN/0NaN') {
value = '';
} else {
value = dt;
}
element = Ext.create('Ext.Container', {
layout : 'hbox',
items : [ {
xtype : 'datepickerfield',
label : label,
name : 'standTimeEdit',
defaultDateFormat : 'D M Y',
value : value,
width : '100%',
style : 'border: 0px solid gray;border-radius:10px',
listeners:{
change:function(){
value = dt;
}
cancel:function(){
console.log('cancel event fired');
}
}
} ]
});
break;
You can try using cancel event of date picker field which will fired when the cancel button is tapped and the values are reverted back to what they were.
Hope it helps :)
I solved this issue by overriding the cancel event in the picker.
var picker = this.getPicker();
picker.on('cancel',function(){
if(defValue == ''){
if(count > 1){
picker.setValue(preVal);
dateObj.setValue({day: preVal.getDate(), month: (preVal.getMonth()+1), year : preVal.getFullYear()});
}
else{
picker.setValue(null);
dateObj.setValue(null);
count--;
}
}
});
This gave me a handle to the cancel button in the picker.
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.