আমি কীভাবে jQuery UI তারিখপিকারকে স্থানীয়করণ করব?

Question

আমার সত্যিই একটি স্থানীয় ড্রপডাউন ক্যালেন্ডার দরকার। একটি ইংরেজি ক্যালেন্ডার হ'ল নরওয়ের ওয়েবসাইটে;

আমি jQuery ডেটপিকারের সাথে পরীক্ষা-নিরীক্ষা করেছি , তাদের ওয়েবসাইট বলছে এটি স্থানীয় করা যেতে পারে, তবে এটি কাজ করে বলে মনে হয় না।

আমি এএসপনেট.এমভিসি ব্যবহার করছি এবং আমি সত্যিই একটি জাভাস্ক্রিপ্ট লাইব্রেরিতে আটকে থাকতে চাই। এই ক্ষেত্রে jQuery।

এজাক্স টুলকিট ক্যালেন্ডারটি গ্রহণযোগ্য হবে, যদি কেবল এটিরও নরওয়ের নাম প্রদর্শিত হয়।

আপডেট: দুর্দান্ত! আমি দেখতে পাচ্ছি যে আমি ভাষার ফাইলগুলি অনুপস্থিত minor

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>

তারপরে জিলভারডিসটেলের কোড ব্যবহার করুন : ডি

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"]);

— ৩৮

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()গুগলের হোস্টেড এপিআইতে মূল লাইব্রেরি আনতে 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: "年"
  });

আই 18 এন কোডটি https://github.com/jquery/jquery-ui/tree/master/ui/i18n থেকে অনুলিপি করা যায়

Answer 5

1. আপনার jQuery UI আই 18n ফাইলগুলি লোড করতে হবে:

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

২.$.datepicker.setDefaults সমস্ত ডেটপিকারদের জন্য খেলাপি স্থির করতে ফাংশনটি ব্যবহার করুন ।

৩. যদি আপনি ডিফল্ট সেট করার আগে সেটিংস (গুলি) ওভাররাইড করতে চান তবে আপনি এটি ব্যবহার করতে পারেন:

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 এর ডেটপিকার এবং moment.js ব্যবহার করেন তবে আপনার অবশ্যই moment.js এর লোকাল ডেটা বন্ধ করে দেওয়া উচিত:

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

d .datepicker.regional ["vi-VN"] = {ক্লোজটেক্সট: "ইংং", পূর্বপাঠ: "ট্র্যাক", নেক্সটেক্সট: "সৌ", কারেন্টটেক্সট: "হাম নয়", মাসের নাম: ["থিং ম্যাট", "থ্যাং হ্যা "," থাং বা "," থ্যাং ত "," থ্যাং নাম "," থ্যাং স্যু "," থ্যাং বয় "," থং তম "," থ্যাং চান "," থ্যাং মাই "," থ্যাং মিট মিট "," থ্যাং মি " mười hai "], মাসের নেমসোর্ট: [" ম্যাট "," হাই "," বা "," বন "," নিম "," স্যু "," বাই "," তম "," চ্যান "," মাই "," মাই một "," M hai hai "], দিনের নাম: ["Chủ nhật "," Thi hai "," Thứ ba "," Thứ tư "," Thứ năm "," Thứ sáu "," Thứ bảy "], dayNamesShort: [" CN "," হাই "," বা ", "টিư", "নেম", "স্যু", "বেই"], দিন নামমিন: ["সিএন", "টি 2", "টি 3", "টি 4", "টি 5", "টি 6", "টি 7"], সপ্তাহের হেডার : "টুন", তারিখফর্ম্যাট: "ডিডি / মিমি / ওয়াই", ফার্স্টডে: 1, আইএসআরটিএল: মিথ্যা, শোমোনএফটারইয়ার: মিথ্যা, বছরসুফিক্স: ""};ডে নেমসোর্ট: ["সিএন", "হাই", "বা", "টি", "নিম", "স্যু", "বী"], ডে নামসমিন: ["সিএন", "টি 2", "টি 3", "টি 4" , "টি 5", "টি 6", "টি 7"], সাপ্তাহিকহেডার: "টুন", তারিখফর্ম্যাট: "ডিডি / মিমি / ইয়ি", ফার্স্টডে: 1, আইআরটিএল: মিথ্যা, শোমোনএফটারইয়ার: মিথ্যা, বছরসুফিক্স: ""};ডে নেমসোর্ট: ["সিএন", "হাই", "বা", "টি", "নাম", "স্যু", "বী"], ডে নামসমিন: ["সিএন", "টি 2", "টি 3", "টি 4" , "টি 5", "টি 6", "টি 7"], সাপ্তাহিকহেডার: "টুন", তারিখফর্ম্যাট: "ডিডি / মিমি / ইয়ি", ফার্স্টডে: 1, আইআরটিএল: মিথ্যা, শোমোনএফটারইয়ার: মিথ্যা, বছরসুফিক্স: ""};সপ্তাহের শিরোনাম: "টুন", তারিখফর্ম্যাট: "ডিডি / মিমি / ইয়ি", ফার্স্টডে: 1, আইএসআরটিএল: মিথ্যা, শোমোনএফটারইয়ার: মিথ্যা, বছরসুফিক্স: ""};সপ্তাহের শিরোনাম: "টুন", তারিখফর্ম্যাট: "ডিডি / মিমি / ইয়ি", ফার্স্টডে: 1, আইএসআরটিএল: মিথ্যা, শোমোনএফটারইয়ার: মিথ্যা, বছরসুফিক্স: ""};

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