2016-09-26 3 views
0

크롬뿐만 아니라 IE에서도 작동하는 나만의 맞춤 시간 지정기를 만들려고합니다. 시간 형식은 'hh : mm'입니다. 그래서 난 지금은 IE 항상 또한 '업다운'스피너를 표시 할 입력 컨트롤에 버튼을 추가 할 수 있습니까?

<input ng-model="timeHours" type="number" class="hours" placeholder="00" min="0" max="23" step="1"> 
<span class="lap-time-sep">:</span> 
<input ng-model="timeMinutes" type="number" class="minutes" placeholder="00" min="0" max="45" step="15"> 

처럼 만들었습니다. 입력 컨트롤에 내 단추를 추가 할 수있는 방법이 있습니까?

+1

입력 제어 내부에 버튼을 추가 할 수 없습니다하지만 당신은 그것을 유지할 수 있습니다 제쳐두고 하나의 구성 요소처럼 보이게 그 버튼에 CSS를 적용하십시오. –

+0

고마워요. 내가 버튼을 넣으려고 할 때, 나는 그 줄이 딱 맞지만 그냥 겹치기를 원합니다.

user1147738

+0

CSS : .dashboard - 시간 - 최대 { 테두리 : 없음; 배경 : 없음; 채우기 : 0px; margin-left : -10px; } . 대시 보드 타임 다운 { border : none; 배경 : 없음; 채우기 : 0px; margin-left : -12px; margin-top : 10px; } .up-img { 신장 : 10px; 여백 : 0px; align-self : stretch; } .hours { 너비 : 40px; 패딩 : 3px 0 0 3px; float : left; } – user1147738

답변

0

당신은 당신은 (나는 이것에 대해 확실하지 않다) CSS를 변경하여 그렇게 할 수있을 input

내부에 자신의 버튼을 추가 할 수 없습니다,하지만 너무 같은 다른 브라우저는 서로 다른 CSS를 사용하는 일반적인 해결책이 아니다 속성은 input type=number 스피너를 설정하고 더는 모든 브라우저에서 작동합니다 보증

당신이 Spinners을 사용하여 달성 할 수있는, 주위 작품으로 here

참조가 없다

angular.module("MyApp", []) 
    .controller("MyCtrl", function($scope, $filter) { 
     angular.element(document).ready(function() { 
     $('#hour').spinner({ 
     min: 0, 
     max: 23, 
     step: 1, 
     spin: function(event, ui) { 
      $scope.hh = ui.value; 
      $scope.$apply(); 
      } 
    }); 
    $('#minutes').spinner({ 
     min: 0, 
     max: 45, 
     step: 15, 
     spin: function(event, ui) { 
      $scope.mm = ui.value; 
      $scope.$apply(); 
      } 
    }); 
    }); 
    }); 

FULL EXAMPLE

준비 DOM에

설정은 사용자의 필요에 따라, CSS를 변경할 수 있습니다

관련 문제