จะแสดง datepicker เฉพาะบนไอคอนคลิกโดยใช้ Jquery ได้อย่างไร

ฉันกำลังเผชิญกับปัญหาหนึ่ง ฉันต้องแสดง jquery datepicker เฉพาะเมื่อคลิกไอคอนเท่านั้น ฉันกำลังอธิบายรหัสของฉันด้านล่าง

<input type="text" class="inputType2" id="car_d_date" value="">
<span class="globalcolor" id="calicon">
  <i class="icon-calendar-7"></i>
</span>

$(function(){
  $("#car_d_date").datepicker();
  $("#calicon").click(function(){
    $("#car_d_date").datepicker('show');
  })
})

ในกรณีของฉัน ช่องป้อนข้อมูลให้คลิกที่ปฏิทินกำลังแสดงอยู่ด้วย ที่นี่ฉันต้องการเมื่อผู้ใช้คลิกที่ไอคอนปฏิทิน จากนั้นปฏิทินจะแสดงและวันที่ที่เลือกจะปรากฏในกล่องข้อความ


javascript html datepicker jquery
person Community    schedule 24.11.2018    source แหล่งที่มา
comment
ซ่อนตัวเลือกวันที่หลังจากการเริ่มต้น $("#car_d_date").datepicker('hide');   -  person DPS    schedule 24.11.2018
comment
$(#car_d_date).datepicker(แสดง); ลองสิ่งนี้   -  person Dixit Akabari    schedule 24.11.2018

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณสามารถตั้งค่าแอตทริบิวต์ showOn ของ datepicker ให้ว่างเปล่าได้

$("#car_d_date").datepicker({
  showOn: ''
});
$("#calicon").click(function(){
  $("#car_d_date").datepicker('show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<input type="text" class="inputType2" id="car_d_date" value="">
<span class="globalcolor" id="calicon">
  <i class="icon-calendar-7">icon</i>
</span>

person Mohammad    schedule 24.11.2018
comment
บราเดอร์จะดีกว่าถ้าถูกปิดเมื่อคลิกอีกครั้ง - person WC2; 24.11.2018
comment
@ WC2 สามารถทำได้ด้วยโค้ดง่ายๆ แต่ datepicker ไม่ทำเช่นนี้เป็นค่าเริ่มต้น เมื่อคุณคลิกที่ input datepicker จะแสดงเฉพาะและเมื่อคลิกอีกครั้งก็จะแสดงเช่นกันและจะไม่ปิด - person Mohammad; 24.11.2018
comment
เพื่อสลับเอฟเฟกต์บนไอคอนคลิก var i = 0; $("#calicon").click(function(){ console.log(i); if(i == 0){ $("#car_d_date").datepicker('show'); i++; } else { $("#car_d_date").datepicker('hide'); i--; } }); - person Pranesh Janarthanan; 24.11.2018