NepaliDatePicker.Avalonia 1.0.2

NepaliDatePicker — Avalonia

A Bikram Sambat (BS) date picker for Avalonia UI, built on a Material Design calendar. Supports desktop (Windows, macOS, Linux) via a dialog window and mobile (Android, iOS) via a full-screen overlay. Includes a text-field-style input control, programmatic service API, Devanagari script rendering, and full color theming.

Platform support

Installation

dotnet add package NepaliDatePicker.Avalonia

Add the AXAML namespace where needed:

xmlns:npd="clr-namespace:NepaliDatePicker.Controls;assembly=NepaliDatePicker.Avalonia"

NepaliDatePickerField — text-field input

A tappable date field that opens the picker on click/tap and fills with the selected date. Renders a placeholder when empty and adapts border color when a date is selected. Supports light and dark themes.

<npd:NepaliDatePickerField
    Label="Date of Birth"
    PlaceholderText="Select a BS date…"
    DateSelected="OnDateSelected" />

With theming:

<npd:NepaliDatePickerField
    Label="Payment Date"
    PlaceholderText="Select a BS date…"
    PickerOptions="{Binding TealOptions}"
    DateSelected="OnDateSelected" />

Properties

Event

NepaliDatePickerButton — button trigger

A full-width button that opens the picker and shows the selected date as its text.

<npd:NepaliDatePickerButton
    ButtonText="Pick a date"
    PickerOptions="{Binding Options}"
    DateSelected="OnDateSelected" />

Programmatic usage — INepaliDatePickerService

Use the service when you need to open the picker from code (e.g., on a gesture, from a ViewModel, or tied to a color swatch).

// Constructor injection (or resolve from DI)
private readonly INepaliDatePickerService _picker = new NepaliDatePickerService();

private async void OnButtonClicked()
{
    var opts = new NepaliDatePickerOptions
    {
        UseNepaliScript       = true,
        PickerStyle           = PickerStyle.Calendar,
        PrimaryColor          = Color.Parse("#00695C"),
        HeaderBackgroundColor = Color.Parse("#00695C"),
    };

    NepaliDate? result = await _picker.ShowAsync(initialDate: null, options: opts);
    if (result is not null)
        SelectedDate = result;
}

From AXAML code-behind using a Visual anchor (avoids DI requirement):

// On any event handler where 'this' is a Visual inside the window/activity:
var result = await NepaliPickerOverlay.ShowAsync(this, currentDate, options);

NepaliDatePickerOptions

All color properties are nullable — unset values fall back to Material Design 3 defaults.

Behaviour

Palette

PickerStyle enum

Nepali script mode (UseNepaliScript)

When enabled:

• Month names: "Baisakh" → "बैशाख"
• Day numbers: 1–32 → १–३२
• Year: 2082 → २०८२
• Weekday headers: S M T W T F S → आइ सो मं बु बि शु श

Theme-aware resources (App.axaml)

Add these to your App.axaml so card backgrounds adapt automatically in dark mode:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="AppCardBackground"  Color="#FFFFFF" />
                <SolidColorBrush x:Key="AppCardBorder"       Color="#E5E0EB" />
                <SolidColorBrush x:Key="AppTintBackground"   Color="#F5F0FF" />
                <SolidColorBrush x:Key="AppSubtleTint"       Color="#F0F4FF" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="AppCardBackground"  Color="#2B2930" />
                <SolidColorBrush x:Key="AppCardBorder"       Color="#47434E" />
                <SolidColorBrush x:Key="AppTintBackground"   Color="#2D2538" />
                <SolidColorBrush x:Key="AppSubtleTint"       Color="#252A38" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Use them in AXAML with {DynamicResource AppCardBackground} etc.

Safe area (Android / iOS)

Apply system bar insets in your main view so content doesn't overlap the status bar on Android 15+ (edge-to-edge is mandatory) or the home indicator on iOS:

protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
{
    base.OnAttachedToVisualTree(e);
    var topLevel = TopLevel.GetTopLevel(this);
    if (topLevel?.InsetsManager is { } mgr)
    {
        void Apply(Thickness insets) =>
            RootScrollViewer.Padding = new Thickness(0, insets.Top, 0, insets.Bottom);
        Apply(mgr.SafeAreaPadding);
        mgr.SafeAreaChanged += (_, args) => Apply(args.SafeAreaPadding);
    }
}

Project layout

src/avalonia/                          ← Avalonia NuGet library
│  NepaliDatePicker.Avalonia.csproj
│
├─ Controls/
│   NepaliDatePickerField.cs           text-field input control
│   NepaliDatePickerButton.cs          button trigger control
│   NepaliDatePickerView.cs            calendar / input picker UI
│   NepaliDatePickerWindow.cs          desktop dialog window
│   NepaliPickerOverlay.cs             shared overlay helper (desktop + mobile)
│
├─ Models/
│   NepaliDatePickerOptions.cs
│
└─ Services/
    INepaliDatePickerService.cs
    NepaliDatePickerService.cs

example/avalonia/                      ← demo Avalonia app
├─ Views/MainView.axaml                full-featured showcase
├─ desktop/                            Windows / macOS / Linux entry point
├─ android/                            Android activity
└─ ios/                                iOS app delegate

License

MIT