get/set values of WebDatePicker client-side

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,

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 try
var 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 like
alert(‘value=’ + $find(“<%=cnWebDatePicker.ClientID%>”).get_value());

Hi,

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');
}

</script>

 

Thanks!

Hi,

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>

 

Hello,

Please, could you explain me how to send a value (date) from a textBox to webdatepicker?

Thanks

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()" />

 

Thanks so much Viktor that corrected the problem! 

Hi I am using WebDateChooser , I want to clear the control when i click the button on client click using javascript.

Please reply needfull.

Hi Bubhash,

In case of WebDateChooser, you may use global igdrp_getComboById or ig$ methods to get reference to webdatechooser object, and use get/setValue methods to get/set value of WebDateChooser. Below are examples:

<igsch:WebDateChooser ID="WebDateChooser1" runat="server"></igsch:WebDateChooser>
<input type="button" value="clear" onclick="igdrp_getComboById('WebDateChooser1').setValue(null)" />
<input type="button" value="get" onclick="alert('value:' + ig$('WebDateChooser1').getValue())" />
<input type="button" value="set" onclick="ig$('WebDateChooser1').setValue(new Date(1955, 1, 19))" />

Thanks for your reply.Thank u again …..

Done.