---
title: "Javascript Date & Time Single value selection Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/single-select"
---

# Single value selection - JavaScript Date & Time demo

Javascript picker & scroller for single date and date time selection. Tailored for mobile/desktop, touch/pointer interaction. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/datetime/single-select)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/datetime/single-select)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/datetime/single-select.md), [Angular](https://demo.mobiscroll.com/angular/datetime/single-select.md), [React](https://demo.mobiscroll.com/react/datetime/single-select.md), [Vue](https://demo.mobiscroll.com/vue/datetime/single-select.md)

## Description

Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the [`selectMultiple`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-selectMultiple) to `false`.

You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.

## What this demo shows

- Four inline wheel-style picker configurations for selecting a single date, time, or date and time.
- **Date picker** Separate scrollable wheels for the month, day, and year.
- **Time list picker** Separate scrollable wheels for the hour, minute, and AM/PM.
- **Timegrid picker** Time slots arranged in a grid at 30-minute intervals.
- **Date and time picker** Separate scrollable wheels for the date, hour, minute, and AM/PM. The current date is labeled `Today`; other dates display an abbreviated weekday, month, and day.
- **Scrolling behavior** The selected values appear in a central selection area while neighboring values are visually subdued. Users scroll vertically through each wheel to change the selection.

## Best for

- **Date-only selection** Choosing a birthday, travel date, due date, or other single calendar date.
- **Time-only wheel selection** Setting an appointment time, reminder time, opening time, or daily schedule time when compact scrolling controls are preferred.
- **Timegrid selection** Choosing an available appointment, reservation, or service time from clearly separated 30-minute slots.
- **Date and time selection** Scheduling an appointment, pickup, delivery, or other activity that requires one specific date and time.
- **Inline forms** Keeping the picker visible within booking, scheduling, or settings interfaces instead of opening it in an overlay.

## Tutorial

```js
mobiscroll.datepicker('#date-picker', {
    controls: ['date'],
    selectMultiple: false
});
```

```js
mobiscroll.datepicker('#time-picker', {
    controls: ['time'],
    selectMultiple: false
});
```

```js
mobiscroll.datepicker('#timegrid-picker', {
    controls: ['timegrid'],
    selectMultiple: false
});
```

```js
mobiscroll.datepicker('#datetime-picker', {
    controls: ['datetime'],
    selectMultiple: false
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-controls) - option
- [`selectMultiple`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-selectMultiple) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.datepicker('#demo-single-select-date', {
  controls: ['date'],
  selectMultiple: false,
});

mobiscroll.datepicker('#demo-single-select-time', {
  controls: ['time'],
  selectMultiple: false,
});

mobiscroll.datepicker('#demo-single-select-timegrid', {
  controls: ['timegrid'],
  selectMultiple: false,
});

mobiscroll.datepicker('#demo-single-select-datetime', {
  controls: ['date', 'time'],
  selectMultiple: false,
});
```

### HTML

```html
<label>
    Date
    <input id="demo-single-select-date" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>
<label>
    Time
    <input id="demo-single-select-time" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>
<label>
    Time grid
    <input id="demo-single-select-timegrid" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>
<label>
    Date & time
    <input id="demo-single-select-datetime" mbsc-input data-input-style="box" data-label-style="stacked" placeholder="Please Select..." />
</label>
```

## Implementation notes

- Four separate inline picker instances render side by side, each using `display: 'inline'` - none is bound to an input.
- **Date only**: `controls: ['date']` - a single wheel/dropdown control for the month, day, and year.
- **Time only (list)**: `controls: ['time']` - separate wheels for hour, minute, and AM/PM.
- **Time only (grid)**: `controls: ['timegrid']` - a fixed-interval time grid instead of scrollable wheels.
- **Date and time**: `controls: ['datetime']` - combines the date and time wheels into a single scroller.
- `selectMultiple: false` is passed explicitly in the framework code snippets for clarity even though single-date selection is the default; the live demo script omits it since it's a no-op.
- `touchUi: false` is set in the fullscreen variant to force the dropdown rendering instead of the touch-scroller wheels; the main (non-fullscreen) demo page relies on the default touch-detected behavior.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Next: [Start-end selection](https://demo.mobiscroll.com/javascript/datetime/range-select.md) - Javascript date time range picker & scroller with customizable start/end dates, labels, min & max length, range highlight.