1
У меня есть небольшой html-файл, содержащий текстовое поле, в котором пользователь вводит число другого текстового поля, которое должно быть сгенерировано. например, если пользователь вводит 3, 3 текстовых поля будут показаны автоматически. Затем я использую jQuery datepicker для привязки datepicker к сгенерированному текстовому полю. , к сожалению, я не смог прикрепить DatePicker с этим TextField PLese посоветуйтеdatepicker для динамически сгенерированного текстового поля с использованием javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<link href="jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="jquery-ui-1.7.2/css/base/ui.datepicker.images.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2137022: #datepicker */
#datepicker .ui-widget {
font-family: inherit;
}
#datepicker .ui-datepicker {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#datepicker .ui-datepicker-title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #000;
font-weight: normal;
line-height: 1.8em;
}
#datepicker .ui-state-default, .ui-widget-content .ui-state-default {
border-color: #330099;
background-color: #330099;
color: #330099;
}
#datepicker .ui-state-default, .ui-state-default a {
color: #330099;
}
#datepicker .ui-state-highlight, .ui-widget-content .ui-state-highlight {
border-color:#66ccff;
background-color:#66ccff;
color:#330099;
}
#datepicker .ui-state-active, .ui-widget-content .ui-state-active {
border-color: #ffcc00;
background-color: #ffcc00;
color: #330099;
}
#datepicker .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus
{
border-color: #ff9900;
background-color: #ff9900;
color: #330033;
}
#datepicker .ui-widget-header
{
border-color: #5F5F5F;
background-color: #808080;
border-width: 1px;
}
/* Text attributes for the Days of Week Text */
#datepicker .ui-datepicker table th
{
font-size: .8em;
color: #000;
font-weight: bold;
}
/* EndOAWidget_Instance_2137022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2137022" binding="#datepicker" />
</oa:widgets>
-->
</script>
</head>
<body>
<h3>Company Store Information</h3><br />
<input class="datepicker" name="commercial_license_issue_date" type="text" /><br />
<p>
No. of Store <input type="text" onkeyup="BuildFormFields('FieldsStore',parseInt(this.value, 10), 'Store', 'store');" />
<div id="FieldsStore" style="margin: 20px 0px;"></div>
</p>
</body>
<script type="text/javascript">
function BuildFormFields($divName, $amount, $type1, $type2)
{
var
$container = document.getElementById($divName),
$item, $field, $i;
$container.innerHTML = '';
for ($i = 0; $i < $amount; $i++) {
$item = document.createElement('div');
$item.style.margin = '3px';
t = document.createElement('table');
$field = document.createElement('span');
$field.innerHTML = $type1 + ' Rent Issue Date';
$field.style.margin = '0px 10px';
$item.appendChild($field);
$field = document.createElement('input');
$field.name = $type2 + '_rent_issue_date[' + $i + ']';
$field.type = 'text';
$field.className = 'datepicker hasDatepicker';
//$("field").attr("class", "datepicker");
//$field.className = 'datepicker';
//$field.class = 'datepicker'
//$field.addClass('datepicker');
$item.appendChild($field);
var br = document.createElement("br");
$item.appendChild(br);
$field = document.createElement('span');
$field.innerHTML = $type1 + ' Rent Expiry Date';
$field.style.margin = '0px 10px';
$item.appendChild($field);
$field = document.createElement('input');
$field.className = 'datepicker hasDatepicker';
$field.ID = $type2 + '_rent_expiry_date[' + $i + ']';
$field.name = $type2 + '_rent_expiry_date[' + $i + ']';
$field.type = 'text';
$item.appendChild($field);
var br = document.createElement("br");
$item.appendChild(br);
var br = document.createElement("br");
$item.appendChild(br);
var br = document.createElement("br");
$item.appendChild(br);
$container.appendChild($item);
}
}
// BeginOAWidget_Instance_2137022: #datepicker
$('.datepick').each(function(){
$(this).datepicker();
});
$(function() {
$(".datepicker").datepicker({
showOtherMonths: false,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showOn: "button",
buttonImage: "/hrss/calendar.gif",
buttonImageOnly: true
});
});
</script>
</html>