Aurelia - JQueryUI DatePicker

app.css

#listview-context-menu {
  padding: 0;
  margin-bottom: -1px;
  min-height: 300px;
}
.product {
  position: relative;
  height: 62px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(128,128,128,.3);
}
.product img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin: 10px;
  border: 1px solid #000;
  float: left;
}
.product h3 {
  margin: 0;
  padding: 15px 5px 1px 0;
  overflow: hidden;
  line-height: 1em;
  font-size: 1.1em;
  font-weight: bold;
}
.product p {
  font-size: .9em;
}
.product .date {
  float: right;
  margin: -8px 15px 0 0;
}
.k-listview:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

@media screen and (max-width: 620px) {
  .product h3 {
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 15px;
  }

}

app.html

<template>
  <require from="./app.css"></require>
  <div id="example">
    <div class="demo-section k-content wide">
      <h4>WebMail</h4>
     
        <template repeat.for="item of data">
          <div class="product" id='${$index}'>
            <img src="https://demos.telerik.com/kendo-ui/content/shared/images/employees/${item.FromID}.png" alt="${item.From}" />

            <h3>${item.Title}</h3>
            <p class="date">${item.Date}</p>
            <p>${item.From}</p>
          </div>
        </template>
    </div>


    <ul id="menu"
        ak-contextmenu="k-target: #example; k-filter: .product; k-widget.bind: firstContextMenu"
        k-on-select.delegate="itemSelected($event.detail)"
        k-on-open.delegate="firstOpened()"
        ak-contextmenu.ref="contextVM">
      <li>
        <img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply
        <ul>
          <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply to Sender</li>
          <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/reply.png" /> Reply to All</li>
        </ul>
      </li>
      <li class="k-separator"></li>
      <li>
        <img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/forward.png" />  Forward
      </li>
      <li class="k-separator"></li>
      <li>
        Label
        <ul>
          <li>None</li>
          <li class="k-separator"></li>
          <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/important.png" />Important</li>
          <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/todo.png" />Work</li>
          <li><img src="https://demos.telerik.com/kendo-ui/content/web/toolbar/done.png" />Personal</li>
          <li class="k-separator"></li>
          <li>New Label</li>
        </ul>
      </li>
      <li id='delete'>
        delete
      </li>
      <li class="k-separator"></li>
    </ul>
    
      <ul id="menu"
        ak-contextmenu="k-target: #example; k-filter: .date; k-widget.bind: secondContextMenu;"
        k-on-open.delegate="secondOpened()">
      <li>2nd menu</li>
        
      </ul>
      
  </div>
</template>

app.js

export class App {
  
  itemSelected(e) {
    console.log(e);
    console.log(e.item.innerText);
    
    if (e.item.id=='delete'){
      console.log('deleting ' + e.target.id);
    }
    
    this.data.splice(e.target.id, 1);
    this.firstContextMenu.close();
  }
  
  firstOpened() {
    this.secondContextMenu.close();
  }
  
  secondOpened() {
    this.firstContextMenu.close();
  }
  
  
    data= [{
      MailID: 1,
      FromID: 1,
      From: 'Ivo Nedkov',
      Date: '2/22/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 2,
      FromID: 2,
      From: 'Jytte Petersen',
      Date: '2/22/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 3,
      FromID: 3,
      From: 'Renate Messner',
      Date: '2/22/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 4,
      FromID: 4,
      From: 'Kevin Babcock',
      Date: '2/21/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 5,
      FromID: 5,
      From: 'Hari Kumar',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 6,
      FromID: 3,
      From: 'Renate Messner',
      Date: '2/21/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 7,
      FromID: 6,
      From: 'Anne Dodsworth',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 8,
      FromID: 7,
      From: 'Janet Leverling',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 9,
      FromID: 9,
      From: 'Rober King',
      Date: '2/21/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }, {
      MailID: 10,
      FromID: 8,
      From: 'Laura Callahan',
      Date: '2/20/2009',
      Title: 'RE: Telerik Enters the ORM Space'
    }, {
      MailID: 11,
      FromID: 5,
      From: 'Hari Kumar',
      Date: '2/20/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 12,
      FromID: 2,
      From: 'Jytte Petersen',
      Date: '2/20/2009',
      Title: 'RE: New version of Telerik Trainer'
    }, {
      MailID: 13,
      FromID: 4,
      From: 'Kevin Babcock',
      Date: '2/20/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 14,
      FromID: 3,
      From: 'Renate Messner',
      Date: '2/20/2009',
      Title: 'RE: Conferences?'
    }, {
      MailID: 15,
      FromID: 1,
      From: 'Ivo Nedkov',
      Date: '2/20/2009',
      Title: 'RE: New \'Your Links\' menu on telerik.com'
    }];
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.4/config2.js"></script>
    <!--<script src="./config2.js"></script>-->
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

main.js

/*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 * 
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
//import regeneratorRuntime from 'babel-runtime/regenerator';
//window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}