7

Tengo un formulario en HTML y javascript cuya funcionalidad principal es almacenar información (texto) en una lista de SharePoint Online (Office 365); así como la actualización de la información tomando como parámetro el ID enviado por QueryString.

El formulario en HTML cuenta con 4 inputs pre-cargados con la API DatePicker que ofrece JQuery.

El problema se encuentra cuando (al seleccionar el input con nombre "Fecha #4"), ese input que tiene el DatePicker no establece la fecha que se encuentra en el input. Al aplicar el código de muestra en el code-snippet que ofrece Stack Overflow en Español, parece que esta misma situación sucede con los inputs Fecha #1 y Fecha #3 disponibles.1

Este es el código usando el editor de código ó code-snippet:

$(document).ready(function() {
  /* Set datepicker to specific fields. */
  $("#txt_fecha_uno").datepicker({
    altFormat: "yyyy-mm-dd"
  });

  $("#txt_fecha_dos").datepicker({
    altFormat: "yyyy-mm-dd"
  });

  $("#txt_fecha_tres").datepicker({
    altFormat: "yyyy-mm-dd"
  });

  $("#txt_fecha_cuatro").datepicker({
    altFormat: "yyyy-mm-dd"
  });
});
.data {
  float: left;
}
.data > input {
  margin-left: 10px;
  margin-right: 10px;
}
<!-- Referencias al DatePicker -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">

<div id="customers">
  <div class="data">
    <span>Fecha #1</span>
    <input type="text" id="txt_fecha_uno" value="15/08/2010" />
  </div>
  <div class="data">
    <span>Fecha #2</span>
    <input type="text" id="txt_fecha_dos" value="08/07/2004" />
  </div>
  <div class="data">
    <span>Fecha #3</span>
    <input type="text" id="txt_fecha_tres" value="16/01/2005" />
  </div>
  <div class="data">
    <span>Fecha #4</span>
    <input type="text" id="txt_fecha_cuatro" value="06/12/2014" />
  </div>
</div>

Como pueden ver, esto no sucede con los otros tres inputs.

No encuentro información similar/duplicada sobre esta situación en particular.

¿Hay alguna manera para que todos los DatePicker funcionen de la misma manera?


1 He revisado en los siguientes navegadores:

  • Google Chrome versión 47.0.2526.111 fuente
  • Internet Explorer 11
  • Mozilla Firefox versión 3.31

Actualización: Se debe establecer el formato de fecha yyyy-mm-dd para guardarlo en la lista de SharePoint solo acepta este formato. No considero que esa sea la causa aunque puedo estar equivocado, ya que, al digitar la fecha en el campo (con formato dd/mm/yyyy), ésta se aplica al DatePicker, incluso, estableciendo el formato dd/mm/yyyy o removiéndolo, las fechas en el input Fecha #3 o cualquiera de los otros inputs no se establece con el valor indicado en el input.

11
  • Cuando seleccion el input #4 me desplega el calendario y me seleccion el 12 de June de 2014, o sea en el calendario si esta seleccionando la fecha que le indicas en el textbox. No se si sera algo del browser, estoy usando FireFox el 27 ene. 2016 a las 13:49
  • 1
    A mí me falla la fecha #1 y no la #4
    – Alvaro Montoro
    el 27 ene. 2016 a las 13:51
  • A mi me funciona bien con Chrome, cargan los datos predefinidos en todos los inputs
    – César
    el 27 ene. 2016 a las 13:51
  • @LeandroTuttini, en el archivo HTML que tengo en mi equipo usando Chrome falla el Fecha #4, pero al ver la pregunta, falla fecha #1 así como dice el comentario de Alvaro Montoro el 27 ene. 2016 a las 13:52
  • @CésarBustíos ¿me puede decir por favor la versión de su navegador de Chrome? el 27 ene. 2016 a las 13:53

2 respuestas 2

4

El problema es que nosotros interpretamos la fecha como "dd/mm/yyyy", pero datepicker (¿o el navegador por la localización?) la interpreta como "mm/dd/yyyy" y eso causa todo. Por ejemplo: la fecha "15/08/2010" la leemos como 15 de agosto; pero datepicker piensa que es el día 8 del mes 15, que no existe y por eso te muestra la fecha de hoy.

Para solucionarlo, actualiza los valores en los inputs y ya está.

$(document).ready(function() {
  /* Set datepicker to specific fields. */
  $("#txt_fecha_uno").datepicker({
    altFormat: "yyyy-mm-dd"
  });

  $("#txt_fecha_dos").datepicker({
    altFormat: "yyyy-mm-dd"
  });

  $("#txt_fecha_tres").datepicker({
    altFormat: "yyyy-mm-dd"
  });

  $("#txt_fecha_cuatro").datepicker({
    altFormat: "yyyy-mm-dd"
  });
});
.data {
  float: left;
}
.data > input {
  margin-left: 10px;
  margin-right: 10px;
}
<!-- Referencias al DatePicker -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">

<div id="customers">
  <div class="data">
    <span>Fecha #1</span>
    <input type="text" id="txt_fecha_uno" value="08/15/2010" />
  </div>
  <div class="data">
    <span>Fecha #2</span>
    <input type="text" id="txt_fecha_dos" value="07/08/2004" />
  </div>
  <div class="data">
    <span>Fecha #3</span>
    <input type="text" id="txt_fecha_tres" value="01/16/2005" />
  </div>
  <div class="data">
    <span>Fecha #4</span>
    <input type="text" id="txt_fecha_cuatro" value="12/06/2014" />
  </div>
</div>

1

El problema esta claro tiene que ver con la cultura aplicada en javascript

Para solucionarlo deberias implementar: globalize

Con este podrias definir la cultura que javascript aplicara al sitio

Veras en el link bajo el titulo Getting Started como se plantea un cambio de cultura para definir el formato de la fecha

var Globalize = require( "globalize" );

Globalize("en").formatDate(new Date());
// > "11/27/2015"

Globalize("es").formatDate(new Date());
// > "27/11/2015"

Ese ejemplo deja mas que claro como aplicar la cultura y esto seguro afecta a los controles de jquery.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.