Làm cách nào để chạy bộ chọn ngày trong sự kiện onclick đầu tiên?

Question

Tôi đang sử dụng số date picker from jqueryui này.
Nếu bạn nhìn vào trang đó, sau đó bạn sẽ thấy rằng họ đã chỉ được viết bằng một chức năng như thế này:

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

Nhưng tôi muốn để mở bảng chọn ngày của tôi trên một văn bản hộp sự kiện nhấp chuột.
Vì vậy, tôi đã viết này:

$("#datepicker").datepicker(); 

trong một chức năng mà tôi đang kêu gọi sự kiện onclick textbox.
Nhưng trong này có một vấn đề sắp tới.

Tôi chỉ nhận được bộ chọn ngày vào lần thứ hai tôi nhấp vào hộp văn bản.
Nếu tôi nhấp vào lần đầu tiên sau khi tải trang thì bộ chọn ngày sẽ không xuất hiện nhưng ngay sau khi tôi nhấp vào lần thứ hai thì bộ chọn ngày sẽ đến.

Tại sao? Và tôi có thể làm điều đó trên lần nhấp đầu tiên không?

Vâng tôi biết điều này đã xảy ra hoàn hảo nếu tôi đặt mã đầu tiên nhưng tôi muốn nó trong chức năng của tôi.

CHỈNH SỬA:
Bây giờ tôi sẽ giải thích cho tất cả các bạn chính xác những gì tôi đang làm.

Yêu cầu của tôi là như sau:

1) Khi tôi chọn ngày lần đầu tiên. Ngày trước ngày hôm nay phải được tắt trong lịch.
2) Bây giờ khi tôi chọn ngày lần thứ hai trong lịch, ngày sẽ bắt đầu một ngày sau ngày trước đó.

Tôi đã viết như thế này ....

$(function() { 
        $('#from').datepicker({ 
          defaultDate: "+5d", 
          changeMonth: true, 
          numberOfMonths:1 , 
          minDate:"+0d", 
          dateFormat: 'DD, MM d, yy', 
          onSelect: function(selectedDate) { 
            var option = this.id == "from" ? "minDate" : "maxDate"; 

            var instance = $(this).data("datepicker"); 

            var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); 


            dates.not(this).datepicker("option", option, date); 

          } 
        }); 

}); 

này hoạt động hoàn hảo trên một yêu cầu,
nhưng đối với yêu cầu thứ hai tôi cần phải kiểm tra đầu tiên nếu có bất kỳ giá trị hộp văn bản. Nếu có bất kỳ số nào sau đó
, nên chọn +1 trực tiếp cho ngày đó và các ngày trước đó sẽ bị tắt.

Làm cách nào để thực hiện việc này?

Answer 1

Lý do đó là không hiển thị trên nhấp chuột đầu tiên là vì ngay lập tức bạn nhấp vào lần đầu tiên, nó không được đăng ký như một bộ đếm ngày. Do đó, không có sự kiện onclick nói rằng nó sẽ hiển thị bất kỳ datepicker nào khi bạn nhấp vào nó.

Tuy nhiên, trên nhấp chuột thứ hai, bạn đã đặt nó làm trình đặt ngày trong khi nhấp chuột đầu tiên (và giờ đây nó có sự kiện onclick nơi hiển thị ngày tháng). Sự kiện onclick của trình đặt ngày phát sinh, hiển thị bộ chọn.

Như đã đề cập trong các câu trả lời khác, đây không phải là cách được khuyến nghị thực hiện. Nhưng nếu bạn thực sự muốn để ràng buộc nó onclick và không onload, bạn có thể hiển thị bảng chọn trên nhấp chuột đầu tiên bằng cách làm

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

này sẽ đăng ký các yếu tố như một datepicker và hiển thị sau đó hiển thị nó cùng một lúc.

Answer 2

Đảm bảo bạn đang gọi trình ghi ngày tháng khi tải trang và không phải với sự kiện onclick.

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
}); 

Answer 3

Tôi nghĩ rằng bạn hiểu sai ý nghĩa của:

$(function() { 
    $("#datepicker").datepicker();  
}); 

mà là giống như:

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
}); 

và

jquery(document).ready(function() { 
    $("#datepicker").datepicker(); 
}); 

Bằng kèm theo các $("#datepicker").datepicker(); bạn chỉ cần nói trình duyệt để thêm sự kiện .datepicker() vào trường ngày được chỉ định bởi mã số #datapicker trong sự kiện sẵn sàng tài liệu (khi tài liệu được tải và sẵn sàng để xử lý).

KHÔNG kèm theo, bạn KHÔNG thêm trình xử lý sự kiện cho đến khi tài liệu sẵn sàng, trong khi tải javascript (hoặc khi được gọi) hoặc gọi hàm nếu bạn đưa nó vào đó.

Hãy ghi nhớ rằng nếu bạn làm:

function mystuff() 
{ 
$("#datepicker").datepicker(); 
}; 
mystuff(); 

bạn sẽ nhận được xử lý bổ sung khi chức năng đó chạy mà có thể gây ra vấn đề nếu bạn sau đó gọi nó một lần nữa:

mystuff(); 

Answer 4

tôi đã sử dụng như thế này từ @Simen Echholt trả lời

<input onclick="$(this).datepicker().datepicker('show')" class="validate[required,custom[date]] text-input" ... 

Answer 5

tôi gọi nó trong hàm js, và nó làm việc. Xem đoạn mã:

Bước 1: Trong file: timepicker.jsp

<input class="time ui-timepicker-input" id="dcma_day_start" type="text" autocomplete="off" 
    placeholder="End time" onClick="dcmaTimePicker('dcma_day_start', 'dcma_durationId');"> 

Bước 2: Trong tập tin timepicker.js

function dcmaTimePicker(id, durationId) 
{ 
    var d = document.getElementById(durationId); 

    if(!d.value) 
    { 
     d.value = 15; 
    } 

    jQuery('input#'+id).timepicker({ 'step': d.value }).timepicker('show'); 
} 

Bước 3: Điểm mấu chốt là: gọi số .timepicker ('show'), hiển thị nút bấm giờ ở lần đầu tiên.

Answer 6

Nếu bởi bất kỳ cơ hội bất cứ ai muốn hiển thị datepicker trong một biểu tượng glyphicon và trên các lĩnh vực đầu vào tôi đã thực hiện như sau:

html phần:

<div class="form-group"> 
    <label>Fecha:<font color="#FF0000">*</font></label> 
<div class='input-group date' id='datepicker1'> 
    <input id="fecha" name="fecha" type="text" class="form-control" /> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
    </span> 
</div> 

javascript phần:

$(function() { 
     $("#fecha").datepicker(); 
     });//this enable the call to datepicker when click on input field 

     $(function() { 
      $("#datepicker1").click(function() { 
       $('#fecha').datepicker().datepicker("show") 
      }); 
     });//this one enables the onclick event on the glyphicon