Search code examples
outlookoutlook-addinoutlook-web-addins

Outlook addin datepicker

I have a problem with datepicker in Outlook addin.

No matter which framework I use, JQuery, Boostrap etc.... I always get similar result as in picture.

Plain HTML datepicker works though but that's ugly.

https://i.sstatic.net/gzxmm.jpg

I've tried shaping it with CSS but all widths are at 100% and even seen in debug but still it breaks the line at every few elements.

It should be 100% of width on that right side of screen where Outlook addin is.

Update:

JQuery datepicker image

Using JQuery datepicker result is the same. In head:

    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

And then in body:

<body>
<p>Date: <input type="text" id="datepicker"></p>
Solution

  • I was able to successfully add the jQuery date Picker. just followed this exact sample https://jqueryui.com/datepicker/

    it must show up. please share your HTML if you dont get this working. Also please indicate if this is a repro on Windows, Outlook Web Access? in what client you are observing this. Fyi I was able to use it in Outlook Web Access see screenshot. So maybe you need to make a few changes in your HTML. I was able to add it successfully in OWA as well!