nb-date-picker

<template>
  <NbDatePicker
    nb-id="datepicker-test"
    input-name="test"
    input-type="date"
    :input-text="invalidValue"
    @changed="onValueChanged"
  />
</template>

<script setup>
import { ref } from 'vue'

// Invalid format - will be cleared
const invalidValue = ref('invalid-date-string')

const onValueChanged = (value) => {
  console.log('Value:', value)
  // If invalidValue was 'invalid-date-string', 
  // value will be '' (cleared)
  // If invalidValue was null or '', 
  // value will be '' (accepted as empty, not cleared)
}
</script>

<template>
  <div>
    <!-- This will be accepted as empty (not cleared) -->
    <NbDatePicker
      nb-id="datepicker-empty"
      input-name="empty"
      input-type="date"
      :input-text="null"
      @changed="(v) => console.log('Empty:', v)"
    />
    
    <!-- This will be cleared (invalid format) -->
    <NbDatePicker
      nb-id="datepicker-invalid"
      input-name="invalid"
      input-type="date"
      input-text="not-a-date"
      @changed="(v) => console.log('Cleared:', v)"
    />
  </div>
</template>

<template>
  <NbDatePicker
    nb-id="datepicker-api"
    input-name="api-date"
    input-type="datetime-local"
    :input-text="apiResponse.date"
    @changed="handleDateChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const apiResponse = ref({
  date: '2026-01-09T21:07:50.624+00:00' // Valid ISO - will be normalized
  // date: 'invalid' // Invalid - will be cleared to ''
  // date: null // Valid empty - will be accepted as ''
})

