---
title: "Javascript Calendar Programmatic Value Control Example | Mobiscroll"
component: "Calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/calendar/setting-values-defaults"
---

# Programmatic Value Control - JavaScript Calendar demo

Set a default date or update the Javascript date picker value programmatically — via bound state or custom buttons. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/calendar/setting-values-defaults)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/calendar/setting-values-defaults)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/calendar/setting-values-defaults.md), [Angular](https://demo.mobiscroll.com/angular/calendar/setting-values-defaults.md), [React](https://demo.mobiscroll.com/react/calendar/setting-values-defaults.md), [Vue](https://demo.mobiscroll.com/vue/calendar/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 monthly date picker value through defaults, runtime updates, and action buttons.
- **Header navigation** The month and year label opens the month and year picker, while the previous and next arrow buttons navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Users can navigate between months by dragging the calendar left or right.
- **Day cell states** Hovering over a date adds a gray highlight, while selecting a date adds a blue highlight. The current date remains highlighted when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.
- **Footer actions** In the input-based examples, Cancel discards the change and Set confirms the selected date.
- **Input value** Confirming a date displays it in the input using a month, day, and year format.
- **Default values** The first example group compares the default behavior with a Datepicker 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 Datepicker 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 Datepicker 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 Datepicker, 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: ['calendar']
});
```

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

```js
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    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);
```

### Setting values with buttons

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: ['calendar'],
    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: ['calendar'],
    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: ['calendar'],
    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: ['calendar'],
});

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

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

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

var customCal = mobiscroll.datepicker('#custom', {
  controls: ['calendar'],
  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: ['calendar']`. Without any value option set, the picker defaults to today.
- Set `defaultSelection` to a `Date`/date string to change the initial value shown before the user makes a selection (e.g. `defaultSelection: new Date(2020, 11, 24)`).
- The value can be updated programmatically from outside the picker: in React, set the `value` prop from component state; in Angular/Vue, assign to the `[(ngModel)]`/`v-model`-bound variable; in JS/jQuery, call `instance.setVal(date)` imperatively on the picker instance.
- Customize the footer with `buttons`, an array mixing custom button objects (`{ text: 'Now', handler: function () { inst.setVal(new Date()); inst.close(); } }`) with built-in string tokens - the predefined tokens are `'ok'`, `'set'`, `'cancel'`, and `'close'` (default `['set', 'cancel']`) - a custom button's `handler` can also be one of these strings as shorthand instead of a function, e.g. `handler: 'cancel'` to just close the picker.
- A `buttons` array containing only a single close-style button (e.g. `[{ text: 'Close', handler: 'cancel' }]`, or the built-in `['close']` token alone) effectively auto-confirms the picker's live selection without a separate "Set" step, since there's no button left to discard the change.

## 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: [Formatting Values](https://demo.mobiscroll.com/javascript/calendar/formatting-return-values.md) - Customize how dates and times appear in Javascript date picker inputs — set custom date and time formats or inherit them from locale settings.
- Next: [Timezone Configuration](https://demo.mobiscroll.com/javascript/calendar/setting-the-picker-timezone.md) - Configure data and display timezones in the Javascript date picker — with Luxon, Day.js, or moment-timezone.