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");
}
}
Related
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
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
I'm using the dhtmlx calendar to select the date and time. But there's a problem when it comes to selecting the time, the user has to select the date again to 'confirm' the change in time. This is not a normal user behaviour. Is there any way to change the input field straight away when the user selects the time?
There's a onTimeChange method and onChange method but I can't seem to put the changed time into the input field.
Please, try to use the following code:
myCalendar.attachEvent("onTimeChange", function(d){
myCalendar.setDate(d);
myCalendar._updateInp();
});
I have two datepicker inputs and I'm trying to automatically open the second one after a date is selected in the first. As of now, the datebox opens and then promptly closes. I can do it just fine outside of my knockout.js viewmodel without the datebox closing, but the problem is I want the second datebox to open only if the first one has a valid date.
This works just fine outside of my viewmodel, as I mentioned above, however it doesn't account for any errors with the start date.
$("#start_date_input").datepicker('option',"onClose", function() {
$( "#start_date_input" ).datepicker( "show" );
});
This is where I'd like the second datepicker to be triggered
self.startDate.subscribe(function(){
var startDateErrors = ko.validation.group(self.startDateValidation);
var endDateErrors = ko.validation.group(self.endDateValidation);
if(startDateErrors().length == 0 && endDateErrors().length == 0){
populateList();
}
else if(startDateErrors().length == 0){ //if a valid start date is selected, show the end date
$("#end_date_input").datepicker("show");
}
});
As soon as I select a start date, the end date picker shows and immediately disappears. The cursor is still in the end date input box and flashing. Any idea what is causing it to close?
I tried adding $("end_date_input").datepicker({autoclose: false}); but that didn't do anything.
Don't reach around the viewmodel and fiddle with the DOM directly. You need a custom binding handler for datepicker. There is one here that seems pretty popular. That by itself probably won't solve your problem, but it will put you in a better place to be in control of what's going on.
I suspect (but don't know) that having a hasFocus binding on the associated input field will show the datepicker properly.
I have discovered a scenario in an app I'm working on that is replicated on the jQuery site. For example, if you go here and enter a string of integers (e.g. "12345678") and hit enter, you'll see that the current date then fills the input. If you then retype another string of numbers and hit enter again, your typed string remains.
In my application I need whatever numbers are typed to remain after ANY enter key press. My questions are:
Why is the string overwritten with a date on the initial enter key press event?
How can this behaviour be prevented?
The Enter key will always grab the selected date and output this value to the textbox. This selected date will be the default date when it is opened. You can set the defaultDate when opening the datepicker, but it will either be a valid date or today's date. There is no way currently to open a datepicker with no defaultDate out of the box.
Normally, you can remove the selected date by setting it to null.
$('#mydate').datepicker('setDate', null);
But this won't work when the datepicker is initially opened, since it ALWAYS opens with a default/selected date.
I've come up with a fiddle showing a possible work around.
/***
Since there is ALWAYS a default date in the datepicker when it's opened,
then let's try and trigger an event after it has been opened, then set the
date to null.
***/
$('#textbox').datepicker(
{
beforeShow: function()
{
$(this).trigger('afterShow');
}
})
.bind('afterShow', function()
{
var $this = $(this);
setTimeout(function()
{
$this.datepicker('setDate', null);
}, 100);
});