मैं jQuery UI Datepicker का स्थानीयकरण कैसे करूं?

Question

मुझे वास्तव में स्थानीयकृत ड्रॉपडाउन कैलेंडर की आवश्यकता है। एक अंग्रेजी कैलेंडर नॉर्वे की वेबसाइट पर उत्कृष्टता का संचार नहीं करता ;-)

मैंने jQuery DatePicker के साथ प्रयोग किया है , उनकी वेबसाइट का कहना है कि इसे स्थानीयकृत किया जा सकता है, हालांकि यह काम नहीं करता है।

मैं ASPNET.MVC का उपयोग कर रहा हूं, और मैं वास्तव में एक जावास्क्रिप्ट लाइब्रेरी से चिपकना चाहता हूं। इस मामले में jQuery।

अजाक्स टूलकिट कैलेंडर स्वीकार्य होगा, यदि केवल यह भी नॉर्वेजियन नामों को प्रदर्शित करेगा।

अद्यतन: बहुत बढ़िया! मुझे लगता है मैं भाषा फ़ाइलों को याद कर रहा हूँ, इतना छोटा विस्तार नहीं :-)

Comments

की जाँच करें इस डेमो। स्रोत यह कैसे करना है का एक अच्छा उदाहरण देता है।

— थॉमस वाटरडल

Answer 1

उन लोगों के लिए जो अभी भी समस्याएं हैं, आपको यहां से अपनी इच्छित भाषा फ़ाइल डाउनलोड करनी होगी:

https://github.com/jquery/jquery-ui/tree/master/ui/i18n

और फिर इसे अपने पेज में इस तरह शामिल करें उदाहरण के लिए (इतालवी भाषा):

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>

फिर zilverdistel के कोड का उपयोग करें : D

Comments

क्या यह लिंक jQuery UI पृष्ठ पर गायब है? मैं इसे jqueryui.com/datepicker/#localization

— एडम

Answer 2

मैंने डेमो का पता लगाया और इसे निम्नलिखित तरीके से लागू किया:

$.datepicker.setDefaults(
  $.extend(
    {'dateFormat':'dd-mm-yy'},
    $.datepicker.regional['nl']
  )
);

मुझे डेटफॉर्म के लिए भी डिफॉल्ट सेट करना होगा ...

Comments

इसने मेरे लिए काम किया:$.datepicker.setDefaults($.datepicker.regional["uk"]);

— 7

Answer 3

स्ट्रिंग $.datepicker.regional['it']सभी शब्दों का अनुवाद नहीं करती है।

तारीख के अनुवाद के लिए आपको कुछ चर निर्दिष्ट करने होंगे:

$.datepicker.regional['it'] = {
    closeText: 'Chiudi', // set a close button text
    currentText: 'Oggi', // set today text
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno',   'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'], // set month names
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'], // set short month names
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'], // set days names
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'], // set short day names
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'], // set more short days names
    dateFormat: 'dd/mm/yy' // set format date
};

$.datepicker.setDefaults($.datepicker.regional['it']);

$(".datepicker").datepicker();

इस मामले में आपकी तारीख का ठीक से अनुवाद किया गया है।

Comments

यह उत्तर दिखाता है कि पुस्तकालयों को आयात किए बिना, सीधे स्थानीयकरण को कैसे जोड़ा जाए। यह वह विधि है जिसकी मुझे आवश्यकता थी क्योंकि मैं $.getScript()Google की होस्ट की गई API पर मुख्य पुस्तकालय लाने के लिए jQuery का उपयोग कर रहा हूं ।

— अलेक्जेंडर डिक्सन

Answer 4

  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "<上月",
    nextText: "下月>",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

i18n कोड https://github.com/jquery/jquery-ui/tree/master/ui/18n से कॉपी किया जा सकता है

Answer 5

1. आपको jQuery UI i18n फ़ाइलों को लोड करने की आवश्यकता है:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>

2.$.datepicker.setDefaults सभी तिथि-निर्धारणकर्ताओं के लिए डिफॉल्ट सेट करने के लिए फ़ंक्शन का उपयोग करें।

3. यदि आप चूक का उपयोग करने से पहले सेटिंग (एस) को ओवरराइड करना चाहते हैं तो आप इसका उपयोग कर सकते हैं:

var options = $.extend(
    {},                                  // empty object
    $.datepicker.regional["fr"],         // fr regional
    { dateFormat: "d MM, y" /*, ... */ } // your custom options
);
$.datepicker.setDefaults(options);

jQuery.extendकाम करने के तरीके के कारण मापदंडों का क्रम महत्वपूर्ण है । दो गलत उदाहरण:

/*
 * This overwrites the global variable itself instead of creating a
 * customized copy of french regional settings
 */
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"});

/*
 * The desired dateFormat is overwritten by french regional 
 * settings' date format
 */
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]);

Answer 6

