Seleccionar fecha mediante un calendario PHP+JS

Escrito por J.F. el Lunes, 10 de Septiembre del 2007 a las 10:22

Curioso ejemplo que me encuentro, en el cual podemos elegir una fecha para colocarla en un campo de texto mediante un calendario que nos aparece al situar el foco. El código es el siguiente, y se utiliza PHP y Javascript:

TEXTO PLANO

HTML:

1. <form method="get" action="index.php">
2. Select Date:
3. <input type="text" name="cal1Date" id="cal1Date" autocomplete="off" size="35" value="<?php echo(($_GET['cal1Date']) ? urldecode($_GET['cal1Date']) : '') ?>" />
4. <input type="submit" value="Submit" />
5. </form>
6. <div id="cal1Container"></div>

TEXTO PLANO

JavaScript:

1. var cal1;
2. var over_cal = false;
3. function init() {
4.     cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
5.     cal1.selectEvent.subscribe(getDate, cal1, true);
6.     cal1.renderEvent.subscribe(setupListeners, cal1, true);
7.     YAHOO.util.Event.addListener('cal1Date', 'focus', showCal);
8.     YAHOO.util.Event.addListener('cal1Date', 'blur', hideCal);
9.     cal1.render();
10. }
11.  
12. function setupListeners() {
13.     YAHOO.util.Event.addListener('cal1Container', 'mouseover', overCal);
14.     YAHOO.util.Event.addListener('cal1Container', 'mouseout', outCal);
15. }
16.  
17. function getDate() {
18.         var calDate = this.getSelectedDates()[0];
19.         calDate = (calDate.getMonth() + 1) + '/' + calDate.getDate() + '/' + calDate.getFullYear();
20.         YAHOO.util.Dom.get('cal1Date').value = calDate;
21.         over_cal = false;
22.         hideCal();
23. }
24.  
25. function showCal() {
26.     var xy = YAHOO.util.Dom.getXY('cal1Date');
27.     var date = YAHOO.util.Dom.get('cal1Date').value;
28.     if (date) {
29.         cal1.cfg.setProperty('selected', date);
30.         cal1.cfg.setProperty('pagedate', new Date(date), true);
31.         cal1.render();
32.     }
33.     YAHOO.util.Dom.setStyle('cal1Container', 'display', 'block');
34.     xy[1] = xy[1] + 20;
35.     YAHOO.util.Dom.setXY('cal1Container', xy);
36. }
37.  
38. function hideCal() {
39.     if (!over_cal) {
40.         YAHOO.util.Dom.setStyle('cal1Container', 'display', 'none');
41.     }
42. }
43.  
44. function overCal() {
45.     over_cal = true;
46. }
47.  
48. function outCal() {
49.     over_cal = false;
50. }
51.  
52. YAHOO.util.Event.addListener(window, 'load', init);

Enlace: | Fuente del artículo y demo

Categoria: PHP, Javascript

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>