jQuery UI 테마의 아이콘과 함께 jQuery UI DatePicker 사용

StackOverflow https://stackoverflow.com/questions/802379

  •  03-07-2019
  •  | 
  •  

문제

JQuery UI를 사용하여 DatePicker 컨트롤 설정이 있습니다. 또한 사용하려는 기본 아이콘을 제공하는 jQuery UI 테마도 사용하고 있습니다.

DatePicker는 특정 이미지를 지정할 수 있습니다.

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>

아이콘 세트에서 아이콘을 표시하려면 다음과 같은 것을 사용합니다.

<span class="ui-icon ui-icon-calendar"></span>

이 둘을 쉽게 통합 할 수 있습니까? 아니면 수동으로 스타일/이미지를 해킹해야합니까?

도움이 되었습니까?

해결책

수동으로 그렇게해야 할까 봐 두려워합니다. 기본적으로 DatePicker 플러그인은 다음 HTML을 사용하여 지정된 것을 삽입합니다. buttonImage:

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

그건 그렇고, 당신은 사용하고 싶을 수도 있습니다 ...

$(function() {
 // your code here
});

...대신에...

$(document).ready(function() {
 // your code here
});

다른 팁

나는 이것을함으로써 그것을 작동시켰다

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

캘린더 입력 옆에 삽입되는 버튼을 수정하면됩니다. 기본적으로 그들은 텍스트에 3 개의 타원을 던지므로 제거하십시오.

이미지를 입력에 넣는 것이 좋습니다

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

처럼

date_picker_example

나는 사용했다 이 아이콘 좋은 탱고 아이콘 프로젝트도 제공합니다 PNG

장점 :

  • JavaScript와 독립적입니다
  • DOM으로 즉시로드됩니다
  • 미래 날짜 입력 추가하기 쉽습니다

가장 좋은 방법은;

먼저 이미 사용한대로 JavaScript를 사용하십시오.

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

그런 다음 다음 CSS 코드를 추가하십시오.

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

이 CSS는 필요에 따라 캘린더 이미지를 올바르게 정렬하는 데 도움이됩니다.

사소한 일이 EVS의 답변을 따르십시오 ... (큰 도움과 감사합니다 EVS!).

IE8에서도 작동하며 CSS를 추가하여 호버의 커서를 변경했습니다.

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}

http://jqueryui.com/demos/datepicker/#icon-trigger

샘플 코드와 함께 아주 좋은 예가 제공됩니다.

Loktar의 답변을 빌려서 확장하면 이와 같은 것을 시도 할 수 있습니다. FF10에서만 테스트했지만 다른 브라우저에서는 왜 작동하지 않는지 알 수 없습니다.

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

이 예에서는 날짜 피커 버튼-숨겨진 그리고 날짜 피커 아이콘 jQuery CSS 클래스 스타일을 직접 스타일링하는 것을 좋아하지 않기 때문에 내 수업입니다. 다음 CSS를 적용하십시오.

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

이것은 버튼 뒤에 일반 jQuery 스팬 아이콘을 효과적으로 배치합니다. 버튼은 완전히 보인 / 불투명 (CSS를 통해)이지만 아이콘 위에 여전히 있으므로 아이콘을 클릭하면 버튼 클릭 이벤트가 트리거됩니다.

이 jQuery 코드를 사용하여 TextInput 필드의 DatePicker와 DatePicker 버튼의 이미지로 작동하기 위해 jQuery UI 아이콘을 얻었습니다.

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });

변경 : 쇼를 보려면 : "둘 다", // 버튼

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpt6q/

버튼/아이콘을 수동으로 설정하는 경로를 사용하면이 예제를 사용할 수 있습니다. JQueryUi DatePicker의 아이콘 트리거를 Bootstrap 3의 입력 그룹과 결합하는 방법 JS 클릭 이벤트가 관련 날짜 입력 필드에 초점을 맞추려면 JQueryUI 날짜 기능이 나타나도록 트리거됩니다.

또는 선적 서류 비치 상태, 사용할 수 있습니다 show 데이트 피커를 표시하는 메소드 (DatePicker가 입력에 첨부 된 경우 DatePicker가 표시 되려면 입력을 표시해야합니다. ").

$( ".selector" ).datepicker( "show" );

이를 통해 입력 필드 옆에있는 버튼/이미지/아이콘을 사용할 수 있으며 버튼/이미지/아이콘을 클릭하여 입력 필드의 날짜 기능을 트리거 할 수 있습니다.

내 아이콘 버튼에 대한 HTML을 직접 추가 하여이 작업을 수행했습니다. buttonText 옵션 및 비활성화 buttonImage 옵션.

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top