I have a situation where only the time of day is needed to be seen in the input field. Is it possible to show only the time selector on the Datepicker?
Add Date and Time in App Structure and bind it to the input value and use format date to hh:MM
dmx-bind:value=“var1.datetime.formatDate(“hh:MM”)”
I’m needing something similar. I was using the time input type which gives me just a time picker, however the date input type and time input types aren’t working in Safari so I switched to datepicker for the date field and need a time picker only option for the time field cause the client wants them separate.
I guess a work around would be to set the format to ‘h:mm a’ and target the .calendar-table class on that particular input and display: none;
One issue I see if that the “time” validation fails with this format. 
1 Like
@revjrblack I decided to use this jquery DateTimePicker with just the Time picker for my situation.
Download the files from here. It also has the documentation.
https://xdsoft.net/jqplugins/datetimepicker/
Then add to the head tag. I put the files in the assets folder and I added right before the custom css file. It requires jQuery but if you use bootstrap js on the page then you already have it.
Then right before the ending body tag add this code or tweak for your specific needs. I wanted 12 hour time and this was the combination of format and formatTime that worked for me. If I just used formatTime it would add the date to the field even though I had datepicker set to false. The step option tells it the increments in minutes to show. Here I have 15 minute increments. Put 60 for only hours. Of course use the id of the field you want the time picker on or use a class for multiple inputs.
Here it is on my field:
1 Like
Cool let me know how it goes.
1 Like
@revjrblack not sure if you ended up using it after all but if you did and want to use it in a search field here is how I did it. Call the datetimepicker on both inputs comma separating between the ids. Then add the onSelectTime: option like below and trigger blur on the search input to cause the list to update.
<script type="text/javascript">
$( document ).ready(function() {
$('#inp_inspection_time, #search_inspection_time').datetimepicker({
datepicker:false,
step: 15,
format:'g:i a',
formatTime:'g:i a',
minTime:'08:30:00',
onSelectTime:function(ct,$i){
$('#search_inspection_time').trigger('blur');
}
});
});
</script>
Happy coding my friend!
Excellent!
I’ve had another project need immediate attention. I will let you know the outcome of your scripts as soon as I can return to that domain.
I appreciate your help however. Thank you very much for your help!
1 Like
I’m finally free to give your help an opportunity to wow the crowd. I’ve got four pages that can use this improvement.
Stay tuned.
How would I edit my input field to coincide with your script as quoted below:
My time input field:
<input name="time" type="text" required="" class="form-control text-uppercase" id="inp_time" placeholder="Enter as: 08:30 am or 14:00 pm">
------------------
[quote="TwitchBlade, post:9, topic:20925"]
<script type="text/javascript">
$( document ).ready(function() {
$('#inp_inspection_time, #search_inspection_time').datetimepicker({
datepicker:false,
step: 15,
format:'g:i a',
formatTime:'g:i a',
minTime:'08:30:00',
onSelectTime:function(ct,$i){
$('#search_inspection_time').trigger('blur');
}
});
});
</script>
[/quote]If you’re needing just that particular input, change the following in the script to initialize your input with the id=“inp_time”
$('#inp_inspection_time, #search_inspection_time').datetimepicker
To
$('#inp_time').datetimepicker
Comma separate any other inputs you want to use with those same settings as well like
$('#inp_time, #inp_time2, #inp_time3').datetimepicker
Or you can put a class like ‘timepicker-input’ on all of them and just call the class and they will all get the time picker
$('.timepicker-input').datetimepicker
Also I discovered you need to blur all of the elements that have the time picker not just the search so change this:
$('#search_inspection_time').trigger('blur');
To
$i.trigger('blur');Fantastic!
It works. I only had to set .xdsoft_datetimepicker .xdsoft_timepicker width to auto. For some reason the numbers when the time jumped to higher number the text overlapped.
- Do you know if the the range of the timeframe can be adjusted? For example, start time: 9:00 AM and end time: 5:00 PM.
- Do you know how to change the timezone? It appears that the selected time in the list is converted to another timezone when it is put in the input field. In my case, it jumps from a selected time in the central timezone to a new time in the mountain timezone (is where our domain’s server is located).
I think that would be the minTime and maxTime options.
Not sure about a timezone option I didn’t see one.
Scroll down the page for the options:
https://xdsoft.net/jqplugins/datetimepicker/
I tried the minTime, etc., but it didn’t change anything. Then I tried it again using military time and it works. It is still setting the default timezone based on where the server is located.
Thanks for the link! I’ll take a look again and see if I overlooked something.
Everything is working except the time zone offset. Until I can get back to researching, I had to fall back to a select element.
@revjrblack I think it uses the same formatting as php date() function. Check out the timezone parameters here:
https://www.w3schools.com/php/func_date_date.asp
1 Like