Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>
	<style>
	input.date {
		width:70px;
	}
	</style>

Client-side configuration script

	<script>
	jQuery(document).ready( init )
	var ordersGrid

	function init()
	{
		$("input.date").datepicker();
		
		ordersGrid = new DbNetGrid("ordersGrid");
		with (ordersGrid)
		{
			connectionString = "SamplesDatabase"
			fromPart = "orders"
			pageSize = 10
			search = false;
			searchFilterSql = "1=2"
			initialize()
		}

		jQuery("#searchButton").click(selectOrders)
	}

	function selectOrders()
	{
		var startDate = validateDate("startDate","Start",new Date(1,1,1));
		var endDate = validateDate("endDate","End",new Date(2050,1,1));

		if (!startDate || !endDate)
			return;

		with (ordersGrid)
		{
			searchFilterSql = "orderdate between ? and ?"
			searchFilterParams["startDate"] = startDate
			searchFilterParams["endDate"] = endDate
			loadData()
		}
	}
	
	function validateDate(id, label, defaultDate)
	{	
		var d = defaultDate;
		if ($("#" + id).val() == "")
			return d;
			
		try {
			d = DbNetLink.Util.stringToDate($("#" + id).val())
		}
		catch(ex) {
			ordersGrid.showMessage(label + " date is not valid")
			$("#" + id).focus();
			return null;
		}
		
		return d;
	}
	</script>

HTML markup

	<fieldset>
		<legend>Order Search</legend>
			<div>
				Start Date <input id="startDate" class="date"></input> End Date <input id="endDate" class="date"></input><button id="searchButton" type="button">Search</button>
			</div>
	</fieldset>
	<div id="ordersGrid"></div>