Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Getting started in EJ2 TypeScript Daterangepicker control

    7 May 20258 minutes to read

    This section briefly explains how to create a simple DateRangePicker component and configure its available functionalities in TypeScript, using Essential® JS 2quickstart seed repository.

    This application is integrated with thewebpack.config.js configuration and uses the latest version of thewebpack-cli. It requires nodev14.15.0 or higher. For more information about webpack and its features, refer to thewebpack documentation.

    Dependencies

    The following list of dependencies are required to use DateRangePicker component in your application.

    |--@syncfusion/ej2-calendars|--@syncfusion/ej2-base|--@syncfusion/ej2-inputs|--@syncfusion/ej2-splitbuttons|--@syncfusion/ej2-lists|--@syncfusion/ej2-data|--@syncfusion/ej2-popups|--@syncfusion/ej2-buttons

    Set up development environment

    Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project fromGitHub.

    git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart

    After cloning the application in theej2-quickstart folder, run the following command line to navigate to theej2-quickstart folder.

    cd ej2-quickstart

    Add Syncfusion® JavaScript packages

    Syncfusion® JavaScript (Essential® JS 2) packages are available on thenpmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single@syncfusion/ej2 package or individual packages for each control.

    The quickstart application is preconfigured with the dependent@syncfusion/ej2 package in the~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

    npm install

    Import the Syncfusion® CSS styles

    To render the DateRangePicker component, need to import DateRangePicker and its dependent component’s styles as given below in the~/src/styles/styles.css file, as shown below:

    @import"../../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../../node_modules/@syncfusion/ej2-inputs/styles/material.css";@import"../../node_modules/@syncfusion/ej2-popups/styles/material.css";@import"../../node_modules/@syncfusion/ej2-lists/styles/material.css";@import"../../node_modules/@syncfusion/ej2-calendars/styles/material.css";

    Add DateRangePicker to the application

    Add the HTML input element with an ID attribute as element for DateRangePicker to yourindex.html file.

    [src/index.html]

    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 DateRangePicker component</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><metaname="description"content="Essential JS 2"/><metaname="author"content="Syncfusion"/><linkrel="shortcut icon"href="resources/favicon.ico"/><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/></head><body><divstyle="margin: 50px;"><!--element which is going to render the DateRangePicker--><inputid="element"/></div></body></html>

    Import the DateRangePicker component to yourapp.ts and append it to the#element
    [src/app/app.ts].

    import{DateRangePicker}from'@syncfusion/ej2-calendars';// initialize daterangepicker componentletdaterangepicker:DateRangePicker=newDateRangePicker();daterangepicker.appendTo('#element');

    Run the application

    Use thenpm run start command to run the application in the browser.

    npm run start

    The following example shows a basic DateRangePicker.

    import{DateRangePicker}from'@syncfusion/ej2-calendars';// creates a simple daterangepicker componentletdaterangepicker:DateRangePicker=newDateRangePicker({//sets the place holderplaceholder:"Select Range"});daterangepicker.appendTo('#element');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 DateRangePicker control</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript UI Controls"/><metaname="author"content="Syncfusion"/><linkhref="styles.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-lists/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-calendars/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><inputid='element'type="text"/></div></body></html>

    Setting the start and end date

    The start and end date in a range can be defined with the help of startDate and endDate property. The following example demonstrates to set the start and end date on initializing the DateRangePicker.

    import{DateRangePicker}from'@syncfusion/ej2-calendars';// creates a daterangepicker with start and end dateletdaterangepicker:DateRangePicker=newDateRangePicker({//sets the start date in the rangestartDate:newDate("11/9/2017"),//sets the end date in the rangeendDate:newDate("11/21/2017")});daterangepicker.appendTo('#element');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 DateRangePicker control</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript UI Controls"/><metaname="author"content="Syncfusion"/><linkhref="styles.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-popups/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-lists/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-calendars/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><inputid='element'type="text"/></div></body></html>

    See Also

    You can also exploreJavaScript DateRangePicker feature tour page for its groundbreaking features. You can also explore ourJavaScript DateRangePicker that shows how to render the DateRangePicker in JavaScript

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp