पात्रोआजको नेपाली मितिकन्भर्टरइभेन्ट्सहरुशुभ साइतसुन/चाँदीIPO / सेयरविदेशी विनिमयब्लगएप्स
🌐 भाषा:
🎨 थिम:
Home/नेपाली मिति पिकर लाइब्रेरी

मेरो मिति पिकर (Mero Miti Datepicker)

v1.3.0 · < 1 KB Engine🏢Inline Tech Solution को उत्पादन↗

कुनै पनि वेबसाइट वा वेब एपमा एक लाइन स्क्रिप्ट थपेर तुरुन्तै Bikram Sambat (वि.सं.) क्यालेन्डर पिकर जडान गर्नुहोस्। स्वचालित दुई-तर्फी इसवी संवत् (A.D.) रूपान्तरण, शून्य डिपेन्डेन्सी, र पूर्णतया निःशुल्क।

१. प्रत्यक्ष परीक्षण (Live Interactive Demo)

Interactive

तलको इनपुटमा क्लिक गरेर वा मिति छानेर हेर्नुहोस्। Gregorian (A.D.) र नेपाली (B.S.) दुबै आफैं सिङ्क हुन्छन्:

✨ Notice: The companion input shares the exact vertical baseline with zero vertical staggering!
भाषा / ढाँचा (Locale & Badge):
स्थान (Companion Position):
मिति ढाँचा (Date Format):
क्लाउड अटो-सिङ्क (Cloud Auto-Sync):

२. तयारी कोड (Copy Ready Snippet)

यो कोड आफ्नो HTML फाइलको </body> अगाडि पेस्ट गर्नुहोस्। फर्मका सबै <input type="date"> हरूमा आफैं नेपाली क्यालेन्डर थपिनेछ:

<!-- 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" />
💡 Form Submission Tip: When submitting forms, Mero Miti automatically transmits both event_date (AD) and event_date_bs (BS) to your backend!

कसरी प्रयोग गर्ने (How to Implement Anywhere)

Mero Miti जुनसुकै प्रविधि, CMS वा फ्रेमवर्कसँग सजिलै काम गर्छ:

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" />

HTML5 Data Attributes सन्दर्भ (Configuration Reference)

Customize the behavior globally on the <script> tag, or override per-element directly on individual <input> tags:

AttributeTargetOptionsDefaultDescription
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.