Datepicker

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('datepicker-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-datepicker placeholder="Select a date"></uwc-datepicker>`;
  }
}

import React from 'react';
import { UwcDatepicker } from '@uwc/components/react';

export default function App() {
  return <UwcDatepicker placeholder="Select a date" />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-datepicker placeholder="Select a date"></uwc-datepicker>`
})
export class AppComponent {}

export default {
  template: `<uwc-datepicker placeholder="Select a date"></uwc-datepicker>`
};

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('datepicker-controlled-demo')
export class AppDemo extends LitElement {
  static styles = css`
    :host { display: block; }
    p { margin: .75rem 0 0; font-size: .875rem; color: #374151; }
    strong { color: #6366f1; }
  `;

  @state() value: Date | null = null;

  render() {
    return html`
      <uwc-datepicker
        placeholder="Pick a date"
        @uwc-date-select=${(e) => { this.value = e.detail.value; }}>
      </uwc-datepicker>
      <p>Selected: <strong>${this.value ? this.value.toLocaleDateString() : 'none'}</strong></p>
    `;
  }
}

import React, { useState } from 'react';
import { UwcDatepicker } from '@uwc/components/react';

export default function App() {
  const [value, setValue] = useState(null);
  return (
    <>
      <UwcDatepicker
        placeholder="Pick a date"
        onUwcDateSelect={(e) => setValue(e.detail.value)}
      />
      <p>Selected: <strong>{value ? value.toLocaleDateString() : 'none'}</strong></p>
    </>
  );
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <uwc-datepicker
      placeholder="Pick a date"
      (uwc-date-select)="value.set($event.detail.value)">
    </uwc-datepicker>
    <p>Selected: <strong>{{ value() ? value().toLocaleDateString() : 'none' }}</strong></p>
  `
})
export class AppComponent {
  readonly value = signal<Date | null>(null);
}

export default {
  data() {
    return { value: null };
  },
  template: `
    <uwc-datepicker
      placeholder="Pick a date"
      @uwc-date-select="value = $event.detail.value">
    </uwc-datepicker>
    <p>Selected: <strong>{{ value ? value.toLocaleDateString() : 'none' }}</strong></p>
  `
};

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('datepicker-range-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <uwc-datepicker selection-mode="range" placeholder="Select date range"></uwc-datepicker>
    `;
  }
}

import React from 'react';
import { UwcDatepicker } from '@uwc/components/react';

export default function App() {
  return <UwcDatepicker selectionMode="range" placeholder="Select date range" />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-datepicker selection-mode="range" placeholder="Select date range"></uwc-datepicker>`
})
export class AppComponent {}

export default {
  template: `<uwc-datepicker selection-mode="range" placeholder="Select date range"></uwc-datepicker>`
};

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('datepicker-inline-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-datepicker inline></uwc-datepicker>`;
  }
}

import React from 'react';
import { UwcDatepicker } from '@uwc/components/react';

export default function App() {
  return <UwcDatepicker inline />;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-datepicker inline></uwc-datepicker>`
})
export class AppComponent {}

export default {
  template: `<uwc-datepicker inline></uwc-datepicker>`
};