JS 컨트롤 부트스트랩 날짜 선택기 사용 방법에 대한 자세한 설명(그림)

이 글에서는 주로 참고값이 있는 js 컨트롤 부트스트랩 날짜 선택기 사용 방법을 소개합니다. 관심 있는 친구는 부트스트랩 튜토리얼

부트스트랩을 참조하세요. datepicker 샌드박스 환경:
bootstrap-datepicker 샌드박스 환경:

1. requirejs 구성

requirejs.config({
  baseUrl: '../pages/modules',
//  urlArgs: "v=" + (new Date()).getTime(),//禁止缓存，生产环境去除
  urlArgs:'v=2016110701',
  paths: {
    jquery: ["../../plugins/jquery/jquery"],
    bootstrap: ["../../plugins/bootstrap/dist/js/bootstrap.min"],
    datepicker:["../../plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min"],
    datepicker_zh:["../../plugins/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min"]
  },
  shim: {
    bootstrap: {deps: ["jquery"],exports: 'bootstrap'},
    datepicker:{deps:["jquery"],exports:"datepicker"},
    datepicker_zh:{deps:["jquery","datepicker"],exports:"datepicker_zh"}
  }
});
require(['jquery', 'bootstrap']);

2 html

<p class="form-group col col-sm-3 padding no-margin-bottom" id="birthdayGroup">
        <label class="col col-sm-4 text-right form-label no-padding-left">出生日期：</label>
        <p class="col col-sm-8 no-padding-left no-padding-left input-group date">
          <span class="input-group-addon">
            <i class="fa fa-calendar"></i>
          </span>
          <input id="birthday" type="text" class="form-control" placeholder="出生日期"/>
        </p>
      </p>

3 js

var $ = require('jquery');
require('datepicker_zh');
$("#birthdayGroup .input-group.date").datepicker({todayHighlight:true,todayBtn: 'linked'
      ,keyboardNavigation:true,autoclose:true,language:'zh-CN',format:'yyyy-mm-dd'
      ,daysOfWeekHighlighted:'0,6'});

4 효과

5 기본 구성 변경

위 js대로 각 컨트롤을 작성하면 힘들지 않나요? 따라서 일반적으로 사용된다고 생각되는 구성을

설정한 후 해야 할 일은 날짜 형식입니다. 왜냐하면 bootstrap- datepicker.zh-CN.min .js는 형식을 yyyy year mm Month dd day로 설정하므로 기본 형식을 'yyyy-mm-dd'로 하려면 bootstrap-datepicker.zh-CN.min을 변경해야 합니다. .js.

이제 효과를 얻으면 됩니다.
$("#birthdayGroup .input-group.date").datepicker()

6 기간의 날짜
jsp 페이지는 input-daterange input-group 스타일

<p class="form-group col col-sm-4 padding no-margin-bottom">
   <label class="col col-sm-4 text-right form-label no-padding-left">入库日期:</label>
   <p class="col col-sm-8 col-xs-6 no-padding-left input-daterange input-group">
   <input type="text" class="input-sm form-control" name="filter_ged_instockDateFontalInstockExample" 
   value="<fmt:formatDate value=&#39;${filter_ged_instockDate}&#39; pattern=&#39;yyyy-MM-dd&#39;/>" />
    <span class="input-group-addon">到</span>
    <input type="text" class="input-sm form-control" name="filter_led_instockDateFontalInstockExample" 
    value="<fmt:formatDate value=&#39;${filter_led_instockDate}&#39; pattern=&#39;yyyy-MM-dd&#39;/>"/>
    </p>
</p>

js 구성도 비교적 간단합니다. 초기화 중에 구성하면 괜찮습니다

$(".input-daterange").datepicker({keyboardNavigation:!1,forceParse:!1,autoclose:!0});

아래 예시를 보면 달력에 선택된 날짜가 있고, 전후 두 날짜의 크기가 컨트롤 자체로 완성되는 것을 볼 수 있으며, 사람의 조작이 필요하지 않습니다.

위 내용은 JS 컨트롤 부트스트랩 날짜 선택기 사용 방법에 대한 자세한 설명(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!