PDA

View Full Version : Ext DatePicker question



danvega
13 Dec 2007, 10:53 AM
I have created a simple html page below that has 3 date picker examples. For each date field there is a calendar icon and when the user clicks it the date picker is populated before the form. When i call my function that shows the calendar I pass along the div where the calendar will be show and the text field to populate the date with.

I have a listener defined for when a user selects a date, my only question is how can i pass a field to the onSelect method so i know what date we are talking about. If you run the example below it only works for date1 because it is hard coded. I am not really that good at js so if I am doing this all wrong excuse me.



<html>
<head>
<title>Ext Calendar Test</title>
<script language="JavaScript" type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script language="JavaScript" type="text/javascript" src="js/extjs/ext-all.js"></script>

<link href="js/extjs/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>

<script language="JavaScript" type="text/javascript">
function showCal(id,dateField) {
var dp = new Ext.DatePicker({
renderTo:id,
format:"m/d/y"
});

//get the element
var el = document.getElementById(dateField);
if(el.value != "") {
selectedDate = new Date(el.value);
dp.setValue(selectedDate);
}
dp.addListener("select",onSelect);
}

function onSelect(datePicker,date) {
var dt = new Date(date);
document.getElementById("date1").value = dt.format("m/d/Y");
datePicker.destroy();
}
</script>
</head>
<body>

<label for="date1">Date 1</label>
<input type="text" name="date1" id="date1" value="">
<img src="images/calendar.gif" align="center" style="cursor:pointer" onclick="showCal('date1-cal','date1');">
<div id="date1-cal"></div>
<br /><br />

<label for="date1">Date 2</label>
<input type="text" name="date2" id="date2" value="">
<img src="images/calendar.gif" align="center" style="cursor:pointer" onclick="showCal('date2-cal','date2');">
<div id="date2-cal"></div>
<br /><br />

<label for="date1">Date 3</label>
<input type="text" name="date3" id="date3" value="">
<img src="images/calendar.gif" align="center" style="cursor:pointer" onclick="showCal('date3-cal','date3');">
<div id="date3-cal"></div>
<br /><br />

</body>
</html>

halkon_polako
14 Dec 2007, 10:57 AM
You can extend DatePicker to store the id-field, and the, in the onSelect function retrieve it from the DatePicker object.
Something like (Ext 2.0 code):



Ext.namespace("Ext.my");
Ext.my.DatePicker = function(config){
this.idField=config.idField;
Ext.my.DatePicker.superclass.constructor.call(config);
};
Ext.extend(Ext.my.DatePicker, Ext.DatePicker,{
idField:null
});

......................
var dp = new Ext.my.DatePicker({
renderTo:id,
format:"m/d/y",
idField:dateField
});
..................

function onSelect(datePicker,date) {
var dt = new Date(date);
document.getElementById(datePicker.idField).value = dt.format("m/d/Y");
datePicker.destroy();
}


I think this can work.

But... my recomendation is that you should use Ext widgets and Ext.form.DateField to make a good RIA application. ;)

oyeguru
23 Jan 2008, 5:16 AM
Here's a solution for the DatePicker based on your =D> and halkon_polako =D> code


<html>
<head>
<title>Ext Calendar Test</title>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<link href="../../resources/css/ext-all.css" type="text/css" rel="stylesheet"/>

<script language="JavaScript" type="text/javascript">
function showCal(id,dateField) {

var dp = new Ext.DatePicker({ renderTo:id, format:"m/d/y", idField:dateField });

//get the element
var el = document.getElementById(dateField);
if(el.value != "")
{
selectedDate = new Date(el.value);
dp.setValue(selectedDate);
}
dp.addListener("select", onSelect);
}

function onSelect(datePicker,date)
{
var dt = new Date(date);
document.getElementById(datePicker.idField).value = dt.format("m/d/Y");
datePicker.destroy();
}
</script>
</head>
<body>

Date 1
<input type="text" name="date1" id="date1" value="">
<input type=button style="cursor:pointer" onclick="showCal('date1-cal','date1');">
<div id="date1-cal" style="position:absolute;"></div>
<br /><br />

Date 2
<input type="text" name="date2" id="date2" value="">
<input type=button style="cursor:pointer" style="cursor:pointer" onclick="showCal('date2-cal','date2');">
<div id="date2-cal" style="position:absolute;"></div>
<br /><br />

Date 3
<input type="text" name="date3" id="date3" value="">
<input type=button style="cursor:pointer" style="cursor:pointer" onclick="showCal('date3-cal','date3');">
<div id="date3-cal" style="position:absolute;"></div>
<br /><br />

</body>
</html>