On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.
I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?
I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.
JSFiddle: http://jsfiddle.net/kmsfpgdk/
HTML:
<input type="text" id="datepicker" name="date" />
<span id="data"></span>
JS:
$('#datepicker').datepicker();
$('#datepicker').blur(function () {
var val = $(this).val();
$('#data').text(val);
});
Its better to use built in method onSelect:fn to use:
$('#datepicker').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
Fiddle
As per documentation:
onSelect
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
change event happens before blur event.
Use .change() instead of .blur()
$('#datepicker').change(function() {
var val = $(this).val();
$('#data').text(val);
});
Updated jsFiddle Demo
If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.
Related
I'm trying to get a date directly from an HTML calendar input, with a simple console log (for testing purposes), without the need for a button.
I've tried a few variations of the code below:
<div class = "Comparisons_Wrapper">
<input type="date" class="DateSelector" id = "DateSelector" onclick="getDate()">
</div>
<script>
function getDate(){
var date = document.getElementById("DateSelector").value;
console.log(date)
}
</script>
I was hoping the onclick part of the div, would call the function on clicking the date from the calendar, but instead calls the function on immediately clicking the input box to open up the calendar, so you initially get an empty console.log the first time, and then when you click on the box again, you get the date you initially entered. I guess this assumption was naïve of me.
Any assistance would be appreciated,
Thanks
James
What you want to do in this case is to add an event listener to the input's change event.
var dateInput = document.getElementById("DateSelector");
dateInput.addEventListener('change', function(event) {
console.log(event.target.value)
});
<div class = "Comparisons_Wrapper">
<input type="date" class="DateSelector" id = "DateSelector">
</div>
Use events like onchange, as follow:
function handler(e){
alert(e.target.value);
}
<input type="date" class="DateSelector" id="DateSelector" onchange="handler(event);">
I have a simple html form with 3 inputs
<input id="dateBegin" type="text" placeholder="Begin">
<input id="dateEnd" type="text" placeholder="End">
<input id="datePrice" type="text" placeholder="Ex. : 220.00">
On the first two, I've added a datepicker
$("#dateBegin").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
$("#dateEnd").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
Now, in order to create a smooth user experience, I want to select the next input in the form after one input is filled. Specifically it means :
[The user click inside the first input (dateBegin)] -> the datepicker is displayed.
[The user select a date with the datepicker] -> dateBegin is filled with the date value, the datepicker linked to dateBegin is hidden, the next input (dateEnd) is focused and its datepicker is shown.
[The user select a date with the second datepicker] -> dateEnd is filled with the date value, the datepicker linked to dateEnd is hidden, the next input (datePrice) is focused.
In order to have this behaviour, I've added this code to my page
$('#dateEnd').change(function(){
$("#datePrice").focus();
});
$('#dateBegin').change(function(){
$("#dateEnd").focus();
$("#dateEnd").datepicker("show"); // This line can be removed it doesn't change anything but I've tried it :p
});
My problem is at step 2). The datepicker linked to dateEnd appear briefly before disappearing. It may not be clear so here is a JSFiddle reproducing it.
I can't figure out why the datepicker linked to dateEnd disappear ?
But, more importantly, how could I achieve the desired behaviour ?
Try this
$('#dateBegin').change(function(){
setTimeout(function (){
$("#dateEnd").focus();
}, 1);
});
I think what is happening is that after setting focus to the next text box the calendar still thinks it needs to close. by delaying the focus change you change focus after the jQuery UI has responded to the click.
I have this timepicker plugin from https://github.com/jonthornton/jquery-timepicker and I want to get the calculated time and put it in a input field. Any help?
See http://postimg.org/image/4m78gqdmx/ for image reference.
How to get the calculated time?
You can use .val() to get the time.
There is an "Event Example" at their page that should help
http://jonthornton.github.io/jquery-timepicker/
$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
$('#onselectTarget').text($(this).val());
});
Where $('#onselectTarget') could be anything from a <div> or a <span> to an <input> field. Just remember to set .text() or .val() accordingly.
In the above example, they set the inner text of a span to the value of the timepicker on change. If you want to set the value of another input field, you can change it to:
$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
$('#onselectTarget').val($(this).val());
});
(notice the .val() instead of .text())
Update
As pointed out in the comments, the question was about calculated time, not the actual time. Here is one possible solution.
This isn't pretty, since there is no build in functionality to return the calculated time on change, but it should work
http://jsfiddle.net/9ya53/
$('#onselectExample').timepicker({
'minTime': '2:00pm',
'maxTime': '11:30pm',
'showDuration': true
});
$('#onselectExample').on('changeTime', function() {
$('#onselectTarget').val($("li:contains('" + $(this).val() + "')").find('.ui-timepicker-duration').text());
});
I want to use onchange() event on a text field that may be filled in by a date picker using javascript. i tried to use onblur(), onmouseover() and etc but non of them can help me to catch its value just after changing by date picker.
a part of code that defined date picker and fill in text field is like below:
<script type="text/javascript" src="Scripts/cal_.js"></script>
<input type="text" name="receive_date" id="receive_date" style="width:75px" class="cdate" value="" {{attributes}}>
<script type="text/javascript">
new LCalendar('receive_date');
</script>
but when I want to add onchange="_do_something()" in place of {{attributes}} it does not work.
The text input is don't have change event. the event you can use to get the input change is to use 'input'. see sample
inputVar.addEventListener('input', function(){'what you want to do.'});
This is simplistic, but you could try this:
var val;
document.getElementById('receive_date').addEventListener('focus', function() {
// set the value
val = this.value;
});
document.getElementById('receive_date').addEventListener('blur', function() {
if (this.value !== val) {
// val was changed
} else {
// val was not changed
}
});
Thanks for good answers.
After testing so many solutions i changed my calendar library code.
Just after filling in date (text) field in code:
receive_date_field.value=...;
I tried to put:
a.focus();
a.blur();
twice and for catching its value after every filling in (either by another javascript code) i used:
onfocus="_do_something();"
in place of {{attributes}} !!! as you see this is not what i want but just is a temporary way to catch value of field after every filling in.
I've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});