I am using a WebDialogWindow to provide a modal dialog box for editing the contents of a WebDataGrid. I'm having some trouble getting and setting the value of a WebDatePicker in that modal dialog.
<script language="javascript">
var currentRow;
function gridTemplateOpening(sender, args)
{
var dialog = $find('<%= cnModalDialog.ClientID %>');
currentRow = args.get_row();
var dateText = currentRow.get_cellByColumnKey("expire_datetime").get_text();
$get("<%=cnTextBox.ClientID%>").value = dateText;
$get("<%=cnWebDatePicker.ClientID%>").value = dateText;
dialog.set_windowState($IG.DialogWindowState.Normal);
}
</script>
In this example cnTextBox is an asp:TextBox control. This control displays the date from column "expire_datetime" just fine. The cnWebDatePicker (a WebDatePicker control) however shows no selected value when the dialog opens. Does it not have a .value property or is that not the correct way to set it's value? Better yet, can you direct me to the CSOM documentation for the WebDatePicker control? I have not been succesful finding it.
My environment is 2010.vol 2 CLR 2.0
Hi,
I assume that you ask how to set value to datepicker on client. Because on server it should be obvious: take Text property of TextBox, convert it to DateTime and set Value property of WebDatePicker. On client you may use set_value() method or set_text(). The set_value(Date) is most reliable, because set_text(string) depends on format and may fail. Below are 2 examples for both cases:
<script type="text/javascript">function setText(){ var input = $get('<%=TextBox1.ClientID%>'); var dp = $find('<%=WebDatePicker1.ClientID%>');// dp.set_value(input.value); dp.set_text(input.value);}function setDate(){ var input = $get('<%=TextBox2.ClientID%>'); var dp = $find('<%=WebDatePicker1.ClientID%>'); var fields = input.value.split('-'); if(fields.length != 3) return; var date = new Date(parseInt(fields[0], 10), parseInt(fields[1] - 1, 10), parseInt(fields[2], 10)); dp.set_value(date);}</script><ig:WebDatePicker ID="WebDatePicker1" runat="server"></ig:WebDatePicker><asp:TextBox ID="TextBox1" runat="server" Text="01/03/2010"></asp:TextBox><asp:TextBox ID="TextBox2" runat="server" Text="2009-8-20"></asp:TextBox><input type="button" value="Set text from 1" onclick="setText()" /><input type="button" value="Set date from 2" onclick="setDate()" />
Hello,
Please, could you explain me how to send a value (date) from a textBox to webdatepicker?
Thanks
I looked at your codes, they looked confusing to me.
I think that Date.get/setFullYear should be used instead of get/setYear. Why to subscract 365 years if you need to substract only 1 year. Also, the set_value expects Date object, but not integer returned Date.getDate(), which is actually day of month. It is easier to use 1st param (sender) instead of $find(...).Below I wrote a sample for you, which intitializes one editor to today date and another editor to today-1year.
<script type="text/javascript">function initDP1(sender, evtArgs){ var date = new Date(); sender.set_value(date);}function initDP2(sender, evtArgs){ var date = new Date(); date.setFullYear(date.getFullYear() - 1); sender.set_value(date);}</script><ig:WebDatePicker ID="WebDatePicker1" runat="server"> <ClientSideEvents Initialize="initDP1" /></ig:WebDatePicker><ig:WebDatePicker ID="WebDatePicker2" runat="server"> <ClientSideEvents Initialize="initDP2" /></ig:WebDatePicker>
I tried to create a client side javascript function that will set default values for my Start and End date fields which are WebDatePicker controls. I only want to set them once. If the user changes that then then it is being saved in pagestate.
I expanded from your example but can not seem to get this to work.
Setting the new date value for dpDtEnd to today's date - 1 yr. and then doing an alert below return the value 20. dtToday.getDate(): 5
Setting the new date value for dpDtEnd to today's date - 1 yr. and then doing an alert below return the value 5. dtTodayMinusOneYear.getDate(): 5
Am I using the correct event?
<td> <ig:WebDatePicker ID="dpDateStart" runat="server" EnableWeekNumbers="true" ClientSideEvents-Initialize="SetSearchDatesDefault" ChangeMonthToDateClicked="true" EnableMonthDropDown="True" EnableYearDropDown="True" > <ClientSideEvents CalendarClosed="set_str_date" /> </ig:WebDatePicker> <ig:WebDatePicker ID="dpDateStart_old" runat="server" Visible="false" /></td><td> and</td><td> <ig:WebDatePicker ID="dpDateEnd" runat="server" EnableWeekNumbers="true" ClientSideEvents-Initialize="SetSearchDatesDefault" ChangeMonthToDateClicked="true" EnableMonthDropDown="True" EnableYearDropDown="True"> <ClientSideEvents CalendarClosed="set_end_date" /> </ig:WebDatePicker> <ig:WebDatePicker ID="dpDateEnd_old" runat="server" OnValueChanged="dpDateStart_ValueChanged" Visible="false" /></td>
<script type="text/javascript">
function SetSearchDatesDefault() { alert('SetSearchDatesDefault Begin'); var dpDtStart = $find("<%=dpDateStart.ClientID%>"); alert('dpDateStart: ' + $find("<%=dpDateStart.ClientID%>").get_value()); var dpDtEnd = $find("<%=dpDateEnd.ClientID%>"); alert('dpDateEnd: ' + $find("<%=dpDateEnd.ClientID%>").get_value()); var dtToday = new Date(); alert('dtToday.getDate(): ' + dtToday.getDate()); var dtTodayMinusOneYear = new Date(dtToday.getYear()-365, dtToday.getMonth(), dtToday.getDay()); alert('dtTodayMinusOneYear.getDate(): ' + dtTodayMinusOneYear.getDate()); dpDtStart.set_value(dtTodayMinusOneYear.getDate()); alert('dpDateStart: ' + $find("<%=dpDateStart.ClientID%>").get_value()); dtDtEnd.set_value(dtToday.setDate()); alert('dpDateEnd: ' + $find("<%=dpDateEnd.ClientID%>").get_value()); return; alert('SetSearchDatesDefault End');}
Thanks!
The WebDatePicker is javascript based control. Any operation with getting setting values, should be done through javascript member methods/variables. To set value the following can be used:
var dp = $find("<%=cnWebDatePicker.ClientID%>");if(!dp) return;// to set value of datepicker, you need Date object, so you may tryvar date = new Date(dateText);dp.set_value(date);// you also may try to use set_text(str),// however, format of dateText should match with format of datePicker.dp.set_text(dateText);To get value, you may use something likealert('value=' + $find("<%=cnWebDatePicker.ClientID%>").get_value());