Date / Time Field shows Date only in Read-Only mode on Edit Form (non en-us sites)

[Aticus23]

Hello (again),
currently I use your solution within an application to manage time slots.
Those time slots will be setup by Application Owner and users can enter their First-, Last-Name and ID to make a reservation for this time slot.
Especially I do not want user to manipulate the start and end time, so I just marked those fields to be read-only in edit form.
My issue is, that the time is not displayed, but the date, only. I placed my field within a Tabs Container, but also tried the Default and Col Container, with no luck.
Have you faced this issue before?

The Dom Model for the value is
<td class="ms-formbody"><span id="readOnly_x0045_nd1">14.12.2017</span></td>
However the Javascript Listdata holds Date and Time.

Also tried to switch between "Friendly" and "normal" display within the field settings. Didn't make a difference and I kept the normal version.

My environment for this application is SP Online within O365.

Any advice?

Best regards
Michael

[mcsheaj]

Hi Michael,

I haven't seen this before. In general, SPEasyForms does not pull any data from the server. When you mark a field read only, it just pulls the value from the editable field, inserts it as a read only value, and then and then hides the editable field. So if the field is a datetime and the time is there, it will show the time, if it's not it will not.

When you say you marked the fields read-only in the edit form, did you do that in SPEasyForms?

Joe

[Aticus23]

