Develop Reference

JQuery Datepicker doesn't change input value

I'm using a Jquery UI Datepicker addon as DateTimePicker http://jsfiddle.net/j5rkbnrt/1/
<input id="deliveryTime" name="deliveryTime" type="text" value="08/05/2015 10:00">
$('#deliveryTime').datetimepicker({
dateFormat: 'dd/mm/yy',
timeFormat: 'HH:mm',
});
The DateTimePicker is associated to the input field.
When I select the date the value of the input field is not changed.
So when I submit the form containing this input I always get the default value.
I had a look at the default jquery datepicker and that also doesn't change the value of the input. https://jqueryui.com/datepicker/
What am I missing here?

You are confusing the inline value attribute with the actual value that the input field contains.
By the attribute value, I mean the following:
<input id="deliveryTime" name="deliveryTime" type="text" value="08/05/2015 10:00">
The value attribute is value="08/05/2015 10:00". The value could be whatever date you picked that is entered into the input field.
So even if the attribute is value="08/05/2015 10:00", the input's actual value, meaning whatever text is in the input field, is the real value.
When you do enter a new value into your input and then use $('#deliveryTime').val() you will see that your new value is the actual value of the text inside the input field.
If you are keen on changing the attribute of your input field, which I find kind of ambiguous since val() already returns that value, then you need to do the following:
$('#deliveryTime').change(function(){
$(this).attr('value', $('#deliveryTime').val());
});
So "On each change of the deliveryTime, set the value attribute to the input value". Fiddle!
As I said, this is ambiguous. I would recommend just using $('#deliveryTime').val() to fulfill the same purpose.

it's works! Its updating input's value, but in chrome devtools it not shows this updates. Try submit this form and check network, then you will see that all data have been sent correctly :)

You can use onSelect event of datetimePicker plugin.
$('#deliveryTime').datetimepicker({
dateFormat: 'dd/mm/yy',
timeFormat: 'HH:mm',
onSelect: function(dateText, inst) {
$('#'+inst.id).attr('value',dateText);
}
});
Demo

jQuery datepicker does not update value properly

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.

How to get the calculated time in a timepicker?

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());
});

Update 2 values when submiting form action

I have a form with several fields. I enjoy all the validation built into a form, and I am forbidden from using ajax.
Here is the issue: My form has a date picker and time selector. But I have to send the values as a combination of them, i.e. 6/7/2013 05:00:00.
From the research I've done, I can't stop and concatenate those values before submitting.
How can I do this without getting involved in too much trickery?
Thanks for any helpful tips!

You can use a hidden element, for this example we'll use this.
<input type="hidden" name="datetime" value=""/>
When the submit event if fired on the form, run this.
$('form').on('submit', function(){
var $form = $(this);
$form.find('[name=datetime]').val(
$form.find('[name=date]').val() + ' ' + $form.find('[name=time]').val()
);
});
EDIT
I just realized this isn't tagged jQuery so here's my best attempt with vanilla javascript assuming the fields name is "add" and there's inputs named datetime, date and time.
var add = document.forms.add;
add.onsubmit = function(e){
add.datetime.value = add.date.value + ' ' + add.time.value;
}
This should definitely be handled on the server side though.

Have a 3rd hidden field, update the value (date + time) on change on either date or time and use that value where ever you want.

you can use jQuery UI Datetimepicker plugin.
its will help you to catch date and time in single field.
plz refer.
$('#selectedDateTimeWithFormat').datetimepicker({ dateFormat: 'dd-mm-yy', timeFormat: 'hh:mm:ss' });
http://timjames.me/jquery-ui-datetimepicker-plugin

jQuery datepicker without input

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',
});