Back

Explore Courses Blog Tutorials Interview Questions

Date picker in JavaScript

0 votes
2 views
in Java by (9.5k points)

I get no date picker in my web page. But it appears fine in the fiddle. Below is my script: 

<html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>JSP Page</title>     

    <script type="text/javascript" src="datepicker.js"></script>      

    <script type="text/javascript" src="mootools-yui-compressed.js"></script>

    <script type="text/css" src="datepicker.css"></script>        

    <script type="text/javascript">           

        new DatePicker('.picker', {

            pickerClass: 'datepicker ',

            allowEmpty: true

        });           

    </script>        

 </head>

 <body>

     <label>Datepicker starting at and allowing no value:</label>

     <input name='date_allow_empty' type='text' value='' class='date picker' />

 </body>

</html>

You can find my full script here: http://www.monkeyphysics.com/mootools/script/2/datepicker

Can anyone tell me what I'm doing wrong here?

1 Answer

0 votes
by (19.7k points)

Run your JavaScript code after the relevant elements exist in the DOM and move the script to the end of the page. Also , you have to put the datapicker after mootools. See the below code: 

<html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>JSP Page</title>     

    <!-- FIRST CHANGE HERE, swapping the order of the script elements -->

    <script type="text/javascript" src="mootools-yui-compressed.js"></script>

    <script type="text/javascript" src="datepicker.js"></script>      

    <link type="text/css" rel="stylesheet" href="datepicker.css">

 </head>

  <body>

   <label>Datepicker starting at and allowing no value:</label>

   <input name='date_allow_empty' type='text' value='' class='date picker' />

   <!-- SECOND CHANGE HERE, moving your script to *after* the elements it operates on -->

   <script type="text/javascript">           

            new DatePicker('.picker', {

     pickerClass: 'datepicker ',

     allowEmpty: true

     });           

   </script>        

  </body>

</html>

Interested in Java? Check out this Java Certification by Intellipaat.    

Related questions

0 votes
1 answer
Power BI Embedded Report Picker
asked Jul 13, 2019 in BI by Vaibhav Ameta (17.6k points)
0 votes
1 answer
How to change date format in JavaScript
asked Apr 4, 2021 in Java by dante07 (13.1k points)
0 votes
1 answer
Converting a string to a date in JavaScript
asked Mar 15, 2021 in Java by dante07 (13.1k points)
0 votes
1 answer
How do I get the current date in JavaScript?
asked Jan 28, 2021 in Java by dante07 (13.1k points)
0 votes
1 answer
Function to convert timestamp to human date in javascript
asked Jan 28, 2021 in Java by dante07 (13.1k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...