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

328 views Asked by At

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

1

There are 1 answers

1
Bourbia Brahim On BEST ANSWER

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>