---
title: Date-Time Entry
product: Form Library
description: Refer to this free demo for JavaScript to learn how to use the date and time input type in web forms. You can insert your browser's local date and time, enter formatted data values, or use a special date picker interface.
framework: jQuery
source: https://surveyjs.io/form-library/examples/datetime-entry-question/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Date-Time Entry (jQuery)

A date-time entry question is a variation of a text entry question used to input formatted date and time values. This example demonstrates different types of date-time entry questions supported by SurveyJS Form Library. Switch between React, Vue, jQuery, Angular, and Vanilla JS to view an example for your JavaScript framework/library.

## Create a Date-Time Entry Question

To create a date-time entry form field, define an object with the `type` property set to `"text"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/pagemodel#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/questiontextmodel#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/questiontextmodel#name) that identifies the date-time input question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/questiontextmodel#description) to place under the `title` and a [`placeholder`](https://surveyjs.io/form-library/documentation/questiontextmodel#placeholder) to show within the date-time input field.

## Specify Input Type

If a question requires input in a specific date-time format, use the [`inputType`](https://surveyjs.io/form-library/documentation/questiontextmodel#inputType) property to specify the input type. An `inputType` value is passed on to the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types) attribute of the underlying `<input>` HTML element. This example demonstrates the `"date"`, `"time"`, `"datetime-local"`, `"month"`, and `"week"` input types.

## Validate Date-Time Values

If you need to ensure that respondents fill out all required form fields and the format of values is correct, enable data validation. This example demonstrates the following validation types and describes how to configure them:

- Required Validation           
Enable the [`isRequired`](https://surveyjs.io/form-library/documentation/questiontextmodel#isRequired) property for the form fields that should not be empty.

- Date-Time Range Validation            
If date-time values should fall within a specific range, use the [`min`](https://surveyjs.io/form-library/documentation/questiontextmodel#min) and [`max`](https://surveyjs.io/form-library/documentation/questiontextmodel#max) properties to specify it. Alternatively, you can use the [`minValueExpression`](https://surveyjs.io/form-library/documentation/questiontextmodel#minValueExpression) and [`maxValueExpression`](https://surveyjs.io/form-library/documentation/questiontextmodel#maxValueExpression) properties to calculate range limits dynamically (see [Expressions](https://surveyjs.io/form-library/documentation/design-survey-conditional-logic#expressions)).

To learn more about data validation in SurveyJS Form Library, refer to the following help topic: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});

$("#surveyElement").Survey({ model: survey });
```

### `src/json.js`

```js
export const json = {
  "elements": [{
    "name": "date1",
    "type": "text",
    "title": "Select a future date",
    "inputType": "date",
    "defaultValueExpression": "today()",
    "minValueExpression": "today()",
    "isRequired": true
  }, {
    "name": "date2",
    "type": "text",
    "title": "Select a past date within 30 days before today",
    "inputType": "date",
    "minValueExpression": "today(-30)",
    "maxValueExpression": "today()",
    "isRequired": true
  }, {
    "name": "time",
    "type": "text",
    "title": "Select a time between 09:00 and 18:00",
    "inputType": "time",
    "min": "09:00",
    "max": "18:00",
    "isRequired": true
  }, {
    "name": "datetime-local",
    "type": "text",
    "title": "Select a date and time",
    "inputType": "datetime-local",
    "defaultValueExpression": "currentDate()"
  }, {
    "name": "month",
    "type": "text",
    "title": "Select a month",
    "inputType": "month"
  }, {
    "name": "week",
    "type": "text",
    "title": "Select a week",
    "inputType": "week"
  }]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/datetime-entry-question/angular.md)
- [React](https://surveyjs.io/form-library/examples/datetime-entry-question/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/datetime-entry-question/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/datetime-entry-question/vanillajs.md)