Combine inline jquery datepicker with an input field? - javascript

I know that I can use $('div').datepicker() to get an inline datepicker, but how do I show the datepicker fixed inline underneath its input field?
The alt field option does not work for me because I want the datepicker to also react on a date entered into the input field.
I would need something like the following pseudocode:
<inputfield type="text" id="d" >
<div id="z"></div>
<script> $('#z').datepicker().bindToInputfield($('#d')) </script>

Try this: Working demo http://jsfiddle.net/KRFCH/
The altField option will link to the second field you want! http://jqueryui.com/datepicker/#alt-field
Now note: any change in the input will reflect in the datepicker on change
This should fit your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d'
});
$('#d').change(function(){
$('#z').datepicker('setDate', $(this).val());
});

It's not possible to get the datepicker inline just by using the input field . You need to use a div along with an input to get what you want.
NOTE: Any changes made in the input will reflect in the datepicker
Example Code
<input type="text" id="text" />
<div id="mydiv"></div>
<script>
$('#mydiv').datepicker();
$('#text').change(function(){
$('#mydiv').datepicker('setDate', $(this).val());
});
$('#mydiv').change(function(){
$('#text').attr('value',$(this).val());
});
</script>
Check out this jsfiddle I've created for you: http://jsfiddle.net/v9XCP/

Related

Change label text for multiple inputs

