时间戳

首页 > 解决方案 > Show datetimepicker last 6 days 也知道如何动态删除文本框

javascript - Show datetimepicker last 6 days 也知道如何动态删除文本框

问题描述

我正在创建一个应用程序，用户可以在其中添加动态文本框一切正常，但在 datetimepicker 中我想在 datetimepicker 中显示最后 6 天，我还想在用户单击删除按钮时删除动态文本框这是我的代码，但它不会工作我的主要目的是我想在 datetimepicker 中显示最后六天并一一删除动态文本框

<!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> 

            &nbsp; 
            <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>

标签： javascriptjqueryhtml

解决方案

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), ''];
        }

    });

并删除textarea您可以使用的remove()方法。例如删除所有textarea内部inputsid。

$('#inputs').find('input').remove();

这是一个工作示例。

$(function () {
    $("#date_ex").datepicker({
        firstDay: 0,
        minDate: -6,
        maxDate: 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 = "<div class='inputchild'>"; 

            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/></div>"; 
            $("#inputs").append(singleRecord); 
            var week = ['0','1','2','3','4','5','6'];
            var date = new Date(), curDay = date.getDay();
            var minDate = -6;
            var maxDate = 0;
            $( "#date_ex" +index).datepicker({
            maxDate: "+"+maxDate+"d",
            minDate:  "-"+minDate+"d"
            }); 
            $("#count").val(index); 


            }

$('.remove').on('click', function() {
if($('#inputs').children().length > 0){
    $('#inputs').children('.inputchild').last().remove();
  } else {
    alert('no input to delete');
  }
});
.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;
}
<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" />


            <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" class="button button5 remove">Remove</button> 
            &nbsp; 
            <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>

推荐阅读