bootstrap datepickerの構成と使用
10202 ワード
bootstrap datepickerの導入方法はローカルファイルが望ましい
jsを変更して構成を完了する必要がある場合があります
bootstrap datepickerプラグイン構造
bootstrap datepicker構成
bootstrap datepickerデフォルト日付を設定(自動的に選択して入力ボックスに表示)
bootstrap datepicker言語タイプをbootstrap-datepickerに設定します.jsでの構成の追加
言語タイプを設定場合、datepicker({})にのみ設定:language:“zh-CN”(公式サイトでコピー)が機能しないことが判明し、発見を調べることで、デフォルト言語を設定するにはbootstrap-datepickerに構成を書く.jsでは、言語タイプが構成中のキー
jsを変更して構成を完了する必要がある場合があります
bootstrap datepickerプラグイン構造
<div class="build-date clearfix">
<span class="select-title lh34"> :span>
<div class="select-main">
<div class="sandbox-start-container">
<div class="input-group date start">
<input type="text" class="form-control build-start-date">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th">i>
span>
div>
div>
<div class="sandbox-end-container">
<div class="input-group date end">
<input type="text" class="form-control build-end-date">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th">i>
span>
div>
div>
div>
div>
bootstrap datepicker構成
$('.sandbox-start-container .input-group.date').datepicker({
language: "cn", //
weekStart: 1, //
daysOfWeekDisabled: "0,1,2,3,4,5", //
daysOfWeekHighlighted: "6", //
autoclose: true, //
format: 'yyyy-m-d', //
forceParse: true, //
});
bootstrap datepickerデフォルト日付を設定(自動的に選択して入力ボックスに表示)
$('#all-issue-build .input-group.start').datepicker('setDate', date.firstSaturday)
$('#all-issue-build .input-group.end').datepicker('setDate', date.lastFriday)
bootstrap datepicker言語タイプをbootstrap-datepickerに設定します.jsでの構成の追加
言語タイプを設定場合、datepicker({})にのみ設定:language:“zh-CN”(公式サイトでコピー)が機能しないことが判明し、発見を調べることで、デフォルト言語を設定するにはbootstrap-datepickerに構成を書く.jsでは、言語タイプが構成中のキー
var dates = $.fn.datepicker.dates = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today",
clear: "Clear",
titleFormat: "MM yyyy"
},
cn: {
days: [" ", " ", " ", " ", " ", " ", " ", " "],
daysShort: [" ", " ", " ", " ", " ", " ", " ", " "],
daysMin: [" ", " ", " ", " ", " ", " ", " ", " "],
months: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
monthsShort: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],
today: " ",
clear: " "
}
};