I create a datepicker and ask to launch an alert on change :
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: function() {
var value = this.value();
alert(value); //value is the selected date in the datepicker
}
});
</script>
No problem with this, it's working.
Now I try to make a function that take the value of the datepicker, and display it on an alert :
function Test(){
var toto = $("#datepicker").data("kendoDatePicker");
var value = toto.value();
alert(value);
}
And modify the the datepicker like this :
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: Test()
});
</script>
And it's not working anymore. The "Test" method is launched without changes on the datepicker, and the datepicker now look like this :
datepicker
Any ideas ?
Change the last part to this:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
change: Test
});
</script>
You were setting the change event to return value of the Test() function
Related
I can't find any solution for this anywhere. I would like to allow user to see calendar when clicking on my input, but when user will try to change the value, it shouldn't change (or immediately change back for value, what was at the beggining).
Readonly attribute removes calendar, so I was trying to do it different ways like use onchange/onclick functions to restore my value after event, but the value was changing anyway.
So for now my input looks like this:
<input class='test' type='date' value='2020-06-04' onkeydown='return false' >
So at least user can't change value of my input using keyboard. Could you help me?
You might try to set a time limit
<html>
<body>
<input type="date" value="2020-06-04">
<input type="date" value="2020-06-04" min="2020-06-04" max="2020-06-04">
</body>
</html>
If I understood correctly, this is what you want.
HTML
<input class='test' type='date' value='2020-06-04' />
JavaScript
const date = "2020-06-04";
const input = document.querySelector('.test');
input.onkeydown = function(e) {
return false;
}
input.onchange = function(e) {
this.value = date;
}
Check out this JSFiddle
EDIT
function preventInputChange(input, staticValue) {
input.onchange = function(e) {
this.value = staticValue;
}
}
I'm trying to use a datepicker and dropdown menu to update the values of my global variable. I'm a bit clueless on how I can get this to work.
var startValue, endValue, intervalValue, startDate, endDate, offset;
$(document).ready(function() {
startDate = $("#from").datepicker({
onSelect: function() {
startValue = $(this).datepicker('getDate');
}
});
endDate = ("#to").datepicker({
onSelect: function() {
endValue = $(this).datepicker('getDate');
}
});
intervalValue = $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");
$("#btnSubmit").click(function(){});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Start Date: <input type="text" id="from"></p>
<p>End Date: <input type="text" id="to"></p>
<label for="number">Select a number</label>
<select name="number" id="number">
<option selected="selected">15</option>
<option>30</option>
<option>60</option>
</select>
<input id="btnSubmit" type="submit" value="Get Data">
The values from my dropdown menu is assigned to intervalValue to carryout a little calculation.
Here's my Fiddle link
Change to
$("#from").datepicker({
onSelect: function() {
startValue = $(this).datepicker('getDate');
}
});
$("#to").datepicker({
onSelect: function() {
endValue = $(this).datepicker('getDate');
}
});
You use onSelect so you don't need to assign the result of the datepicker() function to the value, the values will be updated when onSelect is triggered.
As Martin E mentions, to keep the value updated on changes, initialize it on document.ready:
intervalValue = $('#number option:selected').val();
And then update it on each change
$('#number').change(function(){ intervalValue = this.value; });
Then use the submit event to do final calculation and anything else needed after submission (note that you should use form submit rather than button click because it's semantically better, although click will work as well)
$('#yourFormId').on('submit', function(event) {
event.preventDefault();
intervalValue = intervalValue * (1000*60);
// ...
Result: https://jsfiddle.net/jw1w4k5o/
You can have access to all global variables using window object.
window.variable
I must add that you should try to use local variables as much as you can and use global only if you really have no other option, because global variables will be visible to all javascript code on page and other scripts might assume different values for same thing.
When you create variable using var outside of function it will be global variable.
Also you can access to variables of upper scope inside functions. So you can just use those inside function, while you defined it in upper scope.
You are missing $ for ('#to').datepic...
https://jsfiddle.net/skrpv105/3/ is the updated code.
I have some very simple js working where a user enters info in a textbox, and the input is repopulated in another area of the document with a click function. Some of the input fields require dates, and I would like them to appear as date pickers. I have tried to set the datepicker as a style in the head of the doc as instructed in this guide http://javarevisited.blogspot.ca/2013/10/how-to-use-multiple-jquery-ui-date.html but it isn't working.
Is this because the variable Id overrides the class ID? Can I assign the datepicker function in the script?
<script type = "text/javascript">
function sayHi(){
var BPCName = document.getElementById("BPCName");
var OUTBPC = document.getElementById("OUTBPC");
var name = BPCName.value;
OUTBPC.value = " " +name+ ""
} // end sayHi
<style> .datepicker {}</style>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<form action = "">
<fieldset>
<label>Start Date: </label>
<input type = "text"
class=datepicker
id = "BPCName" />
<h1>TEST</h1>
<form action = "">
<fieldset>
<label>Start Date: </label>
<input type = "text"
class=datepicker
id = "BPCName" />
you just need to call Jquery and JqueryUI in your headers then use this
$("input.datepicker").datepicker();
//this code will set all your inputs with "datepicker" class, to appear the datepicker
//from JqueryUI
and you should put
class="datepicker"
not simply
class=datepicker
I have an HTML code like this one:
<form action="#" method="get">
<input type="date">
</form>
I want to have an event or something that will check when the date is changed, and get the date in JS Date object?
Demo
Try change event handler on the input,
$(document).ready(function(){
$('input[type="date"]').change(function(){
alert(this.value); //Date in full format alert(new Date(this.value));
var inputDate = new Date(this.value);
});
});
Attach the change event handler and convert the value into Date:
$("input").on("change", function () {
var myDate = new Date($(this).val());
console.log(myDate, myDate.getTime());
});
JSFIDDLE
You need to use a .change() jquery handler it will look something like this:
$(document).ready(function(){
$('#dateInput').change(function(){
console.log('Updated Date');
});
});
<form>
<input id="dateInput" type="date" />
</form>
I use the jQuery Datetimepicker plugin from XDSoft: http://xdsoft.net/jqplugins/datetimepicker/
I have the calender displayed inline. Here comes my code:
HTML:
<input type="text" id="start_date">
JS:
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true
});
My problem: When I pick a date in the frontend, the input field does not get the selected date as a value. What changes do I need to make or what do I need to add?
Get value from Onchange Event
Try this
onChangeDateTime:function(dp,$input){
$('#datePickValue').text($input.val());
}
Full Code look like this
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true,
onChangeDateTime:function(dp,$input){
$('#start_date').text($input.val()); // change the div as per your need - change the text as val ( it depends on the field)
});
Use the date time picker event.
HTML
<input type="hidden" id="start_date">
JS
var $startDate = $('#start_date');
$startDate.datetimepicker({
inline:true,
sideBySide: true
});
$startDate.on('dp.change', function() {
var selectedDate = $(this).val();
alert(selectedDate);
});
JS Fiddle Demo
$('#start_date').datetimepicker({
format:"d/m/Y H:i:s",
inline:true,
step:5,
onChangeDateTime: function (ct,$i) {
$('#start_date').val(ct.dateFormat('d/m/Y H:i'));
}
});
Try this..It works for me , so it should work for u too..Happy coding..