2017-04-12 9 views
12

मैं jquery दिनांक पिकर का उपयोग कर तारीख चुनना चाहता हूं। मैं Keith-wood.name से फ़ाइल डाउनलोड करता हूं। इसमें इतनी सारी जेएस फाइलें और सीएसएस फाइलें हैं। यह मुझे भ्रमित करता है। इसलिए मैंने उस पृष्ठ में उल्लिखित jquery सेट किया है। लेकिन यह काम नहीं करता है।इस्लामी डेट पिकर कैलंडर के लिए JQuery प्लगइन को क्या जोड़ना है?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script src="js/jquery-3.1.1.js"></script> 
    <link href="css/w3.css" rel="stylesheet" /> 
    <script src="js/jquery.calendars.plus.min.js"></script> 
    <script src="js/jquery.calendars.islamic.min.js"></script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:TextBox ID="txtHijriDate" runat="server"></asp:TextBox> 
     <script> 
      $('#txtHijriDate').calendarsPicker(
      { 
       monthsToShow: [2, 3], showOtherMonths: true, 
       onSelect: function (date) { alert('You picked ' + date[0].formatDate()); } 
      }); 

      $('#pickerButton').click(function() { 
       try { 
        var calendar = $.calendars.instance($('#pickerCal').val()); 
        $('#defaultPicker').calendarsPicker('option', { calendar: calendar }). 
         calendarsPicker('showMonth', parseInt($('#pickerYear').val(), 10), 
         parseInt($('#pickerMonth').val(), 10)); 
       } 
       catch (e) { 
        alert(e); 
       } 
      }); 
     </script> 
    </form> 
</body> 
</html> 

जब मैं कंसोल पर नज़र डालें:

यहाँ मेरी कोड है।

यह Cannot read property 'regionalOptions' of undefined jquery.calendars.plus.min.js पर त्रुटि फेंकता है और

Cannot read property 'baseCalendar' of undefined jquery.calendars.islamic.min.js

+2

ऐसा इसलिए है क्योंकि आपने मूल प्लगइन लोड नहीं किया है: 'jquery.calendars.js'। – Terry

+0

http://jqueryui.com/datepicker/#localization इस –

+0

@AlfinPaul को पढ़ें, jquery-ui –

उत्तर

8

मैं आपसे सहमत हूँ डॉक्स है जोड़ने keith-wood.name थोड़ा जटिल और उलझन में है।- jQuery पुस्तकालय

  • jquery.calendars.js
  • jquery.calendars.plus.js

    • jquery.min.js:

      आप jQuery Calendars Datepicker पेज के प्रयोग खंड पर एक नज़र डालें, तो आप यह है कि आप निम्न फ़ाइलें आयात करने की आवश्यकता देखेंगे

    • jquery.plugin.js
    • jquery.calendars.picker.js
    • और jquery.calendars.picker.css (डिफ़ॉल्ट शैली)

    आप एक इस्लामी/हिजरी कैलेंडर को दिखाने के लिए है, तो आप jquery.calendars.islamic.min.js फ़ाइल जोड़ सकते हैं और calendarsPicker समारोह में calendar: $.calendars.instance('islamic') विकल्प जोड़ने के लिए है।

    यहाँ एक काम कर नमूना:

    $('#txtHijriDate').calendarsPicker({ 
     
        calendar: $.calendars.instance('islamic'), 
     
        monthsToShow: [2, 3], 
     
        showOtherMonths: true, 
     
        onSelect: function (date) { 
     
        alert('You picked ' + date[0].formatDate()); 
     
        } 
     
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script> 
     
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script> 
     
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script> 
     
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script> 
     
    <script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script> 
     
    
     
    <link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet"/> 
     
    
     
    <input type="text" id="txtHijriDate">

    अतिरिक्त नोट्स:

    आप जोड़ सकते हैं आप अपने इस्लामी कैलेंडर स्थानीय बनाना है, तो jquery.calendars.islamic-ar.js (अरबी स्थानीयकरण) या jquery.calendars.islamic-fa.js (फारसी/फारसी स्थानीयकरण)।

    आप अनुकूलित करने के लिए datepicker की शैली this page की लेआउट/स्टाइल टैब पर एक नज़र डालें जरूरत है, यह प्रदान की विषयों (जैसे redmond.calendars.picker.css) और कैसे वे jQuery यूआई विषयों के साथ मिलकर काम में से एक जोड़ने का तरीका बताता।

  • 1

    Please visit this page

    ड्रॉप-डाउन शब्द के पास 'एक पॉपअप या इनलाइन कैलेंडर से एक तिथि का चयन करें' सूची से - चुना ' अरबी'। यदि कार्यक्षमता जो यह बॉक्स के बाहर प्रदान करती है तो आपके लक्ष्य के लिए ठीक है - तो शायद मैं कुछ निर्देश दे सकता हूं कि इसे कैसे इंस्टॉल किया जाए।^_^यदि इस्लामिक तिथियों में अधिक बदलाव और जटिल नियमों की आवश्यकता होती है - तो मेरा जवाब बेकार होगा। उसके बाद

    1. jQuery
    2. jQuertUI
    3. jquery.ui.datepicker-ar.js

    आप अरबी स्थानीयकरण का उपयोग कर सकते हैं:

    इस क्रम में अपने पेज में वहाँ पुस्तकालयों कनेक्ट । आप एक जगह है जहाँ आप छोड़ दिया में यह आह्वान अपने

    इस तरह से करना

    $(function() { 
        $("#datepicker").datepicker($.datepicker.regional[ "ar" ]); 
    }); 
    

    datepicker इनपुट

    <input type="text" id="datepicker"> 
    
    +0

    नीचे दिए गए कोड को अपडेट करें –

    +0

    मैं आपका कोड जांचता हूं। यह काम कर रहा है, लेकिन जब मैं तिथि चुनता हूं, तो यह स्वचालित रूप से अंग्रेजी कैलेंडर में परिवर्तित हो जाता है। मेरे मामले में इसे केवल अरबी कैलेंडर प्रदर्शित करना चाहिए –

    3

    यात्रा Datepicker Widget और स्थानीयकरण के लिए जाने के लिए और देखने के विभिन्न विकल्पों

    भी देखें official working example

    पेज में इस जे एस जो स्थानीयकरण

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>

    के लिए और स्निपेट में देखते हैं कि कैसे भाषा, पर प्रारंभ करने में

    $(function() { 
     
        $('#adverts_eventDate').datepicker($.extend({}, $.datepicker.regional['ar'], { //initialize language 
     
        showButtonPanel: true, 
     
        dateFormat: 'dd-mm-yy' 
     
        })); 
     
    });
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
     
    <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
     
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
     
    <link rel="stylesheet" type="text/css" href="https://codeorigin.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css"> 
     
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script> 
     
    <input type="text" id="adverts_eventDate" />

    1

    कृपया कोडपेन के इस लिंक पर जाएं। इस जावास्क्रिप्ट कोड का प्रयोग करें। यह बहुत ही सरल और हल्के इस्लामी दिनांक पिकर है। ग्रेगोरियन हिजरी कैलेंडर कनवर्टर के लिए लाइटवेट डेटपिकर [https: //codepen.io/zulns/pen/adqQjq]

    संबंधित मुद्दे