I want to show a date picker when the user gets to a certain input on a form. The datepicker should display if the user simply tabs into the field.
I tried something like this (I'm using Zebra_DatePicker by the way):
var datepicker = $('#date-picker-input').data('Zebra_DatePicker')
$('#date-picker-input').focus(function(){
datepicker.show()
})
That works - tabbing into the field shows the datepicker. However, this breaks the functionality if the user decides to click on the input field in question; when this happens, the click initially opens the datepicker, and then the focus callback function closes it. The result is a split-second flicker where the datepicker is shown then closes instantly.
How can I get functionality for both clickers and tabbers?
The problem is that data('Zebra_DatePicker') returns a reference to the date-picker component and not to the element itself so your focus event binding is performed on the wrong object.
Try this:
$('#date-picker-input').on('focus click', function(e) {
e.stopImmediatePropagation();
$(this).data('Zebra_DatePicker').show();
})
The plugin does not support what you are asking nor does it offer many hooks, so the workaround will be a bit hacky..
If you are working with a single datepicker in the page do
on initialization of plugin
$('#date-picker-input').Zebra_DatePicker({
// what options you already use
// and then add
onSelect: function () {
var datepicker = $(this).data('Zebra_DatePicker');
setTimeout(function () {
datepicker.hide();
}, 1);
}
});
and then add
$('#date-picker-input').off('click').on('focus', function(){
var datepicker = $(this).data('Zebra_DatePicker');
datepicker.show();
return false;
});
Related
I have a date picker but When I clicked date picker input and if I didn't choise any date then when I go outside the input, date picker window is not close. Also this problem just is there in IE.
My code is below;
#Html.TextBox("Birthdate", null, new { #class = "form-control date-picker input-mask-date", placeholder = "Doğum Tarihi", required = true, id = "dtBirthDate" })
Script side;
$(".input-mask-date").mask("99.99.9999");
if I didn't choise any date then when I go outside the input, date picker window is not close.
As you mentioned this is an issue with IE. However, you can add a custom function to check when one leaves or clicks outside the datepicker to hide it.
$('.date-picker').on('blur', function() {
$('.date-picker').unmask();
});
You can equally use focusOut for the event listener and also fadeOut / slideUp if they work on date pickers.
So as mentioned by #caglarboran, the right method to call is unmask rather than hide. Edited the answer.
I solved this problem like that;
$('#dtBirthDate').on('focus', function () {
$(this).mask("99.99.9999");
});
$("#dtBirthDate").focusout(function () {
$(this).unmask();
});
I have almost 15 text fields in my form. Every select call binding next select picker. I want to blur (unfocus) on the select picker input text field after using the toggle.
$('#drpSubModels').selectpicker("refresh");
$('#drpSubModels').selectpicker('toggle');
I'm trying for this as like that;
setTimeout(function () {
$(".form-control").blur()
}, 1000);
But mostly, it didn't work. If I set the setTimeout value under 1000, it never works.
(Meanwhile, setTimeout is not a good solution because I'll use this form in a mobile app as Hybrid. When I use the toggle, every time calls the keyboard and If the blur is work, keyboard immediately showing and disappearing on the screen, If setTimeout not working, the keyboard appearing permanently)
onload, ontoggle etc. no any chance..
$('.selectpicker').on('onload', function () {
$(".form-control").blur();
});
Is there a method or way to blur the select picker input text after using the toggle?
Libraries;
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js
thanks.
It solved when I handled the focus event.
$(document).ready(function () {
var blurState = false;
$('.bs-searchbox .form-control').on('focus', function () {
if (!blurState) {
$(this).blur();
blurState = true;
}
});
$('.selectpicker').on('hide.bs.select', function () {
blurState = false;
});
});
I'm using a bootstrap datepicker and jQuery validate. I have jquery validate set to focus on the input when the field is empty & required.
With bootstrap datepicker however, the focus event causes the calendar to open. Which is not ideal in my situation. I'm wondering if there is a way to focus, but pass through a preventDefault or something like that?
I made a jsfiddle. Basically, is it possible to click the button to focus on the element, but not have the calendar open? https://jsfiddle.net/a2gkpxuh/ The primary purpose of the focus is to scroll the page so the user can see the required element.
$("#myButton").click(function () {
//Some code to prevent default here? Possibly disable datepicker before .focus event
$("#myDatePicker").focus();
});
I guess one possible solution would be to disable the datepicker, then do my jQuery.validate(), then re-enable the datepicker. I feel like there's a better way though...
FYI Here is a similar question: Set focus on Jquery datepicker on datepicker close, without opening datepicker
You could just hide the datepicker after the focus:
$("#myButton").click(function () {
$("#myDatePicker").focus();
$("#myDatePicker").datepicker('hide');
});
Just an add to Maxwell_Orr that will prevent the user from popping the datepicker.
you could do something like this:
$('.default-date-picker').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
$("#myButton").click(function () {
$("#myDatePicker").focus();
$("#myDatePicker").datepicker('hide');
});
$("#myDatePicker").click(function () {
$("#myDatePicker").focus();
});
I'm using dojo's DateTextBox with a connected onChange event.
There are cases users select the same day as already selected, which unfortunately (but of course logically) doesn't fire an onChange event. But I still need to trigger the onChange-connected actions regardless of whether the user selected the same value again or did not.
Is there any way to connect events to single/all DateTextBox days bypassing the onChange event of the box? I think the days aren't widgets themselves. An even better option would be some kind of onSelect event for DateTextBox, which apparently doesn't exist...
You need to connect to onChange event on popup calendar, not DateTextBox. The problem is that every time you open calendar DateTextBox destroys previously shown instance and creates new instance of dijit.Calendar (referenced in DateTextBox.dropDown property).
So you need to connect to DateTextBox.openDropDown() method to create connect to DateTextBox.dropDown.onChange(), i.e. Calendar.onChange():
var dateBox = dijit.byId("dateBox");
var eventHandle;
dojo.connect(dateBox, "onChange", function(value) {
// fires only if clicked date changed
console.log('onChange');
});
dojo.connect(dateBox, "openDropDown", function() {
eventHandle = dojo.connect(dateBox.dropDown, "onChange", function(value) {
// fires every time date is clicked
console.log(value.toString());
});
});
dojo.connect(dateBox, "closeDropDown", function() {
dojo.disconnect(eventHandle);
});
See this example in action at jsFiddle.
Currently I'm using JQuery UI's datepicker range, and I've added some more javascript that should submit the form on the page when different form elements change.
This works on the drop down I've added, as well as the date picker input boxes if I enter dates manually and then click away.
However, if I click an input field for the datepicker, and the date chooser pops up, the form will not submit after choosing a date..
Its as if the input field didn't know a change occured..?
http://api.jquery.com/change/
here is the code I'm using:
$(document).ready(function() {
$('#from').change(function() {
document.myform.submit();
});
});
$(document).ready(function() {
$('#to').change(function() {
document.myform.submit();
});
});
Using the datepicker UI events, I've added the following code for testing but it isn't working.. any ideas?
$(document).ready(function() {
$('#from').datepicker({
onClose: function() { alert('Yo yo!') }
});
});
The jQuery UI DatePicker has custom events, particularly the onSelect event, click the event's tab and it's at the bottom of the docs:
http://jqueryui.com/demos/datepicker/
Double check there are no JavaScript errors above the code you quoted.
If there are errors then the JavaScript code below these errors will not execute properly.
That is probably why the code you added to test did not work either.
The correct answer is here: jQuery datepicker, onSelect won't work
I hope it should be on focus . on click of date picker the focus will be in the text box where you have to show the date.
so the event should be .focus()
http://api.jquery.com/focus/
http://api.jquery.com/focusout/