8 votes

DatePicker API component is not consistent with the selection of dates

I have a form in HTML and javascript whose main functionality is to store information (text) in a list of SharePoint Online (Office 365); as well as the updating of the information , taking as a parameter the ID sent by QueryString.

The form HTML has 4 inputs pre-loaded with the API DatePicker that offers JQuery.

The problem is when you (when you select the input with name "Date #4"), that input that has the DatePicker does not set date found in the input. When applying the sample code in the code-snippet that provides Stack Overflow in Spanish, it seems that this same situation happens with the inputs Date #1 and Date #3 available.1

This is the code using the code editor or 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>

As you can see, this does not happen with the other three inputs.

I cannot find similar information/duplicate on this particular situation.

Is there any way to make all the DatePicker work the same way?


1 I have reviewed in the following browsers:

  • Google Chrome version 47.0.2526.111 source
  • Internet Explorer 11
  • Mozilla Firefox , version 3.31

Update: You must set the format of date yyyy-mm-dd to keep it in the SharePoint list only accepts this format. I do not consider that to be the cause although I could be wrong, because, while typing the date in the field (with format dd/mm/yyyy), it is applied to the DatePicker, even, setting the format dd/mm/yyyy , or stirring, the dates in the input Date #3 or any of the other inputs are not set with the value indicated in the input.

4voto

Alvaro Montoro Points 38554

The problem is that we interpret the date as "dd/mm/yyyy", but the datepicker (or the browser for the location?) is interpreted as "mm/dd/yyyy" and that causes everything. For example: the date "15/08/2010" we read it as August 15; but datepicker thinks that it is the day 8 of the month 15, that does not exist and that shows you the date of today.

To fix this, update the values on the inputs and is already.

$(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>

1voto

Leandro Tuttini Points 25288

The problem with this of course has to do with the culture applied in javascript

To fix it you should implement: globalize

With this you could define the culture that the javascript applied to the site

You will see in the link under the title Getting Started as there is a change of culture to define the format of the date

var Globalize = require( "globalize" );

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

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

This example leaves more than clear how to apply the culture and it sure affects the controls of jquery.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X