Calendario emergente
Tengo un formulario de inserción de registros donde los datos de vuelcan a una base de datos sql. Bien el tema es que tengo un campo que es fecha y me gustaría introducir un calendario emergente cuando se pulsara un botón. Mi pregunta es la siguiente: ¿Es posible configurar el campo fecha para que se rellene con la fecha que seleccionamos en el calendario emergente? Me gustaría saber un poco los pasos que hay que seguir para configurar esto, si es posible claro.
2 Respuestas
Respuesta de Victor Portero
-1
-1
Aquí tienes un post super completo de como hacerlo perfectamente explicado y paso por paso.
Si se te complica me comentas.
Como hacer un calendario
Si se te complica me comentas.
Como hacer un calendario
Hola Sakrow,
Perfecto, Me he bajado la demo y la he abierto en dreamweaver y funciona. lo único es que me gustaría que se rellenara con la fecha el campo de mi formulario y viendo el código no se muy bien lo que tengo que cambiar. He probado varias cosas pero no lo he conseguido.
Me puedes dar algún tipo de ayuda?
Gracias.
Jordi.
Perfecto, Me he bajado la demo y la he abierto en dreamweaver y funciona. lo único es que me gustaría que se rellenara con la fecha el campo de mi formulario y viendo el código no se muy bien lo que tengo que cambiar. He probado varias cosas pero no lo he conseguido.
Me puedes dar algún tipo de ayuda?
Gracias.
Jordi.
¿Qué has probado? El propio manual te explica como hacer que el propio JS rellene el contenido, ademas hay una opción de que el usuario no lo pueda modificar manualmente.
Perdona mi ignorancia o mi falta de conocimiento, pero no lo veo donde dice para que la fecha se me rellene en el campo que quiero... No se como aplicarle al campo data que tengo en mi formulario la JS...
Si seguimos las instrucciones del plugin, vemos que utilizar el calendario para seleccionar una fecha es realmente sencillo. Sólo hay que escribir, en su forma más básica:
<script type="text/javascript"> $(document).ready(function() { $("#datepicker").datepicker(); }); </script>
Siendo en este caso “#datapicker” el id del input del formulario al que aplicamos el calendario:
<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
Como veréis le hemos añadido el atributo readonly para que no pueda ser modificado el contenido del input por el usuario, es decir, que se quede la fecha elegida sin poder alterarla manualmente. Aunque algunos autores lo incluyen, es probable que sea mejor no incluirlo, ya que si Javascript está desactivado no podríamos escribir nada en el input.
<script type="text/javascript"> $(document).ready(function() { $("#datepicker").datepicker(); }); </script>
Siendo en este caso “#datapicker” el id del input del formulario al que aplicamos el calendario:
<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
Como veréis le hemos añadido el atributo readonly para que no pueda ser modificado el contenido del input por el usuario, es decir, que se quede la fecha elegida sin poder alterarla manualmente. Aunque algunos autores lo incluyen, es probable que sea mejor no incluirlo, ya que si Javascript está desactivado no podríamos escribir nada en el input.
Siento ser tan repetitivo, mi falta de conocimiento es evidente. He puesto el script en mi código fuente y le he añadido un formulario de inserción de registros. Bien, la función de calendario si que sale en el campo de la demo, que se llama "datepicker". Bien, pues yo tengo un campo que se llama "Data" del formulario "form1". Este es mi código:
<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="../Connections/IBE.asp" -->
<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If
' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
' IIf implementation
Function MM_IIf(condition, ifTrue, ifFalse)
If condition = "" Then
MM_IIf = ifFalse
Else
MM_IIf = ifTrue
End If
End Function
%>
<%
If (CStr(Request("MM_insert")) = "form1") Then
If (Not MM_abortEdit) Then
' execute the insert
Dim MM_editCmd
Set MM_editCmd = Server.CreateObject ("ADODB.Command")
MM_editCmd.ActiveConnection = MM_IBE_STRING
MM_editCmd.CommandText = "INSERT INTO dbo.AUDITOR (AUDITOR, [DATA], [HORA INICI], FINALITZADA, OBSERVACIONS, [INSTAL·LACIÓ], [HORA FINAL], ID) VALUES (?, ?, ?, ?, ?, ?, ?, ?)"
MM_editCmd.Prepared = true
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param1", 201, 1, -1, Request.Form("AUDITOR")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param2", 135, 1, -1, MM_IIF(Request.Form("DATA"), Request.Form("DATA"), null)) ' adDBTimeStamp
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param3", 135, 1, -1, MM_IIF(Request.Form("HORA_INICI"), Request.Form("HORA_INICI"), null)) ' adDBTimeStamp
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param4", 5, 1, -1, MM_IIF(Request.Form("FINALITZADA"), 1, 0)) ' adDouble
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param5", 202, 1, 50, Request.Form("OBSERVACIONS")) ' adVarWChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param6", 202, 1, 50, Request.Form("INSTALLACI")) ' adVarWChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param7", 135, 1, -1, MM_IIF(Request.Form("HORA_FINAL"), Request.Form("HORA_FINAL"), null)) ' adDBTimeStamp
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param8", 5, 1, -1, MM_IIF(Request.Form("ID"), Request.Form("ID"), null)) ' adDouble
MM_editCmd.Execute
MM_editCmd.ActiveConnection.Close
End If
End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Uso de jQuery Data Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="Demo de jQuery Data Picker" />
<meta name="description" content="Demo de jQuery Data Picker" />
<meta name="keywords" content="Demo, calendario, Data Picker" />
<meta name="author" content="Emenia" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
'Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<div id="cabecera">
<div id="contenido-cabecera">
<div align="right"><img src="../imatges/GRECCAT positiu català.jpg" width="306" height="60" /></div>
<div align="left"></div>
</div>
<div align="left"><img src="../imatges/IBE_1.JPG" width="312" height="100" align="absmiddle" /></div>
</div>
<div id="contenido-demo">
<form action="">
<label> Seleccionar Fecha:</label>
<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
</form>
</div>
<p> </p>
<p> </p>
<p> </p>
<form action="<%=MM_editAction%>" method="post" name="form1" id="form1">
<table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">AUDITOR:</td>
<td><input type="text" name="AUDITOR" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">DATA:</td>
<td><input type="text" name="DATA" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">HORA INICI:</td>
<td><input type="text" name="HORA_INICI" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">FINALITZADA:</td>
<td><input type="checkbox" name="FINALITZADA" value="1" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">OBSERVACIONS:</td>
<td><input type="text" name="OBSERVACIONS" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">INSTAL·LACIÓ:</td>
<td><input type="text" name="INSTALLACI" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">HORA FINAL:</td>
<td><input type="text" name="HORA_FINAL" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">ID:</td>
<td><input type="text" name="ID" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td><input type="submit" value="Insertar registro" /></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<p> </p>
</body>
</html>
<script type="text/javascript"> $(document).ready(function() { $("#data").data(); }); </script> <input type="text" name="data" id="data" readonly="readonly" size="12" />
Gracias por tu atención.
<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="../Connections/IBE.asp" -->
<%
Dim MM_editAction
MM_editAction = CStr(Request.ServerVariables("SCRIPT_NAME"))
If (Request.QueryString <> "") Then
MM_editAction = MM_editAction & "?" & Server.HTMLEncode(Request.QueryString)
End If
' boolean to abort record edit
Dim MM_abortEdit
MM_abortEdit = false
%>
<%
' IIf implementation
Function MM_IIf(condition, ifTrue, ifFalse)
If condition = "" Then
MM_IIf = ifFalse
Else
MM_IIf = ifTrue
End If
End Function
%>
<%
If (CStr(Request("MM_insert")) = "form1") Then
If (Not MM_abortEdit) Then
' execute the insert
Dim MM_editCmd
Set MM_editCmd = Server.CreateObject ("ADODB.Command")
MM_editCmd.ActiveConnection = MM_IBE_STRING
MM_editCmd.CommandText = "INSERT INTO dbo.AUDITOR (AUDITOR, [DATA], [HORA INICI], FINALITZADA, OBSERVACIONS, [INSTAL·LACIÓ], [HORA FINAL], ID) VALUES (?, ?, ?, ?, ?, ?, ?, ?)"
MM_editCmd.Prepared = true
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param1", 201, 1, -1, Request.Form("AUDITOR")) ' adLongVarChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param2", 135, 1, -1, MM_IIF(Request.Form("DATA"), Request.Form("DATA"), null)) ' adDBTimeStamp
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param3", 135, 1, -1, MM_IIF(Request.Form("HORA_INICI"), Request.Form("HORA_INICI"), null)) ' adDBTimeStamp
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param4", 5, 1, -1, MM_IIF(Request.Form("FINALITZADA"), 1, 0)) ' adDouble
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param5", 202, 1, 50, Request.Form("OBSERVACIONS")) ' adVarWChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param6", 202, 1, 50, Request.Form("INSTALLACI")) ' adVarWChar
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param7", 135, 1, -1, MM_IIF(Request.Form("HORA_FINAL"), Request.Form("HORA_FINAL"), null)) ' adDBTimeStamp
MM_editCmd.Parameters.Append MM_editCmd.CreateParameter("param8", 5, 1, -1, MM_IIF(Request.Form("ID"), Request.Form("ID"), null)) ' adDouble
MM_editCmd.Execute
MM_editCmd.ActiveConnection.Close
End If
End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Uso de jQuery Data Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="Demo de jQuery Data Picker" />
<meta name="description" content="Demo de jQuery Data Picker" />
<meta name="keywords" content="Demo, calendario, Data Picker" />
<meta name="author" content="Emenia" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.datepicker.regional['es'] = {
closeText: 'Cerrar',
prevText: '<Ant',
nextText: 'Sig>',
currentText: 'Hoy',
monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
'Jul','Ago','Sep','Oct','Nov','Dic'],
dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);
});
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<div id="cabecera">
<div id="contenido-cabecera">
<div align="right"><img src="../imatges/GRECCAT positiu català.jpg" width="306" height="60" /></div>
<div align="left"></div>
</div>
<div align="left"><img src="../imatges/IBE_1.JPG" width="312" height="100" align="absmiddle" /></div>
</div>
<div id="contenido-demo">
<form action="">
<label> Seleccionar Fecha:</label>
<input type="text" name="datepicker" id="datepicker" readonly="readonly" size="12" />
</form>
</div>
<p> </p>
<p> </p>
<p> </p>
<form action="<%=MM_editAction%>" method="post" name="form1" id="form1">
<table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">AUDITOR:</td>
<td><input type="text" name="AUDITOR" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">DATA:</td>
<td><input type="text" name="DATA" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">HORA INICI:</td>
<td><input type="text" name="HORA_INICI" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">FINALITZADA:</td>
<td><input type="checkbox" name="FINALITZADA" value="1" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">OBSERVACIONS:</td>
<td><input type="text" name="OBSERVACIONS" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">INSTAL·LACIÓ:</td>
<td><input type="text" name="INSTALLACI" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">HORA FINAL:</td>
<td><input type="text" name="HORA_FINAL" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right">ID:</td>
<td><input type="text" name="ID" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td><input type="submit" value="Insertar registro" /></td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form1" />
</form>
<p> </p>
</body>
</html>
<script type="text/javascript"> $(document).ready(function() { $("#data").data(); }); </script> <input type="text" name="data" id="data" readonly="readonly" size="12" />
Gracias por tu atención.
- Compartir respuesta
- Anónimo
ahora mismo