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
Related
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent
I have an input field that has today's date appearing onload. I also have a checkbox that clears the input field onclick. However, I'm hoping to have the original date field return if a user unchecks that box. Is this possible?
Checkbox HTML:
<span class = "required">*</span>$[SP]$[SP]<input type="checkbox" id="e_not_enroll" name="e_not_enroll"/>$[SP]$[SP] I do NOT want to enroll.
Date input box code:
<input type="text" id="d_date_of_event" value = "${jvar_employment_start_date}" style="background-color:#ddd" readonly="readonly"/>
if (document.getElementById("e_not_enroll").checked){
document.getElementById('d_date_of_event').value='';
} else {
document.getElementById('d_date_of_event').value = ?? ;
}
If you know the date before the JavaScript you can set a variable outside of the function to the original date. When the checkbox is unlocked simply put the original variable set outside back into the input field. The other alternative is to have another input field which is hidden. Called temp date or original day and use that to populate the original input on untick.
I use input inputmask on my form input, this is code that make mask on my form
$('input[name="jumlah"]').inputmask("decimal", {
groupSeparator: ".",
autoGroup: true
});
then i need to get the value from the input with this way
var checkVal = $('input[name="jumlah"]').val();
i keep get mask value,
Ex:
on the input field when input number i can see 33.333 value on my field. then i need retrieved only 33333
how to get unmask value from input?
InputMask has a property that might help you: 'removeMaskOnSubmit'
Just set it as true and you should be good.
Something like this:
Inputmask.extendDefaults({
'removeMaskOnSubmit': true
});
found here (external link)
In chrome, a tag like
<input id="picker" type="date">
renders as a text field. However, calling trying to get its value with something like
$("#picker").val()
returns nothing until a valid date is entered or picked from it's dropdown.
I took a look at all of the object's immediate properties on a keypress with
$("#picker").keypress(function() {
var output = ""
for (var i in this) {
output += i +" value:"+ this[i] + "\n";
}
alert(output);
});
but couldn't see my input in any of these. Check for yourself at http://jsfiddle.net/5cN2q/
My question is: Is it possible to get the text from a input[type="date"] in chrome when the input is not a valid date?
The W3C Date State spec defines the sanitization algorithm:
The value sanitization algorithm is as follows: If the value of the element is not a valid date string, then set it to the empty string instead.
Which is invoked whenever setting the value of the input element, as defined in DOM input value spec:
On getting, it must return the current value of the element. On setting, it must set the element's value to the new value, set the
element's dirty value flag to true, invoke the value sanitization
algorithm, if the element's type attribute's current state defines
one, and then, if the element has a text entry cursor position, should
move the text entry cursor position to the end of the text field,
unselecting any selected text and resetting the selection direction to
none.
So the value property will always be an empty string when the date is not valid. There doesn't seem to be any property for "original/dirty/user-typed text value" specified as it is not a text input after all.
IMO it is a good thing, it facilitates form validation as invalid dates are treated as falsy values (empty strings), it also leaves browsers to more freely implement the UI for date inputs.
If you prefer a non-W3C date input, you can use a text input with the good old JS date validation and a datepicker, such as the jQuery UI datepicker. This would allow you to retrieve the actual text value of the input and is a much more cross-browser solution as well.
As the other answer you can't see the original value, you can however handle validation with ValidityState
<script type="text/javascript">
function submitform()
{
var inputdate = document.getElementById("inputdate")
// check if date is valid.
// you can use `inputdate.validity.valid` too.
if(inputdate.validity.badInput) {
// error message from the browser
document.getElementById("message").innerHTML = inputdate.validationMessage
}
//document.myform.submit();
}
</script>
<div>message: </div><div id="message" style="color: red; font-weight:bold;"></div>
<form method=post action="./post">
<input type="date" id="inputdate" value="2016-02-29">
get date!
</form>
If you change the day to 30 and click the link, you'll see an error message.
Enjoy it.
Using the jquery datepicker ui, the value attributes of the associated html fields don't update immediately.
Example: http://jsfiddle.net/4tXP4/
From the horses mouth:
http://jqueryui.com/demos/datepicker/alt-field.html
If you inspect the elements you will see that neither value attributes update.
What' missing with these?
if you don't want another input field then use onSelect but the .val function does not update the value attribute, so you need to be a bit more raw
$("#datepicker_start").datepicker({
onSelect: function(dateText, datePicker) {
$(this).attr('value', dateText);
}
});
working demo http://jsfiddle.net/UBMXq/ or http://jsfiddle.net/3BLwK/9/ or http://jsfiddle.net/wrCv7/
1 things:
missing # "altField":"#startDate"
(optional) i.e. DateFormat might need some attention - I reckon dont use value in your hidden input
Hope this helps! :)
code
$(document).ready(function() {
$("#startDate_picker").datepicker({
"altField":"#startDate",
"dateFormat":"d M y",
"altFormat":"Y-m-d",
"changeMonth":true,
"changeYear":true
});
});