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

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	Boolean	No	The component type date time datetime
options.dateFormat	String	No	The date format showed on date picker. Supported format: Seperator: "/", "-", " ", ":" Day of week: E (Week Day Short): Su, Mo... EE (Week Day Medium): Sun, Mon... EEE (Week Day): Sunday, Monday... Date: d (Date Short): 1,2 ... dd (Date Full): 01, 02... Month: MM (Month Number): 01, 02 ... MMM (Month Text Short): Jan, Feb... MMMM (Month Text Long): January, February... Year: YYYY (Year): 2019, 2020... 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: date, type: 'datetime', locale: '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 = {date: new Date()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
            />
        );
    }
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    ) 
    return event;
});

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

(function() {
    "use strict";  
    kintone.events.on('app.record.index.show', function(event) {
        const date = new Date();
        var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});
        const space = kintone.app.getHeaderSpaceElement();
        space.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'
            />
        );
    }
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

getValue()

Get the value of datetime field.

Parameter

None

Returns

Name	Type	Description
value	Date	The value of datetime field.

Sample

Javascript

(function() {
    "use strict";  
    kintone.events.on('app.record.index.show', function(event) {
        const date = new Date();
        var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});
        const space = kintone.app.getHeaderSpaceElement();
        space.appendChild(dateTime.render());
        dateTime.getValue();
    });
})();

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);
    };
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

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

(function() {
    "use strict";  
    kintone.events.on('app.record.index.show', function(event) {
        var dateTime = new kintoneUIComponent.DateTime({type: 'datetime', locale: 'en'});
        const space = kintone.app.getHeaderSpaceElement();
        space.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')})
    };
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

getLocale()

Get the setting of language.

Parameter

None

Returns

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

Sample

Javascript

(function() {
    "use strict";  
    kintone.events.on('app.record.index.show', function(event) {
        const date = new Date();
        var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime', locale: 'en'});
        const space = kintone.app.getHeaderSpaceElement();
        space.appendChild(dateTime.render());
        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);
    };
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

setLocale(locale)

Set the language setting.

Parameters

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

Returns

None

Sample

Javascript

(function() {
    "use strict";  
    kintone.events.on('app.record.index.show', function(event) {
        const date = new Date();
        var dateTime = new kintoneUIComponent.DateTime({value: date, type: 'datetime'});
        const space = kintone.app.getHeaderSpaceElement();
        space.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'})
    };
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

show()

Display 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 container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.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()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isVisible={true}
            />
        );
    }
}

kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

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 container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.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()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isVisible={false}
            />
        );
    }
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

disable()

Disable 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 container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.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()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isDisabled={true}
            />
        );
    }
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});

enable()

Enable DateTime.

Parameter

None

Returns

None

Sample

Javascript

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

kintone.events.on('app.record.index.show', function(event) {
    var container = kintone.app.getHeaderSpaceElement();
    container.appendChild(myDateTime.render());
    myDateTime.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()};
    }
    render() {
        return (
            <DateTime
                value={this.state.date}
                type='datetime'
                locale='en'
                isDisabled={false}
            />
        );
    }
}
kintone.events.on('app.record.index.show', function(event) {
    ReactDOM.render(
        <DateTimeComponent />,
        kintone.app.getHeaderSpaceElement()
    );
});