DayPilot.Navigator.selectionDay

The selectionDay property (DayPilot.Date) holds the day that was clicked when selecting the current range in the Navigator.

This property is read-only. To change the selected day and range, use the select() method.

Declaration

DayPilot.Navigator.selectionDay

Examples

JavaScript

const nav = new DayPilot.Navigator("dp", {
  selectMode: "Week",
  // ...
});
nav.init();

nav.select("2026-03-10");
const selectedDay = nav.selectionDay;
// selectionDay: 2026-03-10
console.log(selectedDay.toString());

Angular

<daypilot-navigator [config]="config"></daypilot-navigator>

config: DayPilot.NavigatorConfig = {
  selectMode: "Week",
  // ...
};

// using a component reference named navigator
this.navigator.control.select("2026-03-10");
console.log(this.navigator.control.selectionDay);

React

import { useRef } from "react";

const navigatorRef = useRef();

<DayPilotNavigator
  ref={navigatorRef}
  selectMode="Week"
  {/* ... */}
/>

navigatorRef.current.control.select("2026-03-10");
console.log(navigatorRef.current.control.selectionDay);

Vue

<script setup>
import { ref } from "vue";

const navigatorRef = ref(null);
</script>

<template>
  <DayPilotNavigator
    ref="navigatorRef"
    selectMode="Week"
    <!-- ... -->
  />
</template>

navigatorRef.value.control.select("2026-03-10");
console.log(navigatorRef.value.control.selectionDay);

See Also

DayPilot.Navigator.selectionStart

DayPilot.Navigator.selectionEnd

DayPilot.Navigator.select()

DayPilot.Navigator Class