Create DatePicker from TypeScript file

[E]

Hi all,

I have a simple project using TypeScript to generate my JavaScript.

I have the Essential JS 2 CSS and JS referenced from the CDN. 

https://cdn.syncfusion.com/ej2/material.css

https://cdn.syncfusion.com/ej2/dist/ej2.min.js

If I use JS directly to create a control, it works great.  

        // initialize DatePicker component

        var datepicker = new ej.calendars.DatePicker();

        // Render initialized DatePicker.

        datepicker.appendTo('#element')

If I try to do similar from a TS file I get compile errors that ej isn't known.  

Installing the @types/ej.web.all via NPM helps.  ej.calendars doesn't exist but ej.DatePicker is now recognised.  It expects at least one arg in order to compile though.  The below compiles but gives a TypeError: ej.DatePicker is not a constructor.

    let el = $("#element");

    var datepicker = new ej.DatePicker(el);

What's the correct way to use the EJ2 DatePicker in this situation please? 

It works if I take a different approach but then it's a generic jQuery object rather than something typed.

let el = $("#element");

let datepicker = el.ejDatePicker;

Thanks

[Ashokkumar Balasubramanian]

Hi Ian, 

 

Greetings from Syncfusion support.  

 

If you want to render our Syncfusion Date Picker component in TypeScript platform, please follow the below getting stated documentation to install the necessary packages and use it. 

 

https://ej2.syncfusion.com/documentation/datepicker/getting-started/?no-cache=1 

 

Demo: https://ej2.syncfusion.com/demos/#/material/datepicker/default.html 

 

Note: For your provided code block, you have referred the EJ2 component scripts and styles in your application but tried to render the EJ1 components. Could you please ensure to whether you have used EJ1 or EJ2 components in your application? 

 

Could you please check the above provided information’s and get back to us, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B. 

[E]

Hi Ashokkumar,

Thanks for replying.

I looked at that exact link already.

I don't want to use RequireJS, SystemJS, WebPack or any of those at the moment but your documentation seems to suggest that EJ2 is not usable without?

I'm currently using TypeScript purely as a way to write cleaner JavaScript.  That works fine till I come to use the SF controls.

I have only EJ2 referenced as per the CDN links I showed above so I would expect it's the EJ2 controls I'm using?

With those CDN links in place, from a direct coded JS file I can render the controls fine.  If I create the same JavaScript but use TypeScript to generate then it fails as I explained above.

I really just need to know if/how I can reference EJ2 in a TS file so the TypeScript compiles or if I have to revert to hand-coded JS for the Syncfusion parts.

Thanks,

Ian

[Vinoth Kumar Sundara Moorthy]

Hi lan, 

 

Good day to you. 

 

We have created a sample to render DatePicker using direct script. Please check the sample in below link, 

 

https://stackblitz.com/edit/kmqxns?file=index.js 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[E]

Thanks Vinoth.

Sorry, I'm clearly not explaining things well.  I expected this would be a straightforward answer.

I already know how to create a DatePicker in JavaScript as I said above.  That works just fine.

I'm not writing the JavaScript directly though.  I'm writing my JavaScript in TypeScript to get the type checking and so on that TypeScript brings.  When those TypeScript files compile they generate the associated JavaScript files.

That's all fine till I want to use the SF controls.

The TypeScript file doesn't compile if I simply include the same JavaScript code to create the DatePicker, it gives a compile error that ej isn't known.  That's the problem.

[Vinoth Kumar Sundara Moorthy]

Hi lan, 

 

Good day to you. 

 

Query: TypeScript file doesn't compile if I simply include the same JavaScript code to create the DatePicker 

 

This may occur due to type definition issue in JavaScript. As per your requirement we have rendered DatePicker component in typescript (using JavaScript) using our definition file*(ej2.d.ts).* You need to refer below code in typescript file, 

 

TS 

/// <reference path="./ej2.d.ts" /> 

 

let datepicker:any = new ej.calendars.DatePicker(); 

datepicker.appendTo('#datepicker'); 

 

Please follow the below steps to complile the file. 

 

1.Open cmd in JavacsriptInTypescript folder 

 

2.tsc app.ts 

 

It will compile and generate the js file. Refer the generated app.js into the script in HTML file. 

 

Please find the sample from the below link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/JavacsriptInTypescript-653098027 

 

Regards, 

Vinoth Kumar S 

[E]

Thanks very much Vinoth.

I knew it was the type definitions I was missing but I didn't have the definition file I needed.  Your sample project gave me that and now I can do exactly as I want.  Thanks.

[Ashokkumar Balasubramanian]

Hi lan,  

 

We are glad to hear that the problem has been resolved. Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.