---
title: "Javascript Date & Time Setting values Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/setting-values-defaults"
---

# Setting values - JavaScript Date & Time demo

Javascript Date & time picker demo with different ways to set values and defaults. Custom buttons and presets - like Now - supported. Plain JS api for usage everywhere.

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

## Description

Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The date and time picker defaults to `now`, which can be easily overridden with the [`defaultSelection`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-defaultSelection) option. The values are set by interacting with the component and making a selection or it can be done programmatically with the `setVal` method. Use the [`buttons`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-buttons) option for showing/hiding `set`, `cancel` or add custom buttons.

## What this demo shows

- Three example groups demonstrate how to control a wheel-style date picker value through defaults, runtime updates, and action buttons.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected value in the input using a month, day, and year format.
- **Default values**: The first example group compares the default behavior with a date picker initialized to a specific value through the `defaultSelection` option.
- **Runtime values**: The second example group combines interactive selection with programmatic updates. Two external buttons set a specific date or return the date picker to the current date.
- **Button-based values**: The third example group demonstrates the button API with three configurations: a `Now` button that selects the current date, a custom button that selects a predefined date, and automatic value confirmation with the Set button removed.

## Best for

- **Preselected dates** Initialize a date picker with a meaningful default, such as a previously saved date or a suggested appointment date.
- **External controls** Update the selected date from controls outside the date picker, such as date shortcuts, reset actions, or workflow navigation.
- **Date shortcuts** Provide one-click actions for commonly used values, including the current date or a predefined date.
- **Automatic confirmation** Apply a date immediately after selection in workflows where a separate Set action is unnecessary.

## Tutorial

### Controlling the default value

The calendar defaults to today if not overridden. You can however manually set a default value through the [`defaultSelection`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-defaultSelection) option.

```html
<label>
    Default
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
```

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

```html
<label>
    Custom default
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
```

```js
mobiscroll.datepicker('#picker', {
    controls: ['date'],
    defaultSelection: new Date(2020, 11, 24)
});
```

### Setting values runtime

