Good Evening @All!
We have used the editable type datetime many a times. During one of the project we came across the issue of displaying the time component only showing the Opening and Closing Time Selection (can be read here).
But now with the only_time parameter we do not need to handle hiding the Month, Day, Year and Separators are described in the post above.
Just by adding only_time='1', the same (hiding the Year, Day, Month and Separator) can now be achieved. The code would be:
I recently used this in a project and was then posed with the issue that the time wont save. I specifically needed to use the input of type='time' so that, on the mobile app front-end, when the input is clicked an OS specific Time picker is presented to the user.
The issue i posed was:
Date format is invalid although I was only saving time.
Now referring to the same post (as above), one thing was evident that we need to supply a date (dummy value 1970-01-01 or other valid yet dummy date) to the field. The same was confirmed and explained to me by @KK Sir too, stating:
[quote=KK]When we set only_time='1', Couch internally substitutes the date part with a fixed value of '1970-01-01'. So, e.g., time above would show up as "1970-01-01 16:12:00".[/quote]
I was earlier trying the standard (Couch) method to pass the value to the Bound editable as:
Which was not working at all and only throwing the error of Invalid Date.
@KK Sir also mentioned, that:
[quote=KK]just use the HTML5 input and then on the server in your Couch form code, *explicitly* set the datetime using <cms:db_persist_form>[/quote]
So, in order to be able to save the time using:
1. only_time='1'
2. input type='time'
the following jQuery based approach was taken.
Step #1:
The editable was defined as:
Step #2:
The input was defined as:
Step #3:
Then the value of my_ctr_intime (type='time' region) was copied to my_ctr_intime2 (type='text' region) using the jquery:
Step #4:
And finally to save the date to the backend:
And then data was successfully saved to the backend without any issue. I would like to thank @KK Sir for his timely and step-wise guidance for the same.
This is a valid approach and can be taken by anyone who wants to work with the HTML5 input type='time'. Although, this is not the only way and can be achieved by raw PHP method also. If anyone comes across this thread and tries to solve it in another way, please do share your solution.
I hope this helps other(s) in future too.
Regards,
GXCPL
We have used the editable type datetime many a times. During one of the project we came across the issue of displaying the time component only showing the Opening and Closing Time Selection (can be read here).
But now with the only_time parameter we do not need to handle hiding the Month, Day, Year and Separators are described in the post above.
Just by adding only_time='1', the same (hiding the Year, Day, Month and Separator) can now be achieved. The code would be:
- Code: Select all
<cms:editable
name='onlytime'
label='Opening Time'
type='datetime'
only_time='1'
/>
I recently used this in a project and was then posed with the issue that the time wont save. I specifically needed to use the input of type='time' so that, on the mobile app front-end, when the input is clicked an OS specific Time picker is presented to the user.
The issue i posed was:
Date format is invalid although I was only saving time.
Now referring to the same post (as above), one thing was evident that we need to supply a date (dummy value 1970-01-01 or other valid yet dummy date) to the field. The same was confirmed and explained to me by @KK Sir too, stating:
[quote=KK]When we set only_time='1', Couch internally substitutes the date part with a fixed value of '1970-01-01'. So, e.g., time above would show up as "1970-01-01 16:12:00".[/quote]
I was earlier trying the standard (Couch) method to pass the value to the Bound editable as:
- Code: Select all
<cms:hide>
<cms:input name="ctr_intime" type="bound" />
</cms:hide>
<input name="ctr_intime" type="time" />
Which was not working at all and only throwing the error of Invalid Date.
@KK Sir also mentioned, that:
[quote=KK]just use the HTML5 input and then on the server in your Couch form code, *explicitly* set the datetime using <cms:db_persist_form>[/quote]
So, in order to be able to save the time using:
1. only_time='1'
2. input type='time'
the following jQuery based approach was taken.
Step #1:
The editable was defined as:
- Code: Select all
<cms:editable name='ctr_intime' label='In Time' type='datetime' allow_time='1' only_time='1' minute_steps='1' required='1' order="4" />
Step #2:
The input was defined as:
- Code: Select all
<input name="my_ctr_intime" id="my_onlytime" type="time" />
<cms:input name="my_ctr_intime2" id="my_onlytime2" type="text" style="display:none;" />
Step #3:
Then the value of my_ctr_intime (type='time' region) was copied to my_ctr_intime2 (type='text' region) using the jquery:
- Code: Select all
<script type="text/javascript">
$(function () {
var $src = $('#my_ctr_intime'),
$dst = $('#my_ctr_intime2');
$src.on('input', function () {
$dst.val($src.val());
});
});
</script>
Step #4:
And finally to save the date to the backend:
- Code: Select all
<cms:db_persist_form
ctr_intime="1970-01-01 <cms:show frm_my_ctr_intime2 />"
/>
And then data was successfully saved to the backend without any issue. I would like to thank @KK Sir for his timely and step-wise guidance for the same.
This is a valid approach and can be taken by anyone who wants to work with the HTML5 input type='time'. Although, this is not the only way and can be achieved by raw PHP method also. If anyone comes across this thread and tries to solve it in another way, please do share your solution.
I hope this helps other(s) in future too.
Regards,
GXCPL
