DateTime

Overview

DateTime

Number	Description
1	date form
2	time form
3	date picker
4	select today button
5	clear button
6	selected item pointer
7	today pointer
8	time picker
9	year selection dropdown
10	month selection dropdown

Constructor

Parameter

Name	Type	Required	Description
options	Object	No	An object contains params of constructor.
options.value	Date	No	The Default DateTime Value.
options.type	String	No	The component type date time datetime Default value: 'datetime'
options.locale	String	No	The setting of date picker display language ja en zh Default value: 'ja'
options.dateFormat	String	No	The date format for the date text input part of the component. Supported format: Valid separators: "/", "-", " ", ":" Date: d (Date Short): 1,2 ... dd (Date Full): 01, 02... Month: MM (Month Number): 01, 02 ... Year: YYYY (Year): 2019, 2020... All formats should contain MM and YYYY identifiers. For example: YYYY/MM - correct format YYYY/dd - incorrect format Default format: MM/dd/YYYY
options.isVisible	Boolean	No	The DatePicker will be visible. Default value: 'true'
options.isDisabled	Boolean	No	The DateTime field will be disabled. Default value: 'false'

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({value: new Date(), type: 'datetime', locale: 'en'});

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
            />
        );
    }
}

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({value: new Date(), type: 'datetime', locale: 'en'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';
class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
            />
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

getValue()

Get the value of datetime field.

Parameter

None

Returns

Name	Type	Description
value	Date	The value of datetime field.

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({value: new Date(), type: 'datetime', locale: 'en'});
console.log(dateTime.getValue());
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';
class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {value: new Date()};
    }
    render() {
        return (
            <div>
                <DateTime value={this.state.value} onChange={(value) => {this.setState({value})}}/>
                <button onClick={this.handleClick}>Get Value </button>
            </div>
        );
    }
    handleClick= () => {
        console.log(this.state.value);
    };
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setValue(value)

Set the value of datetime field.

Parameter

Name	Type	Required	Description
value	Date	Yes	The value of datetime field.

Returns

None

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({value: new Date(), type: 'datetime', locale: 'en'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
dateTime.setValue(new Date());

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';
class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {value: new Date()};
    }
    render() {
        return (
            <div>
                <DateTime value={this.state.value} onChange={(value) => {this.setState({value})}}/>
                <button onClick={this.handleClick}>Set Value </button>
            </div>
        );
    }
    handleClick= () => {
        this.setState({value: new Date('1995-12-17T03:24:00')})
    };
}
Reactdom.render(<Plugin />, document.getElementById("root"));

getLocale()

Get the setting of language.

Parameter

None

Returns

Name	Type	Description
locale	String	The setting of language. ja en zh

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({ value: new Date(), type: "datetime", locale: "en" });
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
console.log(dateTime.getLocale());

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';
class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {locale: 'ja'};
    }
    render() {
        return (
            <div>
                <DateTime locale={this.state.locale} onChange={(value) => {this.setState({value})}}/>
                <button onClick={this.handleClick}>Get Locale </button>
            </div>
        );
    }
    handleClick= () => {
        console.log(this.state.locale);
    };
}
Reactdom.render(<Plugin />, document.getElementById("root"));

setLocale(locale)

Set the language setting.

Parameters

Name	Type	Required	Description
locale	String	Yes	The setting of language. ja en zh

Returns

None

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({ value: new Date(), type: "datetime", locale: "en" });
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
dateTime.setLocale('en');

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';
class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {locale: 'en'};
    }
    render() {
        return (
            <div>
                <DateTime locale={this.state.locale} onChange={(value) => {this.setState({value})}}/>
                <button onClick={this.handleClick}>Set Locale </button>
            </div>
        );
    }
    handleClick= () => {
        this.setState({locale: 'ja'})
    };
}
Reactdom.render(<Plugin />, document.getElementById("root"));

show()

Display DateTime.

Parameter

None

Returns

None

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({ value: new Date(), type: "datetime", locale: "en" });
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
dateTime.show();

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';

class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {date: new Date(),isVisible:false};

    }
    handleShow=()=>{
        this.setState({isVisible:true})
    }
    render() {
        return (
           <div>
               <button onClick={this.handleShow}>Show</button>
               <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isVisible={this.state.isVisible}
            />
           </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

hide()

Hide DateTime.

Parameter

None

Returns

None

Sample

Javascript

var myDateTime = new kintoneUIComponent.DateTime({value: new Date()});

kintone.events.on('app.record.index.show', function(event) {
var dateTime = new kintoneUIComponent.DateTime({ value: new Date(), type: "datetime", locale: "en" });
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
dateTime.hide();
});

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';

class DateTimeComponent extends React.Component {
   constructor(props){
        super(props);
        this.state = {date: new Date(),isVisible:true};

    }
    handleShow=()=>{
        this.setState({isVisible:false})
    }
    render() {
        return (
           <div>
               <button onClick={this.handleShow}>Hide</button>
               <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isVisible={this.state.isVisible}
            />
           </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

disable()

Disable DateTime.

Parameter

None

Returns

None

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({ value: new Date(), type: "datetime", locale: "en" });
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
dateTime.disable();

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';

class DateTimeComponent extends React.Component {
     constructor(props){
        super(props);
        this.state = {date: new Date(),isDisabled:false};

    }
    handleDisable=()=>{
        this.setState({isDisabled:true})
    }
    render() {
        return (
           <div>
               <button onClick={this.handleDisable}>Disable</button>
               <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isDisabled={this.state.isDisabled}
            />
           </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));

enable()

Enable DateTime.

Parameter

None

Returns

None

Sample

Javascript

var dateTime = new kintoneUIComponent.DateTime({ value: new Date(), type: "datetime", locale: "en" });
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(dateTime.render());
dateTime.enable();

React

import { DateTime } from '@kintone/kintone-ui-component';
import React from 'react';
import Reactdom from 'react-dom';

class DateTimeComponent extends React.Component {
    constructor(props){
        super(props);
        this.state = {date: new Date(),isDisabled:true};

    }
    handleEnable=()=>{
        this.setState({isDisabled:false})
    }
    render() {
        return (
           <div>
               <button onClick={this.handleEnable}>Enable</button>
               <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isDisabled={this.state.isDisabled}
            />
           </div>
        );
    }
}
Reactdom.render(<Plugin />, document.getElementById("root"));