get/set values of WebDatePicker client-side

Answered (Verified) This post has 1 verified answer | 10 Replies | 6 Followers Thread's RSS feed.

twaskow
Points 115
Replied On: Tue, Jul 27 2010 1:03 PM Reply

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

  • Post Points: 20

Verified Answer

Answered (Verified) Replied On: Thu, Jul 29 2010 3:49 PM Reply
Verified by twaskow

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());

Regards, Viktor Infragistics web team

  • Post Points: 55

All Replies

Answered (Verified) Replied On: Thu, Jul 29 2010 3:49 PM Reply
Verified by twaskow

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());

Regards, Viktor Infragistics web team

  • Post Points: 55
jdren
Points 250
Replied On: Fri, Aug 20 2010 1:40 PM Reply

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!

  • Post Points: 20
Replied On: Mon, Aug 23 2010 11:40 AM Reply

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>

Regards, Viktor Infragistics web team

  • Post Points: 5
362700
Points 430
Replied On: Tue, Sep 14 2010 9:54 AM Reply

Hello,

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

Thanks

  • Post Points: 20
Replied On: Tue, Sep 14 2010 12:24 PM Reply

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

Regards, Viktor Infragistics web team

  • Post Points: 20
jdren
Points 250
Replied On: Mon, Oct 4 2010 10:45 AM Reply

Thanks so much Viktor that corrected the problem! 

  • Post Points: 20
Subhash Sharma
Points 150
Replied On: Wed, Oct 31 2012 10:04 AM Reply

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

Please reply needfull.

  • Post Points: 20
Replied On: Wed, Oct 31 2012 11:12 AM Reply

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

Regards, Viktor Infragistics web team

  • Post Points: 20
Subhash Sharma
Points 150
Replied On: Thu, Nov 1 2012 3:40 AM Reply

Thanks for your reply.Thank u again .....

Done.

  • Post Points: 20
Subhash Sharma
Points 10
Replied On: Sun, Jan 6 2013 7:08 AM Reply

Hi ,

I m using ultrawebgrid in asp.net .........i am facing porblem like we have one ultrawebgrid and applying AllowSorting =True, in the ultrawebgrid we have multiple paging option let say we are in second page and applying sorting and we have also one button in ultrawebgrid ....in the button click we open one popup window from there we have one save button click on save button saving the popup value and reload the ultrawebgrid page .....after the reloading page index will be change and soting order will be change but we don't want to change the sorting order and don't want to change page order also ....................wnat to do all from javascript ......................

Please help ..............................i have already spent much time but didn't find any solution...............................

  • Post Points: 5
Page 1 of 1 (11 items) | RSS