boottstrap 날짜 컨트롤 문제(더 블 날짜,비 우기 등 문제 해결)

boottstrap 은 아름 다운 외관 과 풍부 한 구성 요소 로 현재 가장 유행 하 는 전단 프레임 워 크 가 되 었 습 니 다.프로젝트 개발 에서 우 리 는 그것 의 날짜 컨트롤 을 사용 하 는 데 확실히 문제 가 생 겼 다.
1.날짜 컨트롤 뒤에 있 는 두 아이콘 을 누 르 면 유효 하지 않 습 니 다.
2.날짜 관련 질문
3.두 날 짜 를 비 울 때,이전에 입력 한 날짜 의 연결 이 유효 합 니 다.
4.년 월 입력
5.아이콘 이 표시 되 지 않 습 니 다.(이 아이콘 을 가 져 온 파일 에서 URL 주 소 를 직접 검색 하고 주 소 를 수정 하면 해 결 됩 니 다.)
아래 의 코드 는 모두 일일이 해결 할 것 이다.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.css" rel="external nofollow" type="text/css" />
<link rel="stylesheet" href="bootstrap-datetimepicker.css" rel="external nofollow" type="text/css" />
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript" ></script>
<script src="bootstrap-datetimepicker.js" type="text/javascript" ></script>
<script src="bootstrap-datetimepicker.zh-CN.js" type="text/javascript" ></script>
<title>bootstrap  </title>
<style>
</style>
<script type="text/javascript">
$(function(){
  //           
  //  div  id，  input id，            
  $("#startdiv").datetimepicker({
    pickerPosition : "bottom-left",
    language : 'zh-CN',
    format : "yyyy-mm-dd",
    weekStart : 1,
    todayBtn : 1,
    autoclose : 1,
    todayHighlight : 1,
    startView : 2,
    minView : 2,
    forceParse : 0
  });
  $("#endDiv").datetimepicker({
    pickerPosition : "bottom-left",
    language : 'zh-CN',
    format : "yyyy-mm-dd",
    weekStart : 1,
    todayBtn : 1,
    autoclose : 1,
    todayHighlight : 1,
    startView : 2,
    minView : 2,
    forceParse : 0
  });
  //    
  $("#birthMonth").datetimepicker({
    language: 'zh-CN',
    format: 'yyyy-mm',
    autoclose: true,
    // todayBtn: true,     
    startView: 'year',
    minView:'year',
    maxView:'decade'
  });
  $('#startdiv').unbind("change");
  $('#startdiv').change(function(){
    $('#endDiv').datetimepicker('setStartDate', $("#start").val());
  });
  $('#endDiv').unbind("change");
  $('#endDiv').change(function(){
    $('#startdiv').datetimepicker('setEndDate', $("#end").val());
  });
});
function clearForm(){
  $('#start').val('');
  $('#end').val('');
  //       ，           
  $('.input-group-addon:has(span.glyphicon-remove)').click();
}
  </script>
</head>
<body>
  <h1>bootstrap    </h1>
  <hr/>
                    <div id="startdiv" class="input-group date width100">
                      <input id="start"
                        name="start" class="form-control" type="text"
                        value="" placeholder="       " readonly="readonly"> <span
                        class="input-group-addon"> <span
                        class="glyphicon glyphicon-remove"></span>
                      </span> <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </div>
                    <br>
                    <div id="endDiv" class="input-group date width100">
                      <input id="end"
                        name="end" class="form-control" type="text"
                        value="" placeholder="       " readonly="readonly"> <span
                        class="input-group-addon"> <span
                        class="glyphicon glyphicon-remove"></span>
                      </span> <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </div>
                    <br>
                    <button type="button" class="btn btn-sm btn-warning" id="clear" onclick="clearForm()">  </button>
                    <hr>
                    <div id="birthMonth" class="input-group date width100">
                      <input id="birthDay"
                        name="birthDay" class="form-control" type="text"
                        value="" placeholder="       " readonly="readonly"> <span
                        class="input-group-addon"> <span
                        class="glyphicon glyphicon-remove"></span>
                      </span> <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                      </span>
                    </div>
</body>
</html>

위 에서 말 한 것 은 편집장 이 소개 한 boottstrap 날짜 컨트롤 문제(더 블 날짜,비우 기 등 문제 해결)입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Svelte에 Bootstrap 5를 설치하는 방법

안녕하세요 여러분, 오늘 이 섹션에서는 부트스트랩 5를 svelte로 설치 및 설정합니다. 이 섹션에서는 vite 도구와 Svelte 3을 사용합니다. Svelte에 부트스트랩 5 설치 Svelte 프로젝트 만들기 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

boottstrap 날짜 컨트롤 문제(더 블 날짜,비 우기 등 문제 해결)

좋은 웹페이지 즐겨찾기