While the selected value can be changed by interacting with the calendar, you can use the [`setVal`](https://mobiscroll.com/docs/javascript/datepicker/api#method-setVal) method to change it programmatically.

```html
<button mbsc-button id="jan">Set 02-01-2020</button>
<button mbsc-button id="today">Set today</button>
```

```js
document
    .getElementById('today')
    .addEventListener('click', function () {
        instance.setVal(new Date());
    }, false);

document
    .getElementById('jan')
    .addEventListener('click', function () {
        instance.setVal(new Date(2020, 0, 2));
    }, false);
```

### Not all days have flights

The button API provides shortcuts to value selection and confirmation. Add 'Now' or custom button to the component or entirely remove the 'Set' button to activate auto-set, which automatically closes the dialog if a date is selected.

```html
<label>
    Now
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
```

```js
var nowCal = mobiscroll.datepicker('#picker', {
    controls: ['date'],
    buttons: [{
        text: 'Now',
        handler: function () {
            nowCal.setVal(new Date());
            nowCal.close();
        }
    }, 'set', 'cancel']
});
```

```html
<label>
    Custom
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
```

```js
var customCal = mobiscroll.datepicker('#picker', {
    controls: ['date'],
    buttons: [{
            text: '05 Jan 2020',
            handler: function (event, inst) {
                customCal.setVal(new Date(2020, 0, 5));
                customCal.close();
            }
        },
        'set', 'cancel'
    ]
});
```

```html
<label>
    Auto set
    <input id="picker" mbsc-input placeholder="Please select..." />
</label>
```

```js
mobiscroll.datepicker('#picker', {
    controls: ['date'],
    buttons: [{
        text: 'Close',
        handler: 'cancel'
    }]
});
```

## 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
- [`defaultSelection`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-defaultSelection) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`buttons`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-buttons) - option
- [`close`](https://mobiscroll.com/docs/javascript/datepicker/api#method-close) - method

## Code

### JS

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

mobiscroll.datepicker('#demo', {
  controls: ['date'],
});

mobiscroll.datepicker('#default', {
  controls: ['date'],
  defaultSelection: new Date(2020, 12, 24),
});

var instance = mobiscroll.datepicker('#inline', {
  controls: ['date'],
  display: 'inline',
});

var nowCal = mobiscroll.datepicker('#now', {
  controls: ['date'],
  buttons: [
    {
      text: 'Now',
      handler: function () {
        nowCal.setVal(new Date());
        nowCal.close();
      },
    },
    'set',
    'cancel',
  ],
});

var customCal = mobiscroll.datepicker('#custom', {
  controls: ['date'],
  buttons: [
    {
      text: '05 Jan 2020',
      handler: function () {
        customCal.setVal(new Date(2020, 0, 5));
        customCal.close();
      },
    },
    'set',
    'cancel',
  ],
});

mobiscroll.datepicker('#auto', {
  buttons: [
    {
      text: 'Close',
      handler: 'cancel',
    },
  ],
});

document.getElementById('today').addEventListener(
  'click',
  function () {
    instance.setVal(new Date());
  },
  false,
);

document.getElementById('jan').addEventListener(
  'click',
  function () {
    instance.setVal(new Date(2020, 0, 2));
  },
  false,
);
```

### HTML

```html
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Controlling the default value</div>
    <label>
        Default
        <input mbsc-input id="demo" placeholder="Please Select..." />
    </label>
    <label>
        Custom default
        <input mbsc-input id="default" placeholder="Please Select..." />
    </label>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Setting a custom value</div>
    <div class="mbsc-button-group-block">
        <button mbsc-button id="jan">Set 02-01-2020</button>
        <button mbsc-button id="today">Set today</button>
    </div>
    <div id="inline"></div>
</div>
<div class="mbsc-form-group">
    <div class="mbsc-form-group-title">Buttons API</div>
    <label>
        Now
        <input mbsc-input id="now" placeholder="Please Select..." />
    </label>
    <label>
        Custom
        <input mbsc-input id="custom" placeholder="Please Select..." />
    </label>
    <label>
        Auto set
        <input mbsc-input id="auto" placeholder="Please Select..." />
    </label>
</div>
```

## Implementation notes

- Use `controls: ['date']` for the base wheel picker; the picker defaults to the current date/time (`now`) if no value or default is set.
- Set `defaultSelection` to a `Date` object (e.g. `new Date(2020, 11, 24)`) to seed the initial value shown before the user or app ever sets one - this only affects the uncontrolled initial render, not subsequent updates.
- To change the value programmatically after init: in React/Angular/Vue, update the bound `value`/`v-model`/`[(ngModel)]`; in JS/jQuery call the `setVal(date)` method on the instance, e.g. `instance.setVal(new Date())` or `instance.setVal(new Date(2020, 0, 2))`.
- Use the `buttons` array to control the footer actions: pass string shortcuts like `'set'`/`'cancel'` to keep the defaults, or objects `{ text: 'Now', handler: () => { instance.setVal(new Date()); instance.close(); } }` to add a custom action button that sets a value and closes the picker.
- Omitting the `'set'` button (e.g. `buttons: [{ text: 'Close', handler: 'cancel' }]`) makes any wheel selection apply immediately without a separate confirmation step - there is no dedicated "auto-set" option, it's simply the absence of a `'set'` button.
- The `handler` value can be a function for custom logic or the string `'cancel'`/`'set'` to reuse the built-in close/confirm 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

- Previous: [Credit card expiration](https://demo.mobiscroll.com/javascript/datetime/month-year-picker.md) - Javascript credit card expiration date select. Set up the date picker with month/year configuration.
- Next: [Timezones](https://demo.mobiscroll.com/javascript/datetime/setting-the-picker-timezone.md) - Javascript date time picker with multiple timezone support. Make selection in one TZ and return value in a different TZ.