I have an HTML and javascript form whose main functionality is to store information (text) in a SharePoint Online (Office 365) list ; as well as updating the information taking as a parameter the ID sent byQueryString
.
The HTML form has 4 inputs pre-loaded with the DatePicker API offered by JQuery.
The problem is encountered when (when selecting the input named "Date #4"), that input which has the DatePicker does not set the date found in the input . When applying the sample code in the code-snippet offered by Stack Overflow in Spanish, it seems that this same situation happens with the available Date #1 and Date #3 inputs . 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 doesn't happen with the other three inputs.
I can't find any similar/duplicate information on this particular situation.
Is there a way to make all DatePickers work the same way?
1 I have checked in the following browsers:
- Google Chrome version 47.0.2526.111 source
- internet explorer 11
- Mozilla Firefox version 3.31
Update: Date format must be set yyyy-mm-dd
to save to SharePoint list only accepts this format. I don't think that this is the cause , although I could be wrong , since, when 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 removing it, the dates in the input Date #3 or any of the other inputs are not set to the value indicated in input .
The problem is that we interpret the date as "dd/mm/yyyy", but datepicker (or the browser by localization?) interprets it as "mm/dd/yyyy" and that causes everything. For example: the date "08/15/2010" we read as August 15; but datepicker thinks it's the 8th day of the 15th month, which doesn't exist, and that's why it shows you today's date.
To fix it, update the values in the inputs and you're done.
The problem is clear has to do with the culture applied in javascript
To fix it you should implement: globalize
With this you could define the culture that javascript will apply to the site
You will see in the link under the title
Getting Started
how a change of culture is proposed to define the format of the dateThat example makes it more than clear how to apply the culture and this surely affects the jquery controls.