get/set values of WebDatePicker client-side

115

Tom posted over 13 years ago

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.

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

Parents

24497

Verified Answer
[Infragistics] Viktor Snezhko posted over 13 years ago

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

Reject Answer

Cancel
250

jay posted over 13 years ago in reply to [Infragistics] Viktor Snezhko

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!
Cancel
Reply

Cancel

Reply

24497

[Infragistics] Viktor Snezhko posted over 13 years ago in reply to jay

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>
Cancel
Reply

Cancel

Children

No Data