Hello Joe,
thanks for your immediate reply!
Yes I marked it read only using conditional visibility of SPEasyForms.
The related code is
"visibility": { "def": { "Start1": [ { "state": "ReadOnly", "forms": "New;Edit;Display", "appliesTo": "", "conditions": [] } ], "_x0045_nd1": [ { "state": "ReadOnly", "forms": "New;Edit;Display", "appliesTo": "", "conditions": [] } ], "Where": [ { "state": "ReadOnly", "forms": "New;Edit;Display", "appliesTo": "", "conditions": [] } ] }

The Dispform does show Date & Time correctly, with the same configuration.

If I switch the rule from "Read-Only" to e.g. "Highlight in Red" it also works in edit form, and the Time controls show up.

I wonder, when transformation starts, what fields are selected as there are 4 tds: First for the date, Second for the Calendar picker control, third for hour input implemented as selction, fourth for minutes input also as selection.

Hope this additional info helps!

Best Regards
Michael

[mcsheaj]

Hi Michael,

I cannot reproduce this on my O365 tenant, but now that I've seen your screenshot it is clearly a language/culture specific issue. Can you send me the DOM for the TD containing the original DateTime field, so I can compare with what I'm seeing.

To get the time, I'm querying the row for select elements like:

var selects = tr.row.find("select");

and expecting there to be exactly 2 of them. The value of the first one I expect to be the hour in the format "1 AM", so I further parse this to get the hour and the AM/PM (clearly herein lies the problem). If any of this doesn't work I skip the time because I don't know how to parse it.

None of this is ideal. Ideally I'd use some third part tool like moment.js to deal with DateTime localization, but the problem here is one that moment.js won't help with. So on my en-us tenant, I have 3 controls with values:

$DateTimeFieldDate=8/31/2017
$DateTimeFieldDateHours=1 AM
$DateTimeFieldDateHours=30

And I need to turn these 3 values into a useful date before I can even pass it to something like moment.js. I can't just concat them for instance, since '8/31/2017 1 AM 30' is not a valid date time. So I have to parse the second value in order to get useful information out of the date. In your case you have:

$DateTimeFieldDate=14.12.17
$DateTimeFieldDateHours=12:
$DateTimeFieldDateHours=30

And I fail to parse the hours because there is no space followed by AM/PM (which makes sense because I assume your localized time uses 24 hour notation), so I skip the time. I don't want to risk crashing the page by trying to parse something I clearly don't understand, and I have no idea how many variations there might be throughout the SharePoint-using world. The controls here are localized, but in a Microsoft-specific way; no third part date library is going to understand those controls.

It should be easy enough for me to fix. In order to fix it, I need to confirm that the DOM is the same in your localized time (it probably is), and I need to know what '1:30 AM' and '1:30 PM' look like in your localized time; I assume that's '1:30' or '13:30'? The simplest solution would be if I don't see AM or PM to assume 24 hour notation. That would fix it for most of Europe and I'm sure a bunch of other countries as well.

Thanks,
Joe

[Aticus23]

Hello Joe,
indeed we have 24 hour notation in place. And as long as the site regional setting "Locale" is set to Germany, the time format dropdown is set to "24 Hour" and greyed out.
However the DOM-Model of this selector show exactly two options "12 Hour" and "24 Hour", so your approach to assume it must be either 12 or 24 format you work, I guess.
This is our Time Format selector:

<td width="99%" class="ms-authoringcontrols">
	<select name="ctl00$PlaceHolderMain$ctl10$ctl01$DdlTimeFormat" disabled="disabled" class="aspNetDisabled" id="ctl00_PlaceHolderMain_ctl10_ctl01_DdlTimeFormat">
		<option value="0">12 Hour</option>
		<option selected="selected" value="1">24 Hour</option>
	</select>
</td>

And here is our Datepicker in an editform, before SPEasyForms-Magic starts:

<table id="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldTopTable" border="0" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td class="ms-dtinput">
				<label style="display: none;" for="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDate">Start1 Date</label>
				<input title="Start" disabled="" class="ms-input" id="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDate" type="text" maxlength="45" value="28.09.2017" autopostback="0">
				</td>
				<td class="ms-dtinput">
					<a onclick="clickDatePicker('Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDate', '/sites/employeephoto/_layouts/15/iframe.aspx?cal=1&amp;lcid=1031&amp;langid=1033&amp;tz=01:59:59.9994256&amp;ww=0111110&amp;fdow=1&amp;fwoy=2&amp;hj=0&amp;swn=false&amp;minjday=109207&amp;maxjday=2666269&amp;date=', '28.09.2017', event); return false;" href="#">
						<img id="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDateDatePickerImage" alt="Select a date from the calendar." src="/_layouts/15/images/calendar_25.gif?rev=44" border="0">
						</a>
					</td>
					<td>
						<iframe title="Select a date from the calendar." id="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=44" frameborder="0" scrolling="no" style="width: 200px; display: none; position: absolute; z-index: 101;"/>
					</td>
					<td disabled="" class="ms-dttimeinput" nowrap="nowrap">
						<label class="ms-accessible" for="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDateHours">Start Hours</label>
						<select id="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDateHours">
							<option value="0">00:</option>
							<option value="1">01:</option>
							<option value="2">02:</option>
							<option value="3">03:</option>
							<option value="4">04:</option>
							<option value="5">05:</option>
							<option value="6">06:</option>
							<option value="7">07:</option>
							<option value="8">08:</option>
							<option selected="selected" value="9">09:</option>
							<option value="10">10:</option>
							<option value="11">11:</option>
							<option value="12">12:</option>
							<option value="13">13:</option>
							<option value="14">14:</option>
							<option value="15">15:</option>
							<option value="16">16:</option>
							<option value="17">17:</option>
							<option value="18">18:</option>
							<option value="19">19:</option>
							<option value="20">20:</option>
							<option value="21">21:</option>
							<option value="22">22:</option>
							<option value="23">23:</option>
						</select>&nbsp;<label class="ms-accessible" for="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDateMinutes">Start Minutes</label>
						<select id="Start1_e1ccc7f8-1995-4d65-8367-cb40258b2486_$DateTimeFieldDateMinutes">
							<option value="00">00</option>
							<option value="05">05</option>
							<option value="10">10</option>
							<option value="15">15</option>
							<option value="20">20</option>
							<option value="25">25</option>
							<option value="30">30</option>
							<option value="35">35</option>
							<option selected="selected" value="40">40</option>
							<option value="45">45</option>
							<option value="50">50</option>
							<option value="55">55</option>
						</select>
					</td>
				</tr>
			</tbody>
		</table>

Please note: You might notice some "Disabled" properties, that you can ignore. They get inserted by some jquery to workaround my current issue.

Best Regards
Michael

[mcsheaj]

Fix has been released in v2018.01 which can be found at http://speasyforms.intellipointsol.com/