jquery-ui,javascript,jquery

May you share link where you are testing...???

look for Javascript errors in your browser console

1. If you are going to use $.noconflict then use jQuery() for the $ in your jQuery code
2. var startDate = Date(); Is invalid you need to do
var startDate = new Date(); Date is an object - you have to instantiate it
3. Review date picker docs here (http://api.jqueryui.com/datepicker/#option-maxDate) there are options you can specify in the date field about how many years back you want the date to go back for.

Working code

<script>
$.noConflict();
jQuery(document).ready(function () {
  var startDate = new Date();
  startDate.setFullYear(startDate.getFullYear() - 18);

  var endDate = new Date();
  endDate.setFullYear(endDate.getFullYear() - 75);

  var dDate = new Date();
  dDate.setFullYear(dDate.getFullYear()-27);
  jQuery("#DateOfBirth").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd-mm-yyyy',
    minDate: endDate,
    maxDate:startDate,
    defaultDate:dDate,
    showButtonPanel: true                              
  });          
});
</script>

Select allOpen in new window

Hi Experts,

     I had changed from Date to new Date, but still, Change Date, change year, show button panel  option is not getting displayed.  see attached screen shot for details.

See the current code snippet

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $.noConflict();
        $(document).ready(function () {

            var startDate = new Date();
            startDate.setFullYear(startDate.getFullYear() - 18);

            var endDate = new Date();
            endDate.setFullYear(endDate.getFullYear() - 75);

            var dDate = new Date();
            dDate.setFullYear(dDate.getFullYear()-27);

            $("#DateOfBirth").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yyyy',
                minDate: endDate,
                maxDate:startDate,
                defaultDate:dDate,
                showButtonPanel: true                              
            });          
        });
    </script>

Secondly,  I can't share the URL, due to confidentiality and  non-disclosure issues.  you can see the screen shot for how the datepicker is getting displayed

Apart from that I had cleared the cache and started the chrome in incognito.
so that all cache is cleared. hence starting afresh.  Still not displaying the datepicker properly

Thank you very much.

Bharath AK
Untitled.png

Hi Julian,

      Thanks for your reply.  Now it is displaying overlapped windows one over the other.
one as same old(1st calender) and second one behind this, with changable month, year and panel button.   Please find attached screenshots for reference.  How to remove the unwanted calender window.

The code snippet now which I had used is

<script src="http://code.jquery.com/jquery.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $.noConflict();
        jQuery(document).ready(function () {
            var startDate = new Date();
            startDate.setFullYear(startDate.getFullYear() - 18);

            var endDate = new Date();
            endDate.setFullYear(endDate.getFullYear() - 75);

            var dDate = new Date();
            dDate.setFullYear(dDate.getFullYear() - 27);
            jQuery("#DateOfBirth").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yyyy',
                minDate: endDate,
                maxDate: startDate,
                defaultDate: dDate,
                showButtonPanel: true
            });
        });
    </script>

I have one more question, if I have too many jquery versions used in the project, will there be any issue or implications when I change and refer to latest version of Jquery and Jquery-ui.  Please get back to me.

With Many Thanks,
Bharath AK
1stCalender.png
2ndCalender.png

Without a context for your code snippet we cannot really assist. Either post the full code for the page or setup a fiddle / code pen or similar that replicates the problem.

Hi Julian,

      Thanks for your help.

      Now the problem is resolved.  The code snippet which I was using is

<input style="Width:300px; height: 20px;padding: 4px 4px 2px 6px;" ID="DateOfBirth" type="date" required/>

I had changed the type from "date" to text now it is working fine.

Thanks for your help and support

With Many Thanks,

Bharath AK

You are welcome.