Javascript ShowDateTimePicker last 6天还知道如何动态删除文本框
我正在创建一个应用程序，用户可以添加动态文本框一切正常，但在datetimepicker中，我想在datetimepicker中显示最后6天，当用户单击“删除”按钮时，我想删除动态文本框这是我的代码，但它不起作用我的主要目的是在datetimepicker中显示最后6天并删除逐个动态文本框Javascript ShowDateTimePicker last 6天还知道如何动态删除文本框,javascript,jquery,html,Javascript,Jquery,Html,我正在创建一个应用程序，用户可以添加动态文本框一切正常，但在datetimepicker中，我想在datetimepicker中显示最后6天，当用户单击“删除”按钮时，我想删除动态文本框这是我的代码，但它不起作用我的主要目的是在datetimepicker中显示最后6天并删除逐个动态文本框 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008000;
}
.button2:hover {
background-color: #008000;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}
.button4:hover {background-color: #e7e7e7;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
.button6 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button6:hover {
background-color: #008CBA;
color: white;
}
</style>
<script>
//script for allow only 5
$(function () {
$("#date_ex").datepicker({
firstDay: 0,
beforeShowDay: function (date) {
//var sunday = new Date("June 2, 2013 00:00:00");
var sunday = new Date();
sunday.setHours(0,0,0,0);
//alert(sunday.getDay() + ' : ' + sunday.getDate() + ' : ' + (sunday.getDay() || 0) + ' : ' + sunday.getTime());
sunday.setDate(sunday.getDate() - (sunday.getDay() || 0));
var saturday = new Date(sunday.getTime());
saturday.setDate(sunday.getDate() + 5);
return [(date >= sunday && date <= saturday), ''];
}
});
$("#date_ex").datepicker("option", "dateFormat", "dd/mm/yy","setDate","-6d");
});
var index = 0;
function getinput()
{
if($('[name*="txt_project_name"]').length == 5) return false;
index ++;
var singleRecord = "";
singleRecord += "Project_name : <input type='text' name='txt_project_name"+index+"'>";
singleRecord += "Project/Task : <input type='text' name='txt_Header"+index+"'>";
singleRecord += "Department : <input type='text' name='txt_Department"+index+"'>";
singleRecord += "Description : <input type='text' name='txt_description"+index+"'>";
singleRecord += "Date : <input type='text' id='date_ex" + index+ "' name='txt_date"+index+"'><br/>";
singleRecord += "<hr/>";
$("#inputs").append(singleRecord);
var week = ['0','1','2','3','4','5','6'];
var date = new Date(), curDay = date.getDay();
var minDate = curDay;
var maxDate =week.length - week.indexOf(String(curDay))-1;
console.log(minDate,maxDate);
$( "#date_ex" +index).datepicker({
maxDate: "+"+maxDate+"d",
minDate: "-"+minDate+"d"
});
$("#count").val(index);
}
function removeElement()
{
$('#inputs').find('input').remove();
}
</script>
</head>
<body background="images\blue_background.jpg">
<form action="EmployeeVendorValidation.jsp" method="post" autocomplete="off">
<br><br><br><br>
<input type="hidden" name="count" id="count"/>
<input type="hidden" name="date_ex" id="date_ex"/>
<div id="inputs">
</div>
<button type="button" onclick="getinput()" class="button button5">Add</button>
<button type="button" onclick="removeElement()" class="button button5">Remove</button>
<button type="submit" class="button button2">Submit</button>
</form>
<form action="ViewAndUpdateEmployeeTask.jsp" method="post">
<input type="submit" name="btnUpdate" class="button button2" value="UPDATE_SHEET"/>
</form>
</body>
</html>
页面标题
.按钮{
背景色：#4CAF50；/*绿色*/
边界：无；
颜色：白色；
填充物：5px10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
利润：4倍2倍；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
}
.按钮1{
背景色：白色；
颜色：黑色；
边框：2px实心#4CAF50；
}
.按钮1：悬停{
背景色：#4CAF50；
颜色：白色；
}
.按钮2{
背景色：白色；
颜色：黑色；
边框：2px实心#008000；
}
.按钮2：悬停{
背景色：#008000；
颜色：白色；
}
.按钮3{
背景色：白色；
颜色：黑色；
边框：2px实心#f44336；
}
.按钮3：悬停{
背景色：#f44336；
颜色：白色；
}
.按钮4{
背景色：白色；
颜色：黑色；
边框：2px实心#e7e7e7；
}
.button4:悬停{背景色：#e7e7e7；}
.按钮5{
背景色：白色；
颜色：黑色；
边框：2个实心#5555；
}
.按钮5：悬停{
背景色：#555555；
颜色：白色；
}
.按钮6{
背景色：白色；
颜色：黑色；
边框：2个实心#008CBA；
}
.按钮6：悬停{
背景色：#008CBA；
颜色：白色；
}
//仅允许5的脚本
$（函数（）{
$（“#date_ex”）.日期选择器({
第一天:0,，
beforeShowDay:功能（日期）{
//var sunday=新日期（“2013年6月2日00:00:00”）；
var sunday=新日期（）；
星期日。设定时间（0,0,0,0）；
//警报（sunday.getDay（）+'：'+sunday.getDate（）+'：'+（sunday.getDay（）| | 0）+'：'+sunday.getTime（））；
sunday.setDate（sunday.getDate（）-（sunday.getDay（）| | 0））；
var saturday=新日期（sunday.getTime（））；
星期六.setDate（星期日.getDate（）+5）；
return[（date>=sunday&&date您可以使用minDate
和maxDate
参数设置最小日期和最大日期。例如，启用最后6天
$("#date_ex").datepicker({
firstDay: 0,
minDate: -6,
beforeShowDay: function (date) {
//var sunday = new Date("June 2, 2013 00:00:00");
var sunday = new Date();
sunday.setHours(0,0,0,0);
//alert(sunday.getDay() + ' : ' + sunday.getDate() + ' : ' + (sunday.getDay() || 0) + ' : ' + sunday.getTime());
sunday.setDate(sunday.getDate() - (sunday.getDay() || 0));
var saturday = new Date(sunday.getTime());
saturday.setDate(sunday.getDate() + 5);
return [(date >= sunday && date <= saturday), ''];
}
});
下面是一个工作示例
$（函数（）{
$（“#date_ex”）.日期选择器({
第一天:0,，
minDate:-6，
maxDate:0，
beforeShowDay:功能（日期）{
//var sunday=新日期（“2013年6月2日00:00:00”）；
var sunday=新日期（）；
星期日。设定时间（0,0,0,0）；
//警报（sunday.getDay（）+'：'+sunday.getDate（）+'：'+（sunday.getDay（）| | 0）+'：'+sunday.getTime（））；
sunday.setDate（sunday.getDate（）-（sunday.getDay（）| | 0））；
var saturday=新日期（sunday.getTime（））；
星期六.setDate（星期日.getDate（）+5）；
返回[（日期>=星期日和日期0）{
$（'#inputs'）.children（'.inputchild'）.last（）.remove（）；
}否则{
警报（“无需删除的输入”）；
}
})；
。按钮{
背景色：#4CAF50；/*绿色*/
边界：无；
颜色：白色；
填充物：5px10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：14px；
利润：4倍2倍；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
光标：指针；
}
.按钮1{
背景色：白色；
颜色：黑色；
边框：2px实心#4CAF50；
}
.按钮1：悬停{
背景色：#4CAF50；
颜色：白色；
}
.按钮2{
背景色：白色；
颜色：黑色；
边框：2px实心#008000；
}
.按钮2：悬停{
背景色：#008000；
颜色：白色；
}
.按钮3{
背景色：白色；
颜色：黑色；
边框：2px实心#f44336；
}
.按钮3：悬停{
背景色：#f44336；
颜色：白色；
}
.按钮4{
背景色：白色；
颜色：黑色；
边框：2px实心#e7e7e7；
}
.button4:悬停{背景色：#e7e7e7；}
.按钮5{
背景色：白色；
颜色：黑色；
边框：2个实心#5555；
}
.按钮5：悬停{
背景色：#555555；
颜色：白色；
}
.按钮6{
背景色：白色；
颜色：黑色；
边框：2个实心#008CBA；
}
.按钮6：悬停{
背景色：#008CBA；
颜色：白色；
}
添加
去除
提交
您可以按如下方式使用它
$("#excelFromDate").datepicker({
changeYear: true,
changeMonth: true,
dateFormat: "dd/mm/yy",
maxDate: "0"
}).datepicker("setDate", "-6d");
没有仍然没有工作，它给出了上个月的两个日期和当前月份week@Atul是否要仅显示最近6天？然后添加maxDate:0
，@Atul如果有输入，则需要将textarea
替换为input
：$（'#inputs'）。查找（'input'）。删除（）；工作正常，但如果我想逐个删除，该怎么办？还有此maxDate:0，不是work@Atul同时上传你的html。这样我可以完全按照你想要的方式帮助你。如果我添加maxDate：“0”，那么我无法添加动态文本框添加按钮不工作如果maxDate不是必需的，你可以忽略。
$("#excelFromDate").datepicker({
changeYear: true,
changeMonth: true,
dateFormat: "dd/mm/yy",
maxDate: "0"
}).datepicker("setDate", "-6d");