bootstrap datepickerの構成と使用

10202 ワード

bootstrap datepickerの導入方法はローカルファイルが望ましい
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: "  "
  }
};