입력 필드가없는 이미지를 클릭하여 JQuery Datepicker를 찾습니다.

입력 필드가없는 이미지를 클릭하여 JQuery Datepicker를 찾습니다.

---

사용자가 이미지를 클릭 할 때 JQuery Datepicker를 사용할 때. 선택한 날짜가 나중에 표시되는 입력 필드가 없습니다. Ajax를 통해 서버에 저장하겠습니다.

현재이 코드가 있습니다.

<img src='someimage.gif' id="datepicker" />

$(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
        }).click(function() { $(this).datepicker('show'); });
 });

하지만 이미지를 클릭해도 아무 일도 일어나지 발음합니다. 또한 datepicker () 호출의 결과를 전역 변수에 저장 한 다음 이미지의 onclick () 이벤트에서 datepicker ( 'show')를 호출했지만 결과를 시도했습니다.

---

간단한 숨겨진 입력 필드가 작업을 수행합니다.

<input type="hidden" id="dp" />

그런 다음 이메일과 같이 이미지에 buttonImage 속성을 사용합니다.

    $("#dp").datepicker({
        buttonImage: '../images/icon_star.gif',
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
     });

처음에는 텍스트 입력 필드를 시도한 다음 display:none스타일 을 설정 했지만 이로 인해 사용자가 클릭 한 위치가 아닌 브라우저 상단에서 달력이 나타납니다. 그러나 숨겨진 필드는 원하는대로 작동합니다.

---

jQuery 문서에 따르면 datePicker는 입력 상자와 연결되지 않은 경우 SPAN 또는 DIV에 연결해야합니다. 다음과 같이 할 수 있습니다.

<img src='someimage.gif' id="datepickerImage" />
<div id="datepicker"></div>

<script type="text/javascript">
 $(document).ready(function() {
    $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
    })
    .hide()
    .click(function() {
      $(this).hide();
    });

    $("#datepickerImage").click(function() {
       $("#datepicker").show(); 
    });
 });
</script>

---

입력 필드와 아이콘을 사용하는 경우 (예 :이 예) :

<input name="hasta" id="Hasta"  type="text" readonly  />
<a href="#" id="Hasta_icono" ></a>

다음과 같이 날짜 선택기를 아이콘에 첨부 할 수 있습니다 (제 경우에는 CSS를 통해 태그에 포함).

$("#Hasta").datepicker();
  $("#Hasta_icono").click(function() { 
   $("#Hasta").datepicker( "show" );
  });

---

달력 아이콘 위로 마우스를 가져갈 때 "..."를 변경하려는 날짜 선택 옵션에 다음을 추가해야합니다.

    showOn: 'button',
    buttonText: 'Click to show the calendar',
    buttonImageOnly: true, 
    buttonImage: 'images/cal2.png',

---

HTML :

<div class="CalendarBlock">
    <input type="hidden">
</div>

암호 :

$CalendarBlock=$('.CalendarBlock');
$CalendarBlock.click(function(){
    var $datepicker=$(this).find('input');
    datepicker.datepicker({dateFormat: 'mm/dd/yy'});
    $datepicker.focus(); });

---

숨겨진 입력 필드가 있으면 날짜 선택기 대화 상자 위치 지정에 문제가 발생합니다 (대화 상자가 가로로 가운데에 있음). 대화 상자의 여백을 변경할 수 있지만 더 좋은 방법이 있습니다.

입력 필드를 만들고 불투명도를 0으로 설정하고 너비를 1px로 설정하여 "숨기기"만하면됩니다. 또한 버튼 근처 (또는 아래) 또는 날짜 선택기를 표시 할 위치에 배치합니다.

그런 다음 "숨겨진"입력 필드에 날짜 선택기를 연결하고 사용자가 버튼을 누를 때 표시합니다.

HTML :

<button id="date-button">Show Calendar</button>
<input type="text" name="date-field" id="date-field" value="">

CSS :

#date-button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height 30px;
}

#date-field {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 1px;
    height: 32px; // height of the button + a little margin
    opacity: 0;
}

JS :

$(function() {
   $('#date-field').datepicker();

   $('#date-button').on('click', function() {
      $('#date-field').datepicker('show');
   });
});

참고 : 모든 브라우저에서 테스트되지는 않았습니다.

---

$(function() {
   $("#datepicker").datepicker({
       //showOn: both - datepicker will come clicking the input box as well as the calendar icon
       //showOn: button - datepicker will come only clicking the calendar icon
       showOn: 'button',
      //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
      buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
      buttonImageOnly: true,
      changeMonth: true,
      changeYear: true,
      showAnim: 'slideDown',
      duration: 'fast',
      dateFormat: 'dd-mm-yy'
  });
});

위의 코드는 이 링크에 속합니다.

---

<img src='someimage.gif' id="datepicker" />
<input type="hidden" id="dp" />

 $(document).on("click", "#datepicker", function () {
   $("#dp").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 'today'}).datepicker( "show" ); 
  });

이 코드를 이미지 클릭 또는 기타 html 태그 클릭 이벤트에 추가하기 만하면됩니다. 이것은 트리거를 클릭 할 때 datepicker 함수를 시작하여 수행됩니다.

참고 URL : https://stackoverflow.com/questions/1112035/open-jquery-datepicker-by-clicking-on-an-image-w-no-input-field