验证 jquery 日期选择器

Question

我正在寻找如何验证用户是否select输入了日期。如果他没有 select 编辑日期表单日期选择器，他应该被通知 select 日期。我正在使用 jQuery 日期选择器。我使用的脚本是

 <script>


 $(function() {
    $( "#inputdate2" ).datepicker({ dateFormat: 'yy-mm-dd' });
  });
  </script>

并在 html

 <p id="date2">
Date From:<input type="text" name="datefrom" id="inputdate2" readonly="readonly" ></p>

Answer 1

如果没有值，

$("#inputdate").val() 将 return false，因此放置非运算符“！”在它前面，您可以检查是否已输入值（如果您不希望用户手动将随机数据插入到您的输入中，请在输入上设置属性 readonly="readonly"。

我目前使用通用名称 submitbutton 和点击功能，将其替换为您拥有的或按钮。

至于 return false 或 e.preventDefault()，这将阻止您的表单在字段留空时提交

$('#submitbutton').click(function(e){
   if(!$("#inputdate2").val()){
       alert("you didn't pick a date");
       return false; // might not work if it doesn't use e.preventDefault();
   }
});

Answer 2

已编辑：您可以在下面关注我的代码： HTML

Date From : <input type="text" name="datefrom" id="inputdate2" required>
<button type="button" id="btn"> Submit </button>

JS

 $(function() {
 $("#inputdate2").datepicker({ dateFormat: 'yy-mm-dd' });

 $("#btn").on('click', function(){
    if($("#inputdate2").val() == '')
    {
        alert("Please Select Date First!");
    }
 });

});

你可以从 JSFiddle 查看我的结果 --> http://jsfiddle.net/4e1radwm/1/

更新：

这是针对@babar 场景的：

scenerio is i've two dates picker. inputdate1 and inputdate2. if i add this function i.e firstCheck() to both dates script so i'll be notified twice to enter date, if i didnt enter date. I want to be notified only once

HTML

Date From : <input type="text" name="datefrom" id="inputdate1" required> 
To : <input type="text" name="dateto" id="inputdate2" required>
    <button type="button" id="btn"> Submit </button>

JS

$(function() {

     $("#inputdate1").datepicker({ dateFormat: 'yy-mm-dd' });
     $("#inputdate2").datepicker({ dateFormat: 'yy-mm-dd' }); 

     $("#btn").on('click', function(){
        if($("#inputdate1").val() == '' || $("#inputdate2").val() == '')
        {
            alert("Please Select Date First!");
        }
     });
});

你可以从 JSFiddle 查看我的结果 --> http://jsfiddle.net/fjj20euw/

希望我的回答对您有所帮助！

验证 jquery 日期选择器

validate jquery datepicker

html

jquery

jquery-ui

datepicker