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/
Related
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 am trying to trigger an event when an input textbox changed:
$('.packeta-selector-branch-id').on('change', function () { alert('helo'); })
This works only If I manually type something in the textbox, but in my case where an external javascript is setting the textbox value, not working.
I created a little jsfiddle to show this:
https://jsfiddle.net/6vnuqxa0/
To try out:
Click on Choose pickup point
Select something from list and click on "Choose this pick up point".
Any ideas how to resolve this issue?
The selected answer to jQuery watch for domElement changes? suggests binding to the DOMSubtreeModified event. I have tried iin your fiddle and it works! The answer does mention that this event may be deprecated, but it is worth looking into.
In your case, add an id to your div so that you have:
<div id="packeta-selector-branch-id" class="packeta-selector-branch-id"></div>
Then the following code will trigger the alert when the contents of that div change.
$('#packeta-selector-branch-id').bind('DOMSubtreeModified', function(e) {
if (e.target.innerHTML.length > 0) {
alert('helo');
}
});
Otherwise, I would look at the widget itself and try and determine if it fires any events on select. If so, you could attach some behaviour to that event.
trigger('change') when click button. but a ID or name on your input would be better
$(document).off('click', '.button select-branch').on('click', '.button select-branch', function(){
$('.packeta-selector-branch-id').trigger('change');
})
I have a form and when I move on an input that contains where the user is supposed to enter a date (after clicking into it, I fire datetime picker from jQuery-UI), nothing happen.
When I click into the field, the datatime picker is fired, that's fine. But when I move onto this input by pressing the tab key, the datetime picker is not activated. How do I activate it?
I tried
$(function() {
$('body').on('blur','.date_field', function(e) {
$(this).datepicker({dateFormat: 'yy-mm-dd'}).focus();
}
});
But it doesn't work. I also tried to use keypress or keydown and comparing the key-codes, but it doesn't work neither.
How to activate the datetime by moving on an input by pressing the tab key?
EDIT:
I tried also bind with no success.
Thank you.
js at Question is missing closing ) at event handler. Initialied .datepicker() before blur event. Added tabindex="1" to input element. Actually, blur event is not needed, and would appear to recursively add focus to input element.
$(function() {
$(".date_field").datepicker({dateFormat: "yy-mm-dd"});
//$("body").on("blur",".date_field", function(e) {
// $(this).focus();
//})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
Date: <input type="text" class="date_field" tabindex="1">
I was wondering what the Bootstrap DateTimePicker used for storing the date? I want to know how I can use that object/text/whatever it may be to disable other textbox fields that I have on my web page.
I have one page setup for querying against multiple GridViews, so I don't want the user to enter information into multiple fields otherwise more than one GridView will be returned. I have gotten the other textbox fields to become disabled, including the DateTimePicker textbox fields, using the below javascript (jquery):
$("#tasknameText").keyup(function (e) {
if ($(this).val() != '') {
$("#textDate").attr('disabled', 'disabled');
$("#beginDate").attr('disabled', 'disabled'); //DateTimePicker Field
$("#endDate").attr('disabled', 'disabled'); //DateTimePicker Field2
$("#beginDate2").attr('disabled', 'disabled'); //DateTimePicker Field3
$("#endDate2").attr('disabled', 'disabled'); //DateTimePicker Field4
} else {
$("#tasknameText").removeAttr('disabled');
$("#textDate").removeAttr('disabled');
$("#beginDate").removeAttr('disabled');
$("#endDate").removeAttr('disabled');
$("#beginDate2").removeAttr('disabled');
$("#endDate2").removeAttr('disabled');
}
});
The above code represents four DateTimePicker fields, or two pairs of Start Date and End Date fields. It works to disable all the other textboxs on the page when I use keyup on a regular textbox. However, keyup only works when the user manually enters a date into the DateTimePicker fields - I need it to work when the user clicks the glyphicon icon and the date is automatically populated as well.
Found a way to make it work - instead of using keyup, i just called all the events in the same line and that seemed disabled the other text fields. Would still like to know which one specifically it is changing on...
$("#beginDate").bind("blur focus focusin focusout load resize scroll unload click" + " dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function (e) {
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;
});