I have a dynamic page that can have a lot of input[type="file"] fields. I need to change the label of every input once a file is selected.
So, for each input, if:
Empty: text = "upload";
File selected: text = name of file.
Here is a sample of HTML:
<label for="upload-qm1">
<span class="button">upload</span>
<input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>
I know how to do this for a single input, using this code:
$('label[for="upload-qm1"] span').text($(this).val());
However, I don't know how many input fields I will have on my page. I tried something like this:
$(this).parent('label').find('span').text($(this).val());
but unfortunately it doesn't work. Any help on how I can get a method for changing all input fields?
You can use DOM traversal to find the span related to the input which was changed. Try this:
$('input:file').change(function() {
$(this).prev('span').text($(this).val());
})
Working example
The most of the code you tried ist corret.
The problem is that you have set a parameter for the parent() function.
Try something like this:
$(this).parent('label').find('span').text($(this).val());
Also make sure that $(this) is the input field not the label itself,
if you click on the label $(this) is the label.
$('input[type="file"]').on('change', function() {
id = $(this).attr('id');
console.log("change event")
var file = $('#'+id).val().split('\\').pop();
if(file!='') {
$('label[for="'+id+'"] span').text(file)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="upload-qm1">
<span class="button">upload</span>
<input id="upload-qm1" type="file" accept=".pdf, .doc">
</label>

How to change textbox value on key up in jquery?

I just want to change the VALUE attribute of textbox on key up. But when I am typing something the value remains same in the mark up. I want to change it in mark up too. Here is my jsfiddle .
MARK UP
<input type="text" value="Type Your Name" id="textBox1" />
<span id="userName"></span>
jQuery
$("#textBox1").keyup(function () {
$("#userName").text($(this).val());
});
Any help would be highly appreciated.
add this line to your code:
$("#textBox1").attr('value', $(this).val())
check your updated fiddle http://jsfiddle.net/h5tpk/6/
just wrap your code in
$(function(){
});
http://jsfiddle.net/h5tpk/5/
You could also access the textbox via:
$("#textBox1").keyup(function () {
$("#userName").text($('#textBox1').val());
});
http://jsfiddle.net/#&togetherjs=kTauiAAFgR

How to add an onclick jquery function in an input area

I am a newbie in Javascript and jquery I have a jquery function
$('.input-group .date').datepicker({
});
for
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="">
</div>
I want to add this inside input tag using onclick="" can you please tell me how to do this ?
If I'm thinking what your thinking then it's wrong.
.datepicker() already assigns an onClick event so you don't have to create an extra one.
You have to make sure you are using jQuery and jQuery UI in order for datepicker to work.
Then you either have to put your script before you close body or in the head and use
$(document).ready(function(){ ... });
I also think you are using the wrong selector here.
. is class
# is ID
So it should be
$('.input-group .form-control').datepicker();
Example: http://jsfiddle.net/Spokey/AjRm3/
For those coming to this question because they want to know how to bind to the event that happens when someone clicks on an input box, then this is useful:
$('input.your-input-box-class').focus(function(e){
// do something
});
For those who want to use datepicker like the original question asks, then remember that jQuery UI abstracts away from these types of details. So just use the widgets like they were meant to be used. In this case, create the datepickers for all your input boxes that have a certain class (say date maybe) when the DOM is done loading:
$(document).ready(function(){
$('input.datepicker').datepicker({ /*... pass options here ...*/ });
});
And for options, you read the documentation, they include handling all the events you need:
http://api.jqueryui.com/datepicker/
Call a function:
onclick="someFunction(this);"
Set function:
function someFunction(this) {
$(this).prev('.input-group.date').datepicker({});
}
You bind datepicker to DOM element, not onClick.
$(document).ready(function(){
$('.form-control').datepicker({});
});
Or add it in function, so you can call it dynamically.
put the set of code inside a javascript function say clickMe()
function clickMe(){
$('.input-group .date').datepicker({
});
}
now call the function in click method.
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="" onclick="clickMe()">
</div>

Get HTML hidden input value in inline jQuery

I want to get a value passed from the controller in jQuery.
I added a hidden input field
<input type="hidden" id="Result" value="#Model.Result" />
And I tried to get the value in Jquery as follows:
$("#Result").val()
Model.Result has values, but in Jquery it shows it has no value.
I am using inline Javascript.
Here is a fiddle and it works perfect. Did you try to put your code into $(document).ready()? For example:
$(document).ready(function{
alert($("#Result").val());
});

JQuery UI datepicker triggered from text link

I'm trying to setup my css menu so that one of the text links triggers a datepicker calandar to open. I have stripped everything down to the code below. The problem I am experiencing is that the code below does not work but when I remove the ul, li tags it starts working.
I am using 1.8.0 JQuery and 1.8.23 JQuery UI.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
alert(dateText);
},
});
$("#datep").click(function() {
$("#dp").datepicker("show");
});
});
</script>
</head>
<body>
<ul>
<li>Test<input type="hidden" id="dp" /></li>
</ul>
</body>
</html>
Some weird things I have noticed. If I move the input under the ul it works kind of but will get an error after a few clicks on and off but if I add empty div under that input then it will start working normally it seems.
Any help is greatly appreciated.
So this is a bug. You'll have to add a block-level element right after the hidden input:
HTML:
<ul>
<li>Test
<input type="hidden" id="dp" />
<div></div>
</li>
</ul>​
Example: http://jsfiddle.net/andrewwhitaker/LE2CG/1/
Another version with hidden text: http://jsfiddle.net/sKXJt/ Working Demo http://jsfiddle.net/BhqmY/
This will help for hidden textbox:
http://forum.jquery.com/topic/attaching-datepicker-to-an-icon-for-a-hidden-input-field
Open JQuery Datepicker by clicking on an image w/ no input field
Hope it will help the cause :) I am not sure about the downvote :) anyhoo see the version with the hidden text here: http://jsfiddle.net/sKXJt/
Code
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
alert(dateText);
},
});
$('#datep').click(function() {
$('#dp').datepicker('show');
});
});​
working image
Since I'm using this throughout my project, I created a compact jQuery plug-in to do this, and decided to share.
JSFiddle: https://jsfiddle.net/yahermann/xyjhyqma/
HTML:
<span class="some-datepicker-class">
(some initial date)
</span>
JAVASCRIPT:
$('span.some-datepicker-class').datepicker_link(); // see jsfiddle for options
The default onSelect handler takes an optional link & date parameter set in the initial HTML. If both are provided, then upon selecting a new date, the plugin will load the provided link and include the selected date as a value to the provided parameter. Example:
2018-05-05
The initial date 2018-05-05 will be displayed. Upon selecting a new date, the plugin will load the following page: http://example.com?mydate=(new_date)
If this functionality is not desired, just set href="#" and/or provide your own onSelect callback instead.

Categories

Resources