Question

我无法在网上找到类似的东西，但可能是因为我是法国人，而且我真的不知道如何用关键词来解释这个问题

日期选择器按预期工作，我使用以下内容翻译fr中的选择器并更改格式

<script>
$.fn.datepicker.dates['fr'] = {
days: ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
daysShort: ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"],
daysMin: ["Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di"],
months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"],
monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
today: "Aujourd'hui",
clear: "Effacer",
format: "dd-mm-yyyy",
titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
weekStart: 0 }

我用它来创建选择器本身

<div class="input-group date" data-provide="datepicker" data-date-language="fr" data-date-autoclose="true"

但2017年3月30日的日期是星期二，但是星期三的选择器显示，你知道它为什么不能按预期工作吗？编辑：顺便说一句我无法设法今天亮灯工作，可能是同样的问题？

Answer 1

问题在于你的翻译日期是从周一而不是周日开始的。今天星期二（Mardi）正在展示星期三（Mercredi）。

Bon chance Monsieur

<!doctype html>
<html>
<head>
<title>Datepicker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
/*!
* Datepicker for Bootstrap
*
* Copyright 2012 Stefan Petre
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
*/
.datepicker {
top: 0;
left: 0;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
/*.dow {
border-top: 1px solid #ddd !important;
}*/

}
.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 6px;
}
.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 7px;
}
.datepicker > div {
 display: none;
 }
 .datepicker table {
 width: 100%;
 margin: 0;
 }
 .datepicker td,
 .datepicker th {
 text-align: center;
 width: 20px;
 height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker td.day:hover {
background: #eeeeee;
cursor: pointer;
}
.datepicker td.day.disabled {
color: #eeeeee;
}
.datepicker td.old,
.datepicker td.new {
color: #999999;
}
.datepicker td.active,
.datepicker td.active:hover {
color: #ffffff;
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc),   to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #0044cc;
/* Darken IE7 buttons by default so they stand out more given they won't  have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker td.active:hover,
.datepicker td.active:hover:hover,
.datepicker td.active:focus,
.datepicker td.active:hover:focus,
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active,
.datepicker td.active.disabled,
.datepicker td.active:hover.disabled,
.datepicker td.active[disabled],
.datepicker td.active:hover[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}
.datepicker td.active:active,
.datepicker td.active:hover:active,
.datepicker td.active.active,
.datepicker td.active:hover.active {
background-color: #003399 \9;
}
.datepicker td span {
display: block;
width: 47px;
height: 54px;
line-height: 54px;
float: left;
margin: 2px;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.datepicker td span:hover {
background: #eeeeee;
}
.datepicker td span.active {
color: #ffffff;
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #0044cc;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker td span.active:hover,
.datepicker td span.active:focus,
.datepicker td span.active:active,
.datepicker td span.active.active,
.datepicker td span.active.disabled,
.datepicker td span.active[disabled] {
color: #ffffff;
background-color: #0044cc;
*background-color: #003bb3;
}
.datepicker td span.active:active,
.datepicker td span.active.active {
background-color: #003399 \9;
}
.datepicker td span.old {
 color: #999999;
}
.datepicker th.switch {
width: 145px;
}
.datepicker th.next,
.datepicker th.prev {
font-size: 21px;
}
.datepicker thead tr:first-child th {
cursor: pointer;
}
.datepicker thead tr:first-child th:hover {
background: #eeeeee;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
display: block;
cursor: pointer;
width: 16px;
height: 16px;
} 
</style>


 <script>
 /* =========================================================
 * bootstrap-datepicker.js 
 * http://www.eyecon.ro/bootstrap-datepicker
 * =========================================================
 * Copyright 2012 Stefan Petre
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================= */

 !function( $ ) {

 // Picker object

 var Datepicker = function(element, options){
 this.element = $(element);
 this.format = DPGlobal.parseFormat(options.format||this.element.data('date-format')||'mm/dd/yyyy');
 this.picker = $(DPGlobal.template)
                    .appendTo('body')
                    .on({
                        click: $.proxy(this.click, this)//,
                        //mousedown: $.proxy(this.mousedown, this)
                    });
 this.isInput = this.element.is('input');
 this.component = this.element.is('.date') ? this.element.find('.add-on') : false;

  if (this.isInput) {
    this.element.on({
        focus: $.proxy(this.show, this),
        //blur: $.proxy(this.hide, this),
        keyup: $.proxy(this.update, this)
    });
  } else {
    if (this.component){
        this.component.on('click', $.proxy(this.show, this));
    } else {
        this.element.on('click', $.proxy(this.show, this));
    }
 }

 this.minViewMode = options.minViewMode||this.element.data('date-minviewmode')||0;
 if (typeof this.minViewMode === 'string') {
    switch (this.minViewMode) {
        case 'months':
            this.minViewMode = 1;
            break;
        case 'years':
            this.minViewMode = 2;
            break;
        default:
            this.minViewMode = 0;
            break;
    }
 }
 this.viewMode = options.viewMode||this.element.data('date-viewmode')||0;
 if (typeof this.viewMode === 'string') {
    switch (this.viewMode) {
        case 'months':
            this.viewMode = 1;
            break;
        case 'years':
            this.viewMode = 2;
            break;
        default:
            this.viewMode = 0;
            break;
    }
}
this.startViewMode = this.viewMode;
this.weekStart = options.weekStart||this.element.data('date-weekstart')||0;
this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
this.onRender = options.onRender;
this.fillDow();
this.fillMonths();
this.update();
this.showMode();
};

Datepicker.prototype = {
constructor: Datepicker,

show: function(e) {
    this.picker.show();
    this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
    this.place();
    $(window).on('resize', $.proxy(this.place, this));
    if (e ) {
        e.stopPropagation();
        e.preventDefault();
    }
    if (!this.isInput) {
    }
    var that = this;
    $(document).on('mousedown', function(ev){
        if ($(ev.target).closest('.datepicker').length == 0) {
            that.hide();
        }
    });
    this.element.trigger({
        type: 'show',
        date: this.date
    });
 },

 hide: function(){
    this.picker.hide();
    $(window).off('resize', this.place);
    this.viewMode = this.startViewMode;
    this.showMode();
    if (!this.isInput) {
        $(document).off('mousedown', this.hide);
    }
    //this.set();
    this.element.trigger({
        type: 'hide',
        date: this.date
    });
},

set: function() {
    var formated = DPGlobal.formatDate(this.date, this.format);
    if (!this.isInput) {
        if (this.component){
            this.element.find('input').prop('value', formated);
        }
        this.element.data('date', formated);
    } else {
        this.element.prop('value', formated);
    }
},

setValue: function(newDate) {
    if (typeof newDate === 'string') {
        this.date = DPGlobal.parseDate(newDate, this.format);
    } else {
        this.date = new Date(newDate);
    }
    this.set();
    this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
    this.fill();
},

place: function(){
    var offset = this.component ? this.component.offset() : this.element.offset();
    this.picker.css({
        top: offset.top + this.height,
        left: offset.left
    });
},

update: function(newDate){
    this.date = DPGlobal.parseDate(
        typeof newDate === 'string' ? newDate : (this.isInput ? this.element.prop('value') : this.element.data('date')),
        this.format
    );
    this.viewDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1, 0, 0, 0, 0);
    this.fill();
},

fillDow: function(){
    var dowCnt = this.weekStart;
    var html = '<tr>';
    while (dowCnt < this.weekStart + 7) {
        html += '<th class="dow">'+DPGlobal.dates.daysMin[(dowCnt++)%7]+'</th>';
    }
    html += '</tr>';
    this.picker.find('.datepicker-days thead').append(html);
},

fillMonths: function(){
    var html = '';
    var i = 0
    while (i < 12) {
        html += '<span class="month">'+DPGlobal.dates.monthsShort[i++]+'</span>';
    }
    this.picker.find('.datepicker-months td').append(html);
},

fill: function() {
    var d = new Date(this.viewDate),
        year = d.getFullYear(),
        month = d.getMonth(),
        currentDate = this.date.valueOf();
    this.picker.find('.datepicker-days th:eq(1)')
                .text(DPGlobal.dates.months[month]+' '+year);
    var prevMonth = new Date(year, month-1, 28,0,0,0,0),
        day = DPGlobal.getDaysInMonth(prevMonth.getFullYear(), prevMonth.getMonth());
    prevMonth.setDate(day);
    prevMonth.setDate(day - (prevMonth.getDay() - this.weekStart + 7)%7);
    var nextMonth = new Date(prevMonth);
    nextMonth.setDate(nextMonth.getDate() + 42);
    nextMonth = nextMonth.valueOf();
    var html = [];
    var clsName,
        prevY,
        prevM;
    while(prevMonth.valueOf() < nextMonth) {
        if (prevMonth.getDay() === this.weekStart) {
            html.push('<tr>');
        }
        clsName = this.onRender(prevMonth);
        prevY = prevMonth.getFullYear();
        prevM = prevMonth.getMonth();
        if ((prevM < month &&  prevY === year) ||  prevY < year) {
            clsName += ' old';
        } else if ((prevM > month && prevY === year) || prevY > year) {
            clsName += ' new';
        }
        if (prevMonth.valueOf() === currentDate) {
            clsName += ' active';
        }
        html.push('<td class="day '+clsName+'">'+prevMonth.getDate() + '</td>');
        if (prevMonth.getDay() === this.weekEnd) {
            html.push('</tr>');
        }
        prevMonth.setDate(prevMonth.getDate()+1);
    }
    this.picker.find('.datepicker-days tbody').empty().append(html.join(''));
    var currentYear = this.date.getFullYear();

    var months = this.picker.find('.datepicker-months')
                .find('th:eq(1)')
                    .text(year)
                    .end()
                .find('span').removeClass('active');
    if (currentYear === year) {
        months.eq(this.date.getMonth()).addClass('active');
    }

    html = '';
    year = parseInt(year/10, 10) * 10;
    var yearCont = this.picker.find('.datepicker-years')
                        .find('th:eq(1)')
                            .text(year + '-' + (year + 9))
                            .end()
                        .find('td');
    year -= 1;
    for (var i = -1; i < 11; i++) {
        html += '<span class="year'+(i === -1 || i === 10 ? ' old' : '')+(currentYear === year ? ' active' : '')+'">'+year+'</span>';
        year += 1;
    }
    yearCont.html(html);
},

click: function(e) {
    e.stopPropagation();
    e.preventDefault();
    var target = $(e.target).closest('span, td, th');
    if (target.length === 1) {
        switch(target[0].nodeName.toLowerCase()) {
            case 'th':
                switch(target[0].className) {
                    case 'switch':
                        this.showMode(1);
                        break;
                    case 'prev':
                    case 'next':
                        this.viewDate['set'+DPGlobal.modes[this.viewMode].navFnc].call(
                            this.viewDate,
                            this.viewDate['get'+DPGlobal.modes[this.viewMode].navFnc].call(this.viewDate) + 
                            DPGlobal.modes[this.viewMode].navStep * (target[0].className === 'prev' ? -1 : 1)
                        );
                        this.fill();
                        this.set();
                        break;
                }
                break;
            case 'span':
                if (target.is('.month')) {
                    var month = target.parent().find('span').index(target);
                    this.viewDate.setMonth(month);
                } else {
                    var year = parseInt(target.text(), 10)||0;
                    this.viewDate.setFullYear(year);
                }
                if (this.viewMode !== 0) {
                    this.date = new Date(this.viewDate);
                    this.element.trigger({
                        type: 'changeDate',
                        date: this.date,
                        viewMode: DPGlobal.modes[this.viewMode].clsName
                    });
                }
                this.showMode(-1);
                this.fill();
                this.set();
                break;
            case 'td':
                if (target.is('.day') && !target.is('.disabled')){
                    var day = parseInt(target.text(), 10)||1;
                    var month = this.viewDate.getMonth();
                    if (target.is('.old')) {
                        month -= 1;
                    } else if (target.is('.new')) {
                        month += 1;
                    }
                    var year = this.viewDate.getFullYear();
                    this.date = new Date(year, month, day,0,0,0,0);
                    this.viewDate = new Date(year, month, Math.min(28, day),0,0,0,0);
                    this.fill();
                    this.set();
                    this.element.trigger({
                        type: 'changeDate',
                        date: this.date,
                        viewMode: DPGlobal.modes[this.viewMode].clsName
                    });
                }
                break;
        }
    }
 },

 mousedown: function(e){
    e.stopPropagation();
    e.preventDefault();
 },

 showMode: function(dir) {
    if (dir) {
        this.viewMode = Math.max(this.minViewMode, Math.min(2, this.viewMode + dir));
    }
    this.picker.find('>div').hide().filter('.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
   }
 };

  $.fn.datepicker = function ( option, val ) {
  return this.each(function () {
    var $this = $(this),
        data = $this.data('datepicker'),
        options = typeof option === 'object' && option;
    if (!data) {
        $this.data('datepicker', (data = new Datepicker(this, $.extend({}, $.fn.datepicker.defaults,options))));
    }
    if (typeof option === 'string') data[option](val);
   });
 };

 $.fn.datepicker.defaults = {
 onRender: function(date) {
    return '';
  }
 };
 $.fn.datepicker.Constructor = Datepicker;

var DPGlobal = {
modes: [
    {
        clsName: 'days',
        navFnc: 'Month',
        navStep: 1
    },
    {
        clsName: 'months',
        navFnc: 'FullYear',
        navStep: 1
    },
    {
        clsName: 'years',
        navFnc: 'FullYear',
        navStep: 10
  }],
  dates:{
    days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
    daysShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
    daysMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
    months: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"],
    monthsShort: ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"]
},
isLeapYear: function (year) {
    return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0))
},
getDaysInMonth: function (year, month) {
    return [31, (DPGlobal.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month]
},
parseFormat: function(format){
    var separator = format.match(/[.\/\-\s].*?/),
        parts = format.split(/\W+/);
    if (!separator || !parts || parts.length === 0){
        throw new Error("Invalid date format.");
    }
    return {separator: separator, parts: parts};
},
parseDate: function(date, format) {
    var parts = date.split(format.separator),
        date = new Date(),
        val;
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
    if (parts.length === format.parts.length) {
        var year = date.getFullYear(), day = date.getDate(), month = date.getMonth();
        for (var i=0, cnt = format.parts.length; i < cnt; i++) {
            val = parseInt(parts[i], 10)||1;
            switch(format.parts[i]) {
                case 'dd':
                case 'd':
                    day = val;
                    date.setDate(val);
                    break;
                case 'mm':
                case 'm':
                    month = val - 1;
                    date.setMonth(val - 1);
                    break;
                case 'yy':
                    year = 2000 + val;
                    date.setFullYear(2000 + val);
                    break;
                case 'yyyy':
                    year = val;
                    date.setFullYear(val);
                    break;
            }
        }
        date = new Date(year, month, day, 0 ,0 ,0);
    }
    return date;
},
formatDate: function(date, format){
    var val = {
        d: date.getDate(),
        m: date.getMonth() + 1,
        yy: date.getFullYear().toString().substring(2),
        yyyy: date.getFullYear()
    };
    val.dd = (val.d < 10 ? '0' : '') + val.d;
    val.mm = (val.m < 10 ? '0' : '') + val.m;
    var date = [];
    for (var i=0, cnt = format.parts.length; i < cnt; i++) {
        date.push(val[format.parts[i]]);
    }
    return date.join(format.separator);
},
headTemplate: '<thead>'+
                    '<tr>'+
                        '<th class="prev">&lsaquo;</th>'+
                        '<th colspan="5" class="switch"></th>'+
                        '<th class="next">&rsaquo;</th>'+
                    '</tr>'+
                '</thead>',
contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
};
DPGlobal.template = '<div class="datepicker dropdown-menu">'+
                    '<div class="datepicker-days">'+
                        '<table class=" table-condensed">'+
                            DPGlobal.headTemplate+
                            '<tbody></tbody>'+
                        '</table>'+
                    '</div>'+
                    '<div class="datepicker-months">'+
                        '<table class="table-condensed">'+
                            DPGlobal.headTemplate+
                            DPGlobal.contTemplate+
                        '</table>'+
                    '</div>'+
                    '<div class="datepicker-years">'+
                        '<table class="table-condensed">'+
                            DPGlobal.headTemplate+
                            DPGlobal.contTemplate+
                        '</table>'+
                    '</div>'+
                '</div>';

}( window.jQuery );  
</script>

</head>
<body>

<div class="container" style="padding:150px;">

<input type="text" id="datepicker" class="form-control" placeholder="Entrez la date">
</div>
<script type="text/javascript">
    $(function () {
        $('#datepicker').datepicker();
    });
 </script>

</body>

Bootstrap Datepicker未正确显示日期

1 个答案: