Japanese Date Picker Calender

Original Question

I have read jQuery Datepicker Japanese Calendar, jquery japanese datepicker,
https://jqueryui.com/datepicker/#localization and other sources but still cannot get my calender to display the days correctly.

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script src="i18n/datepicker-ja.js"></script>





<script>
  $( function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
   
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker">

</p>
 
 
</body>
</html>

Update

I think there was a weird glitch with my Google Chrome, I had to go into settings and click ‘Reset and clean up’. I talk about it more here.

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can include built-in support for languages like this :

/* Japanese initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
    $.datepicker.regional['ja'] = {
        closeText: '閉じる',
        prevText: '<前',
        nextText: '次>',
        currentText: '今日',
        monthNames: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        monthNamesShort: ['1月','2月','3月','4月','5月','6月',
        '7月','8月','9月','10月','11月','12月'],
        dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort: ['日','月','火','水','木','金','土'],
        dayNamesMin: ['日','月','火','水','木','金','土'],
        weekHeader: '週',
        dateFormat: 'yy/mm/dd',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'};
    $.datepicker.setDefaults($.datepicker.regional['ja']);
});
$( function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
   
  } );

<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css" rel="nofollow noreferrer noopener">
    <link rel="stylesheet" href="/resources/demos/style.css" rel="nofollow noreferrer noopener">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"> </script>
  </head>
  <body> 
    <p>Date: <input type="text" id="datepicker"></p>
  </body>
</html>

Other solution, you can use the option to change the region of datepicker :

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>

Date: <input id="datepicker" type="text">

Method 2

Use the “option” to change the region of the datepicker to “ja” and add the following script with your jQuery and jQuery-UI script

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

Here is a working example:

      $(function() {
        $("#datepicker").datepicker();
        $("#datepicker").datepicker("option", $.datepicker.regional["ja"])
      });

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>

Date: <input id="datepicker" type="text">

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating