Home / Questions / 258110
Accepted
Huntzberger
Asked: 2020-04-25 09:09:15 +0800 CST 2020-04-25 09:09:15 +0800 CST

更改日期时间选择器中的语言

  • 772

我有一个 datetimepicker，但它默认以英语显示，我想知道是否有办法将其更改为西班牙语。

jQuery(function($) {
  $.datetimepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '<Ant',
    nextText: 'Sig>',
    currentText: 'Hoy',
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
      'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
    ],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
      'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'
    ],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
    dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
    weekHeader: 'Sm',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };
  $.datetimepicker.setDefaults($.datetimepicker.regional['es']);
});

$(document).ready(function() {
  $(".fecha").datetimepicker({
    format: 'Y-MM-D',
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<input class="form-control" id="fecha" name="fecha" placeholder="fecha -- " type="text" />

在此处输入图像描述

此错误出现在控制台中：

jQuery.Deferred 异常：无法读取未定义的属性“区域”类型错误：无法读取未定义的属性“区域”

javascript

3 Answers

  1. Best Answer

    您可以像这样指定所需的语言：

    $(function () {
        $("#fecha").datepicker({
            language: 'es'
        });
    });
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<input class="form-control" id="fecha" name="fecha" placeholder="fecha -- " type="text"/>

    您的 CDN 必须指向您想要的语言版本locales/bootstrap-datepicker.es.min.js

    • 2

  2. 在datetimepicker的情况下，我解决它的方式是......

    （这是一个动态生成的字段）

          $('.js-datetimepickerNotMinutes').datetimepicker.dates['en'] = {
                    days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
                    daysShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab", "Dom"],
                    daysMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"],
                    months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                    monthsShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    today: "Hoy"
                };


  $('.js-datetimepickerNotMinutes').datetimepicker({
              uiLibrary: 'bootstrap4',
                                defaultDate: "+1w",
                                showOn: 'button',
                                numberOfMonths: 1,
                                format: 'dd-mm-yyyy hh:00',
                                language: 'es',
                                daysShort: ["Sunx", "Monx", "Tuex", "Wedx", "Thux", "Frix", "Satx", "Sunx"],
                                weekStart: 1,
                                minView: "day",
                                minuteStep: 61,
                                autoclose: true
                              });

    因为在我的情况下只有...

    language: 'es',

    这还不够。

    • 0 
  3. $('#reservationdate').datetimepicker({
locale: 'es',
format: 'DD-MM-YYYY',
daysOfWeekDisabled: [6],     
//defaultDate: "11/1/2013",
disabledDates: [
  // moment("12/25/2013"),      
  "11-11-2021",
  "11-10-2021",
  "11-05-2021"
], });



<div class="form-group">
  <label>Date:</label>
  <div class="input-group date" id="reservationdate" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask/>
    <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
     <div class="input-group-text"><i class="fa fa-calendar"></i></div>
     </div>
   </div>                                 
</div>

    添加此刻路由：locale.js 添加此刻路由：locale.js

    结果：

    代码结果

    • 0