Set default values for date and time selector datetime-local in H5 under TP5.1 framework

In H5, we can get a simple date-time selector that can be precise to hours and minutes by setting the type attribute of the input tag to "datetime-local", but in practice, we often need to set a default value, such as setting the selector to the current time or setting data in the editing interface. The existing timestamp data in the library cannot be set to the default value of the selector if the timestamp of TP5.1 template variable is directly converted to a date-time format assignment to value.
The following is the effect of assigning the acquired timestamp conversion format directly to the selector:

<div class="layui-form-item">
	<label for="location_min" class="layui-form-label"><span class="x-red">*</span>Start time:</label>
	<div class="layui-input-inline">
		<input type="datetime-local" name="start_time" value="{$activityInfo.start_time|date='Y-m-d H:i'}"/>
	</div>
</div>

<div class="layui-form-item">
	<label for="location_min" class="layui-form-label"><span class="x-red">*</span>Ending time:</label>
	<div class="layui-input-inline">
		<input type="datetime-local" name="end_time" value="{$activityInfo.end_time|date='Y-m-d H:i'}" />
	</div>
</div>

We found that the selector is still the default null value in the actual page if we do this.

The reason is that the format of datetime-local attribute value in H5 is "yyyy-MM-ddThh:mm:ss"
Note that there is a T in the date and time, and H5 is strictly validated, so the selector value must follow this format.
For example, if we want to set the default value to 15:30:30 seconds on August 1, 2019, we need to set the default value to be "2019-8-1T15:30:30".
The results are as follows:

<div class="layui-form-item">
	<label for="location_min" class="layui-form-label"><span class="x-red">*</span>Start time:</label>
	<div class="layui-input-inline">
		<input type="datetime-local" name="start_time" value="2019-08-01T15:30:30"/>
	</div>
</div>

<div class="layui-form-item">
	<label for="location_min" class="layui-form-label"><span class="x-red">*</span>Ending time:</label>
	<div class="layui-input-inline">
		<input type="datetime-local" name="end_time" value="2019-08-01T15:30:30" />
	 </div>
 </div>

We found that the value value in this format can set the default value of the selector properly.

Now that we know that the problem is the data format, we can solve it very well. We only need to convert the acquired timestamp into a format with T-partition in the template through a common function and assign it to value.
First, open the common.php file in the application of TP5.1 project, and then write the format conversion function we need.

function dateTimeValue($timeStamp)
{
    $date = date('Y-m-d',$timeStamp);
    $time = date('H:i:s',$timeStamp);
    return $date.'T'.$time;
}

It only needs to convert the timestamp into two parts: date and time separately, and then stitch a T to form a value that meets the format requirements. After writing the common function, it only needs to be called in the template.

<div class="layui-form-item">
	<label for="location_min" class="layui-form-label"><span class="x-red">*</span>start time</label>
	<div class="layui-input-inline">
		<input type="datetime-local" name="start_time" value="{$activityInfo.start_time|dateTimeValue}"/>
	</div>
</div>

<div class="layui-form-item">
	<label for="location_min" class="layui-form-label"><span class="x-red">*</span>Ending time</label>
	<div class="layui-input-inline">
		<input type="datetime-local" name="end_time" value="{$activityInfo.end_time|dateTimeValue}"/>
	</div>
</div>

This time we see that the default values have been correctly assigned to the selector and can be displayed as normal:

Keywords: Attribute PHP

Added by esscher on Fri, 02 Aug 2019 10:39:33 +0300