-1

Here is my Interface, and i wanted the user to input only the date of his birthHere is my code. I want to disable the future date and the current date for my "Date of Birth" field

<div class="form-group">
                                <label class="control-label"
                                    for="personal_information.date_of_birth">Date of Birth</label>
                                <input class="form-control" 
                                    rv-value="data.personal_information.date_of_birth"
                                    name="dateOfBirth" id="dateOfBirth" data-validate="required"
                                    data-mask="yyyy-mm-dd" placeholder="Pre-formatted birth date" />
                            </div>
Kenneth Lazos
  • 67
  • 1
  • 9
  • disable the dates from where? – Lal Jan 04 '16 at 03:59
  • OK REALLY do not understand the question... thought you had multiple fields if so `disabled` will do it – BeNice Jan 04 '16 at 03:59
  • @OldMauiMan but still you answered.. – Lal Jan 04 '16 at 04:01
  • 1
    The question is very unclear. Let me guess: You want to prevent the user from entering a date that is equal to or later than today's date. If that is the case, please edit your post to indicate this. _"disable the future date and the current date"_ doesn't really make sense. Also, if you're going to do that type of validation you should probably also prevent entry of dates in the last 4-5 years as well, unless you expect to have 4 or 5 year old visitors. – Jim Garrison Jan 04 '16 at 04:04
  • Sorry. Yes I wanted Prevent the user entering the current date and the future date. – Kenneth Lazos Jan 04 '16 at 04:15
  • Possible duplicate of [Simple javascript date math... not really](http://stackoverflow.com/questions/6356164/simple-javascript-date-math-not-really) – BSMP Jan 04 '16 at 04:52

1 Answers1

0

You cannot do that with pure HTML or CSS. Javascript is required. However, there is a fast way to do it, using two javascript libraries called jQuery and jQueryUI:

jsFiddle Demo

HTML:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="MyDIV">
  Birthday: <input id="bday" type="text" />
</div>

javascript/jQuery:

$("#bday").datepicker({
  maxDate: "-1"
});

Note that you can use:

maxDate: "-20Y"

to ensure birthdates must be at least 20 years old.

If you are unsure where to put the javascript code, you can include it in with your HTML, between <script> tags (technically, it will work if you stick it in the body, but really it should go in the <head>):

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#bday").datepicker({
              maxDate: "-1"
            });
        });
    </script>
</head>
<body>

<div id="MyDIV">
  Birthday: <input id="bday" type="text" />
</div>

</body>
cssyphus
  • 37,875
  • 18
  • 96
  • 111