Search code examples
javascriptdojoxpagesdijit.form

Dojo dojoType "dijit.form.DateTextBox": can it display a "Today" button?


Is there a way I can have a Today link or button displayed in the calendar popup ,

so the users have a quick access to today's date?

I know it's highlighted by default, but users are asking as it is available in other apps we have (not Dojo).

I am using Dojo on a Domino server with XPages.

Thanks


Solution

  • YOu have two method , overide the widget and manage to add Button in custom template , or just add it programticly one it open as below :

    If you read the source , you'll notice that every time you click on datetextbox, the method openDropDown is called in which the last popup is destroyed an recreated a gain with constraints , so you can use the function in oreder to bind button to popup widget with onclick impl ,

    ( adding some css to center the button )

    You can try the below Snippet :

    require([ "dojo/dom-construct", "dijit/form/DateTextBox", "dijit/form/Button", "dijit/popup", "dojo/dom", "dojo/aspect", "dijit/registry", "dojo/ready"], function(domConstruct, DateTextBox, Button, popup, dom, aspect, registry, ready) {
      ready(function() {
        new DateTextBox({},dom.byId("datebox")).startup();
        var dateBox = registry.byId("datebox");
        aspect.after(dateBox, "openDropDown", function(e){
          var calButton = new Button({
            label:"Today",
            onClick: function(e) {
              dateBox.set('value', new Date(), true);
              popup.hide(dateBox.dropDown);
            }
          })
     console.log(dateBox.dropDown);     domConstruct.place(calButton.domNode,this.dropDown.domNode,"after");
        })
      });
      
      
    });
    #widget_datebox_dropdown
    {
      text-align:center;
    }
    <script type="text/javascript">
      dojoConfig = {
        isDebug: true,
        async: true,
        parseOnLoad: true
      }
    </script>
    
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
    
    <body class="claro">
      <div id="datebox"></div>
    </body>