Sunday, September 28, 2008

Validación de fechas en Forms

Situación
En un form de inserción de items en una lista, necesitamos validar que dos columnas con fechas sean correctamente ingresadas por el usuario (por ejemplo que EndDate no sea menor que StartDate).

Solución
Inspirado en las soluciones propuestas por Res Cogitans y por Autosponge y agregando una Content Editor Web Part oculta en la página NewForm.aspx (mediante el truco de agregar &ToolPaneView=2 al final de la URL)*, introducimos el siguiente código JavaScript:

<script type="text/javascript">
function PreSaveAction()
{

var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","StartDate");
var date2 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","EndDate");
var arrDate1 = date1.value.split("/");
var useDate1 = new Date(arrDate1[2], arrDate1[1]-1, arrDate1[0]);
var arrDate2 = date2.value.split("/");
var useDate2 = new Date(arrDate2[2], arrDate2[1]-1, arrDate2[0]);
if(useDate1 > useDate2)
{

alert("La fecha EndDate no puede ser menor que StartDate");
return false; // Cancel the item save process
}

return true; // OK to proceed with the save item
}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{
return tags[i];
}
}
return null;
}
</script>



Variante que valida que se registre una fecha futura y correspondiente a un dìa de la semana determinado, lunes en el ejemplo, dado que la función getDay() devuelve 1 para lunes, 2 para martes, ...:


<script type="text/javascript">
function PreSaveAction()
{
var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","StartDate");
var arrDate1 = date1.value.split("/");
var useDate1 = new Date(arrDate1[2], arrDate1[1]-1, arrDate1[0]);
var today = new Date();
var DiaSemana =useDate1.getDay();
if(DiaSemana != 1 || useDate1 < today)
{

alert("La fecha de inicio debe ser un Lunes futuro" + DiaSemana);
return false; // Cancel the item save process
}

return true; // OK to proceed with the save item
}

function getTagFromIdentifierAndTitle(tagName, identifier, title)
{
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++)
{
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len))
{
return tags[i];
}
}
return null;
}
</script>


* El truco que menciono es el siguiente: clickear "New Item" sobre la lista con la cual se está trabajando. Sobre el final de la URL que muestra el browser, agregar &ToolPaneView=2... Magia! aparece la posibilidad de agregar web parts a la página!

No comments: