Develop Reference

Using a function on change in Kendo UI datepicker

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

Javascript - loop through datepickers and set date

I don't know Javascript at all. I have a form where there can be any number of datepicker textboxes. When the user selects a date in the first datepicker textbox, then I want all the remaining datepicker textboxes to have that same date.
Does this require a function?
Edit: I tried to create a function, but I don't know javascript at all!
function UpdateValuationDates(event) {
$valuationDatePicker = $(event.target);
var valuationDate = $valuationDatePicker.datepicker("getDate");
if (valuationDate != null) {
//loop through all items
document.getElementById("dateValuationDate").Text
$valuationDatePicker.datepicker("setDate", valuationDate);
$valuationDatePicker.trigger('change');
}
}
So I think this can be ignored. I have also read that there is a datepicker on selected event:
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
So I guess I need to edit this code to populate the rest of the textboxes, but how to find out at runtime how many there are?
The HMTL has a repeater with the datepicker repeated x number of times:
<abc:DatePicker runat="server" ID="dateValuationDate"

With the help of html's input type=date and some basic classes' knowledge, you can do that.. Considering you have following Date pickers:
<input type="date" class="dateTime">
<input type="date" class="dateTime">
<input type="date" class="dateTime">
Now you simply need to listen to a change in any one of there values:
$(".dateTime").on("change", function(){
and when the change occurs, get the changed value and set all other date pickers to that new value:
$(".dateTime").val($(this).val());
So it'll be something like this:
$(document).ready(function(){
$(".dateTime").on("change", function(){
$(".dateTime").val($(this).val());
});
});
See the DEMO here
EDIT: Considering you're new to JavaScript, here's how i'm getting the reference to all those elements, through .className, as they all have same class name so for each event (change, update value) they all will be referenced.

only working when manual input value

why this code is not working. but when im manual insert value for var nm2=budi; its working
<div>
Date From: <input id="date1" class='easyui-datebox' style='width:150px'>
To: <input id="date2" class='easyui-datebox' style='width:150px'>
Nama <input id="nama" style='width:150px' class="easyui-validatebox">
<a href='#' id="aaa" class='easyui-linkbutton' iconCls='icon-search'>Cari</a>
</div>
and here the javascript
var d1=0;
var d2=0;
var nm2=$('#nama').val();
$('#date1').datebox({
onSelect: function(date){
d1= date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
}
})
$('#date2').datebox({
onSelect: function(date){
d2= date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
}
})
$('#aaa').click(function(){
$('#query').datagrid('options').url="getjson.php?&names="+nm2+"&start_date="+d1+"&end_date="+d2;
$('#query').datagrid('reload');
})

Why do you declare it outside your function?
If in any case you want to use that var nm2 as a global var, you can do it like this
var nm2;
$('#aaa').click(function(){
nm2 = $('#nama').val();
$('#query').datagrid('options').url="getjson.php?&names="+nm2+"&start_date="+d1+"&end_date="+d2;
$('#query').datagrid('reload');
})
Sorry it's not a complete code, please try it your self.

I'd imagine this is because you're assigning your value for nm2 when the script loads. I'd imagine you'd want to assign it when you click your submit.
$('#aaa').click(function(){
nm2=$('#nama').val();
$('#query').datagrid('options').url="getjson.php?names="+nm2+"&start_date="+d1+"&end_date="+d2;
$('#query').datagrid('reload');
})
That should at least get you on the right track.

Validate Date input with Javascript

I have a input field date in my form and would like to add Javascript validation to ensure that its always greater than today's date. I tried the following but the function doesnt seem to be called when the user clicks on the input field and makes a change.
<input type="text" name="InsertRecordGuestOrders_Delivery_date" id="InsertRecordGuestOrders_Delivery_date" value=""/>
<script type="text/javascript">
function validateDate()
{
var del_date = document.getElementById('InsertRecordGuestOrders_Delivery_date').value;
if (Date.parse(del_date) < Date.now()) {
document.getElementById('InsertRecordGuestOrders_Delivery_date').value = '';
alert("Delivery date has to be later than today");
}
}
document.getElementById('InsertRecordGuestOrders_Delivery_date').onChange = validateDate();
</script>
Any suggestions on what I'm doing wrong?
Thanks in advance.

You want to assign the validateDate function to the onchange property, not execute the function and assign its return value. Change this:
document.getElementById('...').onChange = validateDate();
to this:
document.getElementById('...').onChange = validateDate;

This line:
document.getElementById('InsertRecordGuestOrders_Delivery_date').onChange = validateDate();
Should be:
document.getElementById('InsertRecordGuestOrders_Delivery_date').onchange = validateDate;
Notice the parentheses are gone. If you invoke it immediately, you're assigning the return value of validateDate() as the onchange handler. You want to assign the function itself as the handler, not the return value of the function.
In addition, it should be onchange, not onChange.

HTML form does not submit in JavaScript

Trying to create a simple age calculator. At the moment the current year will populate but when you enter your birth year and click submit nothing happens.
function aaa(){
date=new Date();
var y=date.getFullYear();
document.getElementById('ddd').value=y;
}
function display(){
var c=document.getElementById('eee').getFullYear.value;
//var aa= document.getElementById('eee').(this).('getDate').value;
var e= y - c;
{
document.write("Ans="+e);
}
alret(e);
}
<body onload="aaa();">
<form name="xyz" method="post">
CurrentDate:<input type="text" name="ddd" id="ddd">
BirthDate:<input type="date" name="eee" id="eee">
Age:<input type="text" name="age" id="age">
<input type="submit" name="submit" value="submit" onClick="display();">
</form>
</body>

Probably better for code review, but here goes:
<script language="javascript">
The language attribute for script elements was deprecated in HTML 4 and removed in HTML5. Remove it.
function aaa()
Functions should have a meaningful name, e.g. setYear.
{
date=new Date();
You should keep variables local with var.
var y=date.getFullYear();
document.getElementById('ddd').value=y;
You could just do:
document.getElementById('ddd').value = new Date().getFullYear();
}
function display()
{
var c=document.getElementById('eee').getFullYear.value;
Input type date isn't supported by all browsers, and that won't work anyway. If you are just using the difference in years (which will be incorrect by 1 year about half the time) then why not just ask for the year?
var e= y - c;
{
document.write("Ans="+e);
}
The block is redundant, and calling document.write after the load event will first clear the entire document (everything, including all scripts) and load a new document with just the content passed to document.write.
[...]
So a re-write might look like:
function calcAge(element) {
var form = element.form;
form.age.value = form.currentYear.value - form.birthYear.value;
}
window.onload = function() {
document.forms[0].currentYear.value = new Date().getFullYear();
}
<form>
Current year: <input name="currentYear"><br>
Birth year: <input name="birthYear"><br>
<input type="button" onclick="calcAge(this)" value="Caluclate age"><br>
Your age: <input name="age" readonly><br>
</form>
Note that every control in a form has a form property that references the form it's in. Also, form controls with a name are available as named properties of the form (hence a control named submit overwrites the submit method).

document.getElementById('eee') is a DOM element.
document.getElementById('eee').getFullYear is, judging from your code, undefined.
document.getElementById('eee').getFullYear.value should throw an error.
You were trying to read a property from an object which is (unfortunately) undefined, that's why your code doesn't work. Open console and see if there is a red line saying something like this:
Cannot read property 'value' of undefined