현지화 된 드롭 다운 캘린더가 정말 필요합니다. 영어 달력은 노르웨이 웹 사이트에서 우수성을 정확하게 전달하지 않습니다 ;-)
나는 jQuery DatePicker로 실험 해 보았지만 그들의 웹 사이트는 현지화 할 수 있다고 말하지만 작동하지 않는 것 같습니다.
ASPNET.MVC를 사용하고 있으며 하나의 자바 스크립트 라이브러리를 사용하고 싶습니다. 이 경우에 jQuery입니다.
ajax 툴킷 캘린더도 노르웨이 이름을 표시하는 경우 허용됩니다.
업데이트 : 훌륭합니다! 나는 언어 파일이 누락되었음을 알았습니다.
답변:
여전히 문제가있는 경우 여기에서 원하는 언어 파일을 다운로드해야합니다.
그런 다음 다음과 같이 페이지에 포함합니다 (이탈리아어) :
<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>그런 다음 zilverdistel의 코드 를 사용 하십시오 : D
데모를 파악하고 다음과 같은 방식으로 구현했습니다.
$.datepicker.setDefaults(
$.extend(
{'dateFormat':'dd-mm-yy'},
$.datepicker.regional['nl']
)
);날짜 형식에 대한 기본값도 설정해야했습니다 ...
$.datepicker.setDefaults($.datepicker.regional["uk"]);
문자열이 $.datepicker.regional['it']모든 단어를 번역하지는 않습니다.
datepicker를 번역하려면 몇 가지 변수를 지정해야합니다.
$.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ì','Martedì','Mercoledì','Giovedì','Venerdì','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();이 경우 datepicker가 제대로 번역됩니다.
$.getScript()Google의 호스팅 API에서 기본 라이브러리를 가져 오기 때문에 필요한 방법입니다 .
$.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/i18n 에서 복사 할 수 있습니다.
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"]);다음은 추가 라이브러리없이 현지화를 수행하는 방법의 예입니다.
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>동일한 프로젝트에서 jQuery UI의 datepicker 및 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']);이 솔루션이 도움이 될 수 있습니다.
$(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>속성을 추가하여 해결했습니다 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><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>$ .datepicker.regional [ "vi-VN"] = {closeText : "Đóng", prevText : "Trước", nextText : "Sau", currentText : "Hôm nay", monthNames : [ "Tháng một", "Tháng hai ","Tháng ba ","Tháng tư ","Tháng năm ","Tháng sáu ","Tháng bảy ","Tháng tám ","Tháng chín ","Tháng mười ","Tháng mười một ","Tháng mười hai "], monthNamesShort : ["Một ","Hai ","Ba ","Bốn ","Năm ","Sáu ","Bảy ","Tám ","Chín ","Mười ","Mười một ","Mười hai "], dayNames : ["Chủ nhật ","Thứ hai ","Thứ ba ","Thứ tư ","Thứ năm ","Thứ sáu ","Thứ bảy "], dayNamesShort : ["CN ","Hai ","Ba ", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin : [ "CN", "T2", "T3", "T4", "T5", "T6", "T7"], weekHeader : "Tuần", dateFormat : "dd / mm / yy", firstDay : 1, isRTL : false, showMonthAfterYear : false, yearSuffix : ""};dayNamesShort : [ "CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin : [ "CN", "T2", "T3", "T4" , "T5", "T6", "T7"], weekHeader : "Tuần", dateFormat : "dd / mm / yy", firstDay : 1, isRTL : false, showMonthAfterYear : false, yearSuffix : ""};dayNamesShort : [ "CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin : [ "CN", "T2", "T3", "T4" , "T5", "T6", "T7"], weekHeader : "Tuần", dateFormat : "dd / mm / yy", firstDay : 1, isRTL : false, showMonthAfterYear : false, yearSuffix : ""};weekHeader : "Tuần", dateFormat : "dd / mm / yy", firstDay : 1, isRTL : false, showMonthAfterYear : false, yearSuffix : ""};weekHeader : "Tuần", dateFormat : "dd / mm / yy", firstDay : 1, isRTL : false, showMonthAfterYear : false, yearSuffix : ""};
$.datepicker.setDefaults($.datepicker.regional["vi-VN"]);