Dojo DatePicker sample code

Jquery

Dojo js download link:

http://dojotoolkit.org/download/

Program:

 Monday, March 04, 2013 12:40 PM
<html>
<head>
<title>Dojo Date Picker</title>
       <style type="text/css">
      @import "dojoroot/dijit/themes/tundra/tundra.css";
      @import "dojoroot/dojo/resources/dojo.css"
       </style>
       <script type="text/javascript" src="scripts/dojo/dojo.js"
       data-dojo-config="parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.form.DateTextBox");
        // remove the below addOnLoad function if you want the text field editable.
        dojo.addOnLoad(function () {
              dojo.query(".dijitDateTextBox input[role='textbox']").forEach(function (node, index, arr) {
              node.setAttribute('readonly', 'readonly');
              });
        });
       </script>
       <script type="text/javascript">

       </script>
</head>
<body class="tundra">
<center>
<h2>Non-Editable Dojo DatePicker</h2> <br><br><br>
<input type="text" name="date"  dojoType="dijit.form.DateTextBox" required="true"/></center>
</body>
</html>

 

Output:

non editable Dojo date picker

Note:

Downloaded dojo package should be put as like below,

Scripts/dojo/dojo.js

 

 

Thanks for reading this post…………….!!!

Leave a comment

Leave a Reply