How to select date from ie datepicker??

[l_rosete22]

Hello,

I would like to ask for your help on how to code this in VBA.

example in this site:

jQuery datePicker simple datePicker demo

you will find a date picker.

How to select date from calendar button on the right side of the textbox using VBA?

Any help is much appreciated.

Thanks,

Saito

 

[John_w]

There's no need to select a date using the calendar button. You can populate the input field directly with a date, like this:

Sub IE_DP()
    With CreateObject("InternetExplorer.Application")
        .Visible = True
        .navigate "http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html"
        While .busy Or .readystate <> 4: DoEvents: Wend
        .document.getElementById("date1").Value = Format(Date, "dd/mm/yyyy")
    End With
End Sub

 

[l_rosete22]

Thank you for your reply John_w

I already did the logic like what you have provided. And the value was set correctly. However, There is a functionality within the date in my actual coding..

Let say, I am testing a metrics result every Sunday.. and each Sunday of the week have had a different set of results.

The concept is that when you select a date via date-picker. The metrics items for that week-ending date will display.

using the code above you provided it changed the date in the displayed text box but it does not load the items for that date.

Any idea how to do it? Many thanks.

 

[John_w]

The following code (replacing the single .document.getElementById statement) displays the datePicker calendar for that particular web page (because it has a JQuery event on the Input element):

        .document.getElementById("date1").Focus
        .document.getElementById("date1").Click

However I don't know how you would then select/click a date from the pop-up datePicker.

 

[l_rosete22]

That is my problem too..

Is there anyone who know's how to?

 

[John_w]

After displaying the DatePicker using the focus and click code shown above, the HTML changes to:

<DIV id=container>
<H1>jquery.datePicker example: simple datePicker</H1>
<P><A href="index.html">< date picker home</A></P>
<P>The following example displays simple use of the datePicker component to select a date for input fields. clickInput is passed in as true which means you can pop the datePicker up by clicking in the input field. You can also pass createButton:false if you don't want the calendar link to appear next to the input. </P>
<FORM id=chooseDateForm name=chooseDateForm action=#>
<FIELDSET><LEGEND>Test date picker form</LEGEND>
<OL>
<LI><LABEL for=date1>Date 1:</LABEL> <INPUT id=date1 class="date-pick dp-applied" name=date1 _dpId="2" jQuery15207510473261230868="2"><A class=dp-choose-date title="Choose date" href="#" jQuery15207510473261230868="1">Choose date</A> </LI>
<LI><LABEL for=date2>Date 2:</LABEL> <INPUT id=date2 class="date-pick dp-applied" name=date2 _dpId="11" jQuery15207510473261230868="4"><A class=dp-choose-date title="Choose date" href="#" jQuery15207510473261230868="3">Choose date</A> </LI>
<LI><LABEL for=test-select>Test select:</LABEL> <SELECT style="WIDTH: 170px" id=test-select name=test-select> <OPTION selected value=1>Test SELECT</OPTION> <OPTION value=2>Doesn't shine through</OPTION> <OPTION value=3>Even in IE</OPTION> <OPTION value=4>Yay!</OPTION></SELECT> </LI></OL></FIELDSET> </FORM>
<H2>Page sourcecode</H2><PRE class=sourcecode>$(function()
{
	$('.date-pick').datePicker({clickInput:true})
});</PRE>
<H2>Page CSS</H2><PRE class=sourcecode>/* located in demo.css and creates a little calendar icon
 * instead of a text link for "Choose date"
 */
a.dp-choose-date {
	float: left;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 5px 3px 0;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat; 
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}</PRE></DIV>
<DIV style="TOP: 260px; LEFT: 169px" id=dp-popup class=dp-popup>
<H2>July 2013</H2>
<DIV class=dp-nav-prev><A class="dp-nav-prev-year disabled" title="Previous year" href="#" jQuery15207510473261230868="6"><<</A><A class="dp-nav-prev-month disabled" title="Previous month" href="#" jQuery15207510473261230868="7"><</A></DIV>
<DIV class=dp-nav-next><A class=dp-nav-next-year title="Next year" href="#" jQuery15207510473261230868="8">>></A><A class=dp-nav-next-month title="Next month" href="#" jQuery15207510473261230868="9">></A></DIV>
<DIV class=dp-calendar>
<TABLE class=jCalendar cellSpacing=2>
<THEAD>
<TR>
<TH class=weekday title=Monday abbr=Monday scope=col>M</TH>
<TH class=weekday title=Tuesday abbr=Tuesday scope=col>T</TH>
<TH class=weekday title=Wednesday abbr=Wednesday scope=col>W</TH>
<TH class=weekday title=Thursday abbr=Thursday scope=col>T</TH>
<TH class=weekday title=Friday abbr=Friday scope=col>F</TH>
<TH class=weekend title=Saturday abbr=Saturday scope=col>S</TH>
<TH class=weekend title=Sunday abbr=Sunday scope=col>S</TH></TR></THEAD>
<TBODY>
<TR>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="10">1</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="11">2</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="12">3</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="13">4</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="14">5</TD>
<TD class="current-month weekend  disabled" jQuery15207510473261230868="15">6</TD>
<TD class="current-month weekend  disabled" jQuery15207510473261230868="16">7</TD></TR>
<TR>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="17">8</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="18">9</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="19">10</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="20">11</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="21">12</TD>
<TD class="current-month weekend  disabled" jQuery15207510473261230868="22">13</TD>
<TD class="current-month weekend  disabled" jQuery15207510473261230868="23">14</TD></TR>
<TR>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="24">15</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="25">16</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="26">17</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="27">18</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="28">19</TD>
<TD class="current-month weekend  disabled" jQuery15207510473261230868="29">20</TD>
<TD class="current-month weekend  disabled" jQuery15207510473261230868="30">21</TD></TR>
<TR>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="31">22</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="32">23</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="33">24</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="34">25</TD>
<TD class="current-month weekday  disabled" jQuery15207510473261230868="35">26</TD>
<TD class="current-month weekend today " jQuery15207510473261230868="36">27</TD>
<TD class="current-month weekend " jQuery15207510473261230868="37">28</TD></TR>
<TR>
<TD class="current-month weekday " jQuery15207510473261230868="38">29</TD>
<TD class="current-month weekday " jQuery15207510473261230868="39">30</TD>
<TD class="current-month weekday " jQuery15207510473261230868="40">31</TD>
<TD class="other-month weekday " jQuery15207510473261230868="41">1</TD>
<TD class="other-month weekday " jQuery15207510473261230868="42">2</TD>
<TD class="other-month weekend " jQuery15207510473261230868="43">3</TD>
<TD class="other-month weekend " jQuery15207510473261230868="44">4</TD></TR></TBODY></TABLE></DIV></DIV>

That should give you a clue as to how to click a date programmatically. In short: find the class=jCalendar table, then loop through its TD elements looking for the required day number and focus and click it.

 

[l_rosete22]

so difficult for me to figure out since they have different setup of calendars..

IF there's only way to click that date directly from datepicker.. it should be less effort...Anyway, I'm still hoping that maybe later I already got an answer here.. hehehe...

Any other solution please? Thanks so much...

 

[kvkeshav]

Hi All,

Even i am facing same problem how to select date in datepicker using VBA.

Please do let me know if anyone knows the solution. Thanks in advance