To get element by ID Javascript : var element = document.getElementById("miteshvmehta-userControl1"); jQuery : var element = $('#miteshvmehta-userControl1');
To get element by Name Javascript : var element = document.getElementByName("miteshvmehta-userControl1"); jQuery : var element = $("input[name=miteshvmehta-userControl1]");
To fetch element based on multiple criteria, we need to separate criteria with blank space: jQuery : var element = $("#myForm input[name=miteshvmehta-userControl1]"); This helps to look only in myForm id
Programmatically selecting a date using jQuery UI DatePicker control:
The DatePicker
beforeShowDay
event can be used to select a date in jQuery UI Control. As described in the documentation “The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the DatePicker before it is displayed.”
Here’s an example. Assume you want to select a date “9-24-2010”
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Select a Date in jQuery DatePicker</title> <link rel="Stylesheet" type="text/css" href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"> </script>
<script type="text/javascript"> $(function () { $("#miteshvmehta-jquery-ui-control-datepic").datepicker({ beforeShowDay: function (date) { var selDate = "9-24-2010"; // month are 0 based, so +1. var mm = date.getMonth() + 1, dd = date.getDate(), yy = date.getFullYear(); // format date var dt = mm + "-" + dd + "-" + yy; if (dt == selDate) { return [true, "ui-state-hover"]; } return [true, ""]; } }); }); </script> </head> <body> <input id="miteshvmehta-jquery-ui-control-datepic" type="text"/> /> </body> </html>
step1: Add jQuery references in header tag of page. Lets use googleApi's < link rel="Stylesheet" type="text/css" href="%20http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> Add Script tag for jQuery reference type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"
Step2: Add Javascript / jQuery code to set the date $(function () { $("#miteshvmehta-jquery-ui-control-datepic").datepicker({ beforeShowDay: function (date) { var selDate = "9-22-2010"; // month are 0 based, so +1.
var mm = date.getMonth() + 1, dd = date.getDate(), yy = date.getFullYear(); // format date var dt = mm + "-" + dd + "-" + yy; if (dt == selDate) { return [true, "ui-state-hover"]; } return [true, ""]; } }); });
Step3: In Body part add a text-box
In the above code, we format and compare it with the date that has to be selected. If it matches, apply a css style ‘ui-state-hover’ to give it a selected feel. You can use any other class you want. The result is shown below with 24th September selected.
