We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Create DatePicker from TypeScript file

Thread ID:

Created:

Updated:

Platform:

Replies:

147556 Sep 16,2019 09:56 AM UTC Sep 24,2019 09:27 AM UTC JavaScript - EJ 2 7
loading
Tags: DatePicker
E
Asked On September 16, 2019 01:59 PM UTC

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 [Syncfusion]
Replied On September 18, 2019 09:08 AM UTC

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. 
 
 
 
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
Replied On September 18, 2019 09:40 AM UTC

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 [Syncfusion]
Replied On September 19, 2019 01:29 PM UTC

Hi lan, 
 
Good day to you. 
 
We have created a sample to render DatePicker using direct script. Please check the sample in below link, 
 
 
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
Replied On September 19, 2019 02:01 PM UTC

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 [Syncfusion]
Replied On September 20, 2019 02:10 PM UTC

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. 
 
 
Regards, 
Vinoth Kumar S 


E
Replied On September 23, 2019 02:57 PM UTC

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 [Syncfusion]
Replied On September 24, 2019 09:27 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon