Ultra-lightweight (< 1 KB core), zero-dependency Bikram Sambat (B.S.) datepicker. Drop one script tag before </body> to automatically attach a synchronized Nepali calendar to standard HTML date inputs anywhere.
Mero Miti Datepicker is a lightweight Bikram Sambat (BS) date picker for web forms. It works with standard HTML date inputs and can synchronize Gregorian (AD) and Nepali (BS) dates without adding a large UI framework. Use the examples below for vanilla JavaScript, React or Next.js, Vue, and WordPress forms.
Add one script and attach a Bikram Sambat date picker to a standard HTML date input.
Use the JavaScript API from a React effect with a normal input ref.
Integrate the browser library with Vue form inputs and your existing component lifecycle.
Load the script in a theme footer or code-injection tool and use it with common HTML forms.
Click the calendar icon or edit either input below to see live bidirectional synchronization:
Paste this snippet right before your </body> tag. It automatically upgrades all standard date inputs across your website:
<!-- 1. Drop the zero-config script before </body> --> <script src="https://meromiti.com/mero-miti.js" data-mero-miti-auto="true" data-mero-miti-auto-sync="true"> </script> <!-- 2. Standard HTML5 Date Input (Mero Miti automatically attaches a synced companion!) --> <label for="event_date">Select Date:</label> <input type="date" id="event_date" name="event_date" value="2024-09-04" />
event_date (AD) and event_date_bs (BS) to your backend!Mero Miti integrates seamlessly with any platform, CMS, or modern web framework:
Zero-Config Drop-in: Add the script tag to any webpage. Mero Miti uses a high-performance MutationObserver to automatically discover and enhance all <input type="date"> elements, even when loaded dynamically inside modals, AJAX requests, or SPA transitions.
<!-- 1. Drop the zero-config script before </body> --> <script src="https://meromiti.com/mero-miti.js" data-mero-miti-auto="true" data-mero-miti-auto-sync="true"> </script> <!-- 2. Standard HTML5 Date Input (Mero Miti automatically attaches a synced companion!) --> <label for="event_date">Select Date:</label> <input type="date" id="event_date" name="event_date" value="2024-09-04" />
Customize the behavior globally on the <script> tag, or override per-element directly on individual <input> tags:
| Attribute | Target | Options | Default | Description |
|---|---|---|---|---|
| data-mero-miti-auto | <script> | "true" | "false" | "false" | Automatically scans DOM and attaches to all date inputs. |
| data-mero-miti-auto-sync | <script> | "true" | "false" | "true" | Silently pulls newly published official BS years in background from cloud. |
| data-mero-miti-locale | <script> or <input> | "ne" | "en" | "ne" | Nepali calendar with [वि.सं.] badge or English with [B.S.] badge. |
| data-mero-miti-position | <script> or <input> | "right" | "bottom" | "right" | Places the companion beside or directly below the native input. |
| data-mero-miti-format | <script> or <input> | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD/MM/YYYY" | Mask format for the Bikram Sambat date string. |
| data-mero-miti-name | <input> | Custom string | "[input.name]_bs" | Sets the form companion input name for HTTP POST submissions. |
| data-mero-miti="false" | <input> | "false" | "none" | — | Opt-out tag to leave a specific date input as standard HTML5. |
If you only need to display today's live Nepali date, tithi, and holidays in your website header or sidebar without form picking, try our Free Nepali Date Widget. You can also explore our BS ↔ AD Date Converter and Today's Nepali Date & Panchanga.