如果未选择日期,请将日期值保留为默认值

时间:2017-10-30 10:00:14

标签: javascript html5 bootstrap-daterangepicker

我想将Date的值保持为我指定的默认值。如果用户单击“提交”按钮时未选择日期。

我需要的功能是什么。如果用户选择日期并提交表单,则在提交后,表单所选日期值必须是日期字段上的值才能完美运行。我有问题,即。如果未选择日期且用户提交表单,则日期字段默认为今天的日期选择日期

我的代码如下

HTML

<body  onload="CovertDateToString()">

    <form action="searchDate" method="post" id="searchDate" class="searchDate"  modelAttribute="searchDate">
        <!-- Select type selectDateRange-->
            <div class="form-group ">
                        <div class="col-md-3 selectContainer">
                            <div class="input-group">
                                <input type="text" class="form-control" name="selectDateRange" id="selectDateRange" value="${newDate}">
                                <span class="input-group-addon"><i  class="glyphicon glyphicon-calendar"></i></span> 
                        </div>
                </div>
            </div>
          <!-- Select type search button with input-->
        <div class="form-group">
            <div class="col-md-3 inputGroupContainer">
                <div class="input-group">
                    <span   class="input-group-btn">
                     <button class="btn btn-success"  type="submit">
                        <div class="up" style="margin-top: -8%; color: white;">Search</div></button>
                     </span>
                   </div>
                 <!-- /input-group -->
            </div>
        </div>
    </form>
</body>

Js代码

function CovertDateToString() { 

    var date = <%=request.getParameter("selectDateRange")%>;    
    var myDate = new Date();
    var selectDate = myDate.toDateString();
    var selectDate = "Select Date"; 
    document.getElementsByName('selectDateRange')[0].value = selectDate;
    selectDate = date;
    document.getElementsById('selectDateRange')[0].value = date;
    console.log("Set Date to Select Date ",selectDate);
    console.log("Set Date to Selected Date ",date);
}

daterangepicker

$(function() {      
    $('input[name="selectDateRange"]').daterangepicker({              
        locale: {
             format: 'YYYY-MM-DD'
        }
    });
});     

2 个答案:

答案 0 :(得分:1)

        function CovertDateToString() { 

            var date = "${newDate}";    
            var myDate = new Date();
            var selectDate = myDate.toDateString();
            document.getElementsByName('selectDateRange')[0].value = selectDate;
            selectDate = date;
            document.getElementById('selectDateRange').value = date;
            console.log("Set Date to Select Date ",selectedDate);
            console.log("Set Date to Selected Date ",date);

        }    

       $(function() {      
        $('input[name="selectDateRange"]').daterangepicker({              
          locale: {
             format: 'YYYY-MM-DD'
            }
          });
       });  

在这个问题上经过了几个小时后,我终于开始工作了。删除request.getParamter是

之后删除日期的平均原因

答案 1 :(得分:-1)

请检查以下代码我在动态值的位置使用了静态值,因此管理它并且代码在snnipet上正常工作。

    <script src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet"/>
    <body  onload="CovertDateToString()">

        <form action="searchDate" method="post" id="searchDate" class="searchDate"  modelAttribute="searchDate">
            <!-- Select type selectDateRange-->
                <div class="form-group ">
                            <div class="col-md-3 selectContainer">
                                <div class="input-group">
                                    <input type="text" class="form-control" name="selectDateRange" id="selectDateRange" >
                                    <span class="input-group-addon"><i  class="glyphicon glyphicon-calendar"></i></span> 
                            </div>
                    </div>
                </div>
              <!-- Select type search button with input-->
            <div class="form-group">
                <div class="col-md-3 inputGroupContainer">
                    <div class="input-group">
                        <span   class="input-group-btn">
                         <button class="btn btn-success"  type="submit">
                            <div class="up" style="margin-top: -8%; color: white;">Search</div></button>
                         </span>
                       </div>
                     <!-- /input-group -->
                </div>
            </div>
        </form>
    </body>
{{1}}