jquery-ui,javascript,jquery

Hi Experts,
   
         Jquery-UI Datepicker is not working.  

I have the following code
        $.noConflict();
        $(document).ready(function () {
            var startDate = Date();
            startDate.setFullYear(startDate.getFullYear() - 18);

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

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

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

But datepicker is popping up, but maxdate, defaultdate, mindate, change month,change year, show panel button are all not working.  

I have lots of jquery versions loaded, hence I had given no conflict,  If I change all references to latest version jquery-ui, will there is a break in feature or functionality.  Please help me.

With Many Thanks,
Bharath AK
LVL 1
Bharath A.KAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mukesh YadavFull Stack DeveloperCommented:
May you share link where you are testing...???
dejaanbuCommented:
look for Javascript errors in your browser console
Julian HansenCommented:
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>

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Bharath A.KAuthor Commented:
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
Julian HansenCommented:
Please take a look at this sample and let me know if that works for you. The code is a copy of your original post with the few suggested amendments.
http://www.marcorpsa.com/ee/t1148.html
HTML
    <input type="text" id="DateOfBirth" />

Open in new window

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

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bharath A.KAuthor Commented:
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
Julian HansenCommented:
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.
Bharath A.KAuthor Commented:
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
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.