We Keep Coding

rome.js knowing when the user is finished

I am using rome.js for a date picker. When the user is finished enter the date, I need the date picker to go away and be replaced on the page by text showing the date. The problem is, I'm not sure how to tell when the user is done picking the date. I don't really want to have to add another control for them to put away the date picker, but would like to infer this from the user's actions.
One thought I had was to look for the hide event - when coupled with autoHideOnClick and autoHideOnBlur I thought I could tell that the user had entered a new date and was done. However, what I find is that I immediately get this event as soon as the picker is created - even if the input element has focus when I create the picker, the picker doesn't pop up immediately. In addition, the hide event sometimes happens even when the user is still enter the date, such as if they enter the date and then want to still enter the time manually.
I had similar issues with the blur event on the input element I create - for instance it fires when the picker is opened.
How am I supposed to know when the user has finished enter the date/time?

I think you could add a keydown event handler to the date input and on each keydown stroke, validate the date and if it's valid one change the display property of the date-picker (class name is rd-container) to "none".
Here is the pseudo code. I verfied on https://www.cssscript.com/demo/highly-customizable-date-and-time-picker-with-rome-js/
dateInput.onkeydown = function () {
if(dateInput.text is valid) { //validate the date here.
$(".rd-container").css("display","none");
}
}
you can use the same function to detect if user "pastes" date text into your input element by listening to "onpaste" event.
dateInput.onpaste = function () {
if(dateInput.text is valid) { //validate the date here.
$(".rd-container").css("display","none");
}
}

html input type date calls javascript function before i select date in Iphone

I am making a spring boot application and working with HTML to update my view. Here I am trying to implement native datepicker using input type date in a html form where user will select date and then the page will refresh and submit form with selected date as url parameter.
The textbox in the form will also display the value selected in datepicker in the format I require after page refresh.
Its made in such a way that there should not be submit button to submit form and once the user selects date from input field, the page should automatically refresh and save value in url parameter as well as in text box in form.
below is my code:
HTML:
<form action="#" id="myForm" method="get">
<input type="text" id="save-date" name="show_date" class="form-control">
<input type="date" onchange="changeDateFormat()" name="date" class="form-control"></input>
</form>
Javascript:
<script type="text/javascript">
function changeDateFormat(){
var received_date = document.getElementById("date-input").value;
var split_dashes = received_date.split('-');
var final_date = split_dashes[2]+'.'+split_dashes[1]+'.'+split_dashes[0]
document.getElementById("show_date").value = final_date;
document.getElementById("myForm").submit();
}
</script>
My Problem
This works great on all the platforms except ios/iphone 8. On ios/iphone 8 as soon as i click input type date field, datepicker immediately opens and quickly refreshes the page. I expect it to wait for my input but it doesn't allow me. instead it quickly invokes js function and refreshes the page.
i dont face this in chrome or any other browser. In chrome datepicker will open as calendar and it will wait for me to select date.
What I tried
I tried whole night and half of my today to understand why it happens. It seems in ios datepicker it quickly selects date as soon as i click to open dropdown picker. Apart from that i tried implementing jquery function but it works the same way. I also tried onselect, oninput but nothing works.
I am beginner in javascript and this is making me go crazy from last night. I am very close to get it working but feels yet so far away.
My Approach
One approach to tackle this problem is on carefully observing datepicker in iphone i found out that it immediately selects date as soon as i open datepicker in the phone, and maybe that's why it invokes javascript function.
However if it can wait for me to select the date until i press "Done"(its there in iphones) in datepicker, this problem can be eliminated
Please guide me to how i can solve this

For anyone who also have same problem in the future. Just try firing function with onblur event instead of onchange. onchange doesnt work here because in iphone the field gets updated as soon as you try to move the datepicker spinner to select dates. So with onblur it waits until the user intentionally closes the datepicker only then function is invoked.
Thanks.

Timepicker (trentrichardson) - how to trigger hour dropdown?

I'm using trentrichardson's jQuery timepicker (https://github.com/trentrichardson/jQuery-Timepicker-Addon)
If a user clicks on a relevant time input field, currently the timepicker module will pop up. I'd like the hour dropdown ('select' input) within this module to automatically be activated, i.e. so that the user only has to click once on the time input field to see the hour options, rather than having to click twice: once on the time input field, then once on the hour select input.
I have multiple time input fields on the page if that's relevant
Is this possible? If so, how?
Thanks a lot

Jquery. Detect changes on input type 'date'

on the mobile version of my site I am using input type=date instead of a jquery datepicker to allow for use of the devices inbuilt datepicker as it's generally much quicker and easier to use.
I am trying to detect when 1 date field has a value inputted/changed, to then update the min date attribute of a second datefield, and , submit the form using ajax.
I cannot correctly detect the input or change.
$('#mob-gig-date-gteq').blur(function() {
var date = $("#mob-gig-date-gteq").val();
console.log(date)
$(this).closest("form").submit();
});
(Using .change yields the same results)
If I select a date here nothing happens. On the computer if I select a date, press enter on one of the inputs (day/month/year) and THEN change the date again, the code fires.
On mobile nothing happens at all.
How can I detect the input change on a date field?
Thanks.

Try the jquery .change method. Blur will only fire when the input loses focus.
$('#mob-gig-date-gteq').change(function() {
var date = $(this).val();
console.log(date, 'change')
});
Code pen tested in chrome

Clientside validation of a textbox

I have an asp.net control textbox, clicking on which a jquery timepicker appears and user can select any time.But I want to validate the selected time so that it is one hour greater than the current time in the client side. I mean when textbox value will be changed it should be validated. Can anyone help me how to do this?

The input that the client's selection goes into will have an id. Do
$('#that_id').change(function() {
Validation Code/////
})