const handleDateChange = (value) => {
  // value will always be a valid format or empty string
  // Never an invalid format
  if (value) {
    // Process valid date
    console.log('Valid date:', value)
  } else {
    // Handle empty state
    console.log('Empty or cleared')
  }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-timezone"
    input-name="datetime"
    input-type="datetime-local"
    :input-text="localDateTime"
    @changed="handleDateTimeChange"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import { format, parseISO } from 'date-fns'
import { zonedTimeToUtc, utcToZonedTime, format as formatTz } from 'date-fns-tz'

// Example: You have a UTC datetime from API
const utcDateTime = ref('2026-01-09T21:07:50.624Z')

// Convert UTC to a specific timezone (e.g., 'America/Sao_Paulo')
const timezone = 'America/Sao_Paulo'
const zonedDate = computed(() => {
  if (!utcDateTime.value) return null
  return utcToZonedTime(parseISO(utcDateTime.value), timezone)
})

// Format for datetime-local (no timezone info)
const localDateTime = computed(() => {
  if (!zonedDate.value) return null
  return format(zonedDate.value, "yyyy-MM-dd'T'HH:mm:ss")
})

const handleDateTimeChange = (value) => {
  // value is in datetime-local format (user's local timezone)
  // If you need to convert back to UTC or specific timezone:
  if (value) {
    const date = parseISO(value)
    const utcDate = zonedTimeToUtc(date, timezone)
    console.log('UTC:', utcDate.toISOString())
  }
}
</script>

<template>
  <div>
    <NbDatePicker
      nb-id="datepicker-utc"
      input-name="datetime"
      input-type="datetime-local"
      :input-text="localValue"
      @changed="handleChange"
    />
    <p>Display in UTC: {{ displayInUTC }}</p>
    <p>Display in São Paulo: {{ displayInSP }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { parseISO } from 'date-fns'
import { format as formatTz, utcToZonedTime } from 'date-fns-tz'

const localValue = ref('2026-01-09T21:07:50')

const displayInUTC = computed(() => {
  if (!localValue.value) return ''
  const date = parseISO(localValue.value)
  return formatTz(date, 'yyyy-MM-dd HH:mm:ss', { timeZone: 'UTC' })
})

const displayInSP = computed(() => {
  if (!localValue.value) return ''
  const date = parseISO(localValue.value)
  return formatTz(date, 'yyyy-MM-dd HH:mm:ss', { timeZone: 'America/Sao_Paulo' })
})

const handleChange = (value) => {
  localValue.value = value
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-dayjs"
    input-name="datetime"
    input-type="datetime-local"
    :input-text="localDateTime"
    @changed="handleChange"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(utc)
dayjs.extend(timezone)

// Example: UTC datetime from API
const utcDateTime = ref('2026-01-09T21:07:50.624Z')

// Convert to specific timezone and format for datetime-local
const localDateTime = computed(() => {
  if (!utcDateTime.value) return null
  return dayjs(utcDateTime.value)
    .tz('America/Sao_Paulo')
    .format('YYYY-MM-DDTHH:mm:ss')
})

const handleChange = (value) => {
  if (value) {
    // Convert back to UTC
    const utcValue = dayjs(value).tz('America/Sao_Paulo').utc().toISOString()
    console.log('UTC:', utcValue)
  }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-moment"
    input-name="datetime"
    input-type="datetime-local"
    :input-text="localDateTime"
    @changed="handleChange"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import moment from 'moment-timezone'

// Example: UTC datetime from API
const utcDateTime = ref('2026-01-09T21:07:50.624Z')

// Convert to specific timezone and format for datetime-local
const localDateTime = computed(() => {
  if (!utcDateTime.value) return null
  return moment(utcDateTime.value)
    .tz('America/Sao_Paulo')
    .format('YYYY-MM-DDTHH:mm:ss')
})

const handleChange = (value) => {
  if (value) {
    // Convert back to UTC
    const utcValue = moment(value)
      .tz('America/Sao_Paulo')
      .utc()
      .toISOString()
    console.log('UTC:', utcValue)
  }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-workflow"
    input-name="datetime"
    input-type="datetime-local"
    :input-text="displayDateTime"
    @changed="handleDateTimeChange"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import { format, parseISO } from 'date-fns'
import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'

// 1. UTC datetime from API/backend
const apiDateTime = ref('2026-01-09T21:07:50.624Z')
const userTimezone = 'America/Sao_Paulo'

// 2. Convert UTC to user's timezone for display
const displayDateTime = computed(() => {
  if (!apiDateTime.value) return null
  const utcDate = parseISO(apiDateTime.value)
  const zonedDate = utcToZonedTime(utcDate, userTimezone)
  return format(zonedDate, "yyyy-MM-dd'T'HH:mm:ss")
})

// 3. Handle user selection and convert back to UTC
const handleDateTimeChange = async (value) => {
  if (value) {
    // Parse the datetime-local value (assumed to be in user's timezone)
    const localDate = parseISO(value)
    
    // Convert back to UTC
    const utcDate = zonedTimeToUtc(localDate, userTimezone)
    
    // Send to backend
    const utcISOString = utcDate.toISOString()
    console.log('Sending to backend:', utcISOString)
    
    // await saveToBackend(utcISOString)
  }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-validation"
    input-name="validation-test"
    input-type="date"
    :input-text="dateValue"
    :min="'2024-01-01'"
    :max="'2024-12-31'"
    :required="true"
    @valid="handleValidation"
  />
  <p>Is Valid: {{ isValid ? 'Yes' : 'No' }}</p>
</template>

<script setup>
import { ref } from 'vue'

const dateValue = ref('2024-06-15')
const isValid = ref(true)

const handleValidation = (valid) => {
  isValid.value = valid
  console.log('Value is valid:', valid)
  
  if (!valid) {
    console.log('Current value is invalid. Check format and min/max constraints.')
  }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-required"
    input-name="required-date"
    input-type="date"
    :input-text="dateValue"
    :required="true"
    @valid="handleValidation"
  />
</template>

<script setup>
import { ref } from 'vue'

const dateValue = ref('') // Empty value

const handleValidation = (valid) => {
  // When required=true and value is empty, valid will be false
  console.log('Is valid:', valid) // false
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-optional"
    input-name="optional-date"
    input-type="date"
    :input-text="dateValue"
    :required="false"
    @valid="handleValidation"
  />
</template>

<script setup>
import { ref } from 'vue'

const dateValue = ref('') // Empty value

const handleValidation = (valid) => {
  // When required=false and value is empty, valid will be true (optional field)
  console.log('Is valid:', valid) // true
}
</script>

<template>
  <div>
    <NbDatePicker
      nb-id="datepicker-realtime"
      input-name="realtime-date"
      input-type="datetime-local"
      :input-text="dateTimeValue"
      :min="'2024-01-01T00:00'"
      :max="'2024-12-31T23:59'"
      @valid="handleValidation"
    />
    <div v-if="!isValid" style="color: red;">
      Invalid date/time. Please select a value between {{ min }} and {{ max }}.
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const dateTimeValue = ref('2024-06-15T12:00')
const isValid = ref(true)
const min = ref('2024-01-01T00:00')
const max = ref('2024-12-31T23:59')

const handleValidation = (valid) => {
  isValid.value = valid
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-selection"
    input-name="date"
    input-type="date"
    @date-selected="handleDateSelected"
  />
</template>

<script setup>
const handleDateSelected = (data) => {
  console.log('Date selected:', data)
  // For date: { date: Date, dateString: "2024-01-15", isoString: "2024-01-15T00:00:00.000Z", ... }
  // For datetime-local: { date: Date, hour: 14, minute: 30, isoString: "2024-01-15T17:30:00.000Z", ... }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-month-nav"
    input-name="date"
    input-type="date"
    @month-changed="handleMonthChanged"
  />
</template>

<script setup>
const handleMonthChanged = (data) => {
  console.log('Month changed:', data)
  // Example output: { year: 2024, month: 0, monthName: "January" }
  // or: { year: 2024, month: 0, monthName: "Janeiro" } (if locale="pt-BR")
}
</script>

<nb-date-picker nb-id="datepicker-1" input-name="date">
  <template #message>
    <span>Custom error message</span>
  </template>
</nb-date-picker>

<template>
  <NbDatePicker
    nb-id="datepicker-basic"
    input-name="date"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-range"
    input-name="date-range"
    :allow-range="true"
    :use-custom-calendar="true"
    @changed="onRangeChanged"
  />
</template>

<script setup>
const onRangeChanged = (value) => {
  console.log('Selected range:', value)
  // value will be: { startDate: Date, endDate: Date }
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-week"
    input-name="week"
    input-type="week"
    @changed="onWeekChanged"
  />
</template>

<script setup>
const onWeekChanged = (value) => {
  console.log('Selected week:', value) // Format: YYYY-Www
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-month"
    input-name="month"
    input-type="month"
    @changed="onMonthChanged"
  />
</template>

<script setup>
const onMonthChanged = (value) => {
  console.log('Selected month:', value) // Format: YYYY-MM
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-time"
    input-name="time"
    input-type="time"
    @changed="onTimeChanged"
  />
</template>

<script setup>
const onTimeChanged = (value) => {
  console.log('Selected time:', value) // Format: HH:mm or HH:mm:ss
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-datetime"
    input-name="datetime"
    input-type="datetime-local"
    @changed="onDateTimeChanged"
  />
</template>

<script setup>
const onDateTimeChanged = (value) => {
  console.log('Selected datetime:', value) // Format: YYYY-MM-DDTHH:mm
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-label"
    input-name="date"
    :show-label="true"
    label="Select a date"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-dark"
    input-name="date"
    theme="dark"
    :input-width="300"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-limited"
    input-name="date"
    min="2024-01-01"
    max="2024-12-31"
    :step="7"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-native"
    input-name="date"
    :use-custom-calendar="false"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-custom"
    input-name="date"
    :has-border-radius="true"
    :border-radius="0.8"
    input-style="border"
    :input-width="250"
    text-align="center"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-message"
    input-name="date"
    :show-msg="true"
    :has-msg="true"
    message="Please select a valid date"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>

<template>
  <NbDatePicker
    nb-id="datepicker-locale"
    input-name="date"
    locale="en-US"
    @changed="onDateChanged"
  />
</template>

<script setup>
const onDateChanged = (value) => {
  console.log('Selected date:', value)
}
</script>