यहाँ उदाहरण है कि आप कुछ अतिरिक्त पुस्तकालय के बिना स्थानीयकरण कैसे कर सकते हैं।

jQuery(function($) {
  $('input.datetimepicker').datepicker({
    duration: '',
    changeMonth: false,
    changeYear: false,
    yearRange: '2010:2020',
    showTime: false,
    time24h: true
  });

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '<Dříve',
    nextText: 'Později>',
    currentText: 'Nyní',
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
      'září', 'říjen', 'listopad', 'prosinec'
    ],
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    weekHeader: 'Týd',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['cs']);
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script src="datepicker-cs.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      console.log("test");
      $("#test").datepicker({
        dateFormat: "dd.m.yy",
        minDate: 0,
        showOtherMonths: true,
        firstDay: 1
      });
    });
  </script>
</head>

<body>
  <h1>Here is your datepicker</h1>
  <input id="test" type="text" />
</body>
</html>

Answer 7

यदि आप एक ही परियोजना पर jQuery के UI की तारीख और क्षणों का उपयोग करते हैं, तो आपको क्षण भर में पिगबैकबैक करना चाहिए।

// Finnish. you need to include separate locale file for each locale: https://github.com/moment/moment/tree/develop/locale
moment.locale('fi'); 

// fetch locale data internal structure, so we can shove it inside jQuery UI
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = {
    monthNames: momentLocaleData._months,
    monthNamesShort: momentLocaleData._monthsShort,
    dayNames: momentLocaleData._weekdays,
    dayNamesShort: momentLocaleData._weekdaysMin,
    dayNamesMin: momentLocaleData._weekdaysMin,
    firstDay: momentLocaleData._week.dow,
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (https://github.com/moment/moment/issues/890)
};

$.datepicker.setDefaults($.datepicker.regional['user']);

Answer 8

बस किसी के मामले में जब भी कोई इस पर अटक जाता है, अन्य उत्तरों के बावजूद, मैंने इसे हल किया है:

$.datepicker.setDefaults($.datepicker.regional['en-GB']);

अतिरिक्त 'जीबी' पर ध्यान दें। उसके पश्चात इसने ठीक से काम किया।

Answer 9

यह समाधान मदद कर सकता है।

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});

#ui-datepicker-div {
  font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>

Answer 10

मैंने इसे संपत्ति जोड़कर हल किया data-date-language="it":

$(document).ready(function() {
  $('#TxtDaDataDoc_Val').datepicker();
});

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group col-xs-2 col-sm-2 col-md-2">
    <div class="input-group input-append date form-group" 
        id="TxtDaDataDoc" data-date-language="it">
        <input type="text" class="form-control" name="date" 
               id="TxtDaDataDoc_Val" runat="server" />
        <span class="input-group-addon add-on">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

Answer 11

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src=">/js/datepicker-fr.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});
});

</script>

<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker($.datepicker.regional['fr']);
});
</script>

Answer 12

$ .datepicker.regional ["vi-VN"] = {closeText: "ngóng", prevText: "Trước", nextText: "Sau", currentText: "Hôtay", monthNames: ["Tháng một", "Tháng hai" "," बैंग बा "," थैग टीएयू "," थॉट एनएएलएम "," थैंग साऊ "," थैंग बोय "," थैंग टीएमएम "," थान चिन "," थोंग मॉनी "," थिंग म्यू " mư mi hai "], माहनामशॉर्ट: [" M "t "," Hai "," Ba "," B "n "," Năm "," Sáu "," Bảy "," Tám "," Chín "," Mười "," Mười " mt "," Mười hai "], दिननाम: ["Ch nh "t "," Thứ hai "," Th "ba", "Thứ tư", "Th" năm "," Thứ sáu "," Thứ bảy "], dayNameshort: [" CN "," Hai "," Ba ",। "Tư", "Năm", "Sáu", "B "y"], दिननामिन: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"], वीक हैडर। : "Tu "n", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNMMin: ["CN", "T2", "T3", "T4" , "T5", "T6", "T7"], सप्ताहहैडर: "Tuần", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNMMin: ["CN", "T2", "T3", "T4" , "T5", "T6", "T7"], सप्ताहहैडर: "Tuần", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};सप्ताहहैडर: "ट्यून", डेटफ़ॉर्मैट: "डीडी / एमएम / य़ी", फर्स्टडे: 1, आइएसआरटीएल: गलत, शोमार्टर बाद: वर्ष: गलत, वर्षफिक्स: ""};सप्ताहहैडर: "ट्यून", डेटफ़ॉर्मैट: "डीडी / एमएम / य़ी", फर्स्टडे: 1, आइएसआरटीएल: गलत, शोमार्टर बाद: वर्ष: गलत, वर्षफिक्स: ""};

        $.datepicker.setDefaults($.datepicker.regional["vi-VN"]);