DatePicker onchange事件没有在jQuery中触发

时间:2015-09-23 08:10:09

标签: javascript jquery datepicker

我有一个按钮和一个文本框。弹出按钮日期选择器弹出窗口,用户从日历弹出窗口中选择日期,并在文本字段中填充所选日期。

现在我想在文本字段中填充结果时触发事件。 Onchange事件对此不起作用,因为textfield onchange事件仅在失去焦点时才会触发。就我而言,它是从外部来源改变的。

因此,我想为按钮点击触发一个onSelect事件。但是事件再次没有被触发。

这是我的代码

<input type="text" class="textbox_small" name=""
            value="" id="txt_node" disabled="disabled"
            onchange="fnChangeTime();" />
<input type="button" name="" value=""
            class="timePicker_button" id="lnk_hpd"
            ; style="background-image: url('images/Date_time_picker.gif'); width: 29px; height: 20px;"
            onclick="" onselect="" "disabled"/></td>

$('#'+fnParseIDForJ('lnk_hpd')).click(function () {
             NewCssCal('txt_node','ddmmyyyy','arrow',false, null, null, null, fnInterimSave, 'txt_node');

    });
$('#lnk_hpd').datepicker({
    onSelect:function(datesel){
    alert("hello");
   //   alert("Selected date: " + dateText + "; input's current value: " + this.value);
     // $(this).change();
    }
});

此处未触发任何事件。任何帮助将不胜感激

2 个答案:

答案 0 :(得分:5)

1.在点击按钮上的text box上打开日期选择器,因此您必须使用文本框的ID,而不是按钮和方法$('#txt_node').datepicker('show');来显示日期选择器。
2.如果change事件被触发,则datepicker将保持打开状态,而不会关闭,因此行$('#txt_node').datepicker('hide');

检查一下。

$('#txt_node').datepicker({
  onSelect: function(datesel) {
    $('#txt_node').trigger('change')
  }
});
$('#lnk_hpd').click(function() {
  $('#txt_node').datepicker('show');
})

$('#txt_node').change(

  function(event) {
    $('#SelectedDate').text("Selected date: " + this.value);
    $('#txt_node').datepicker('hide'); // if youdon't hide datepicker will be kept open

  })
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="textbox_small" name="" value="" id="txt_node" disabled="disabled" onchange="fnChangeTime();" />
<input type="button" name="" class="timePicker_button" id="lnk_hpd" ; onclick="" onselect="" "disabled" value='Open' />
<br/>
<br/>
<span id='SelectedDate'></span>

答案 1 :(得分:0)

我做过类似的事情:

HTML

Class Connection {

private $host;
private $host_user;
private $host_pass;
private $db_name;
public  $db;

    function __construct(){
        # code...

        try {

        $this->host             = 'localhost';
        $this->host_user        = 'root';
        $this->host_pass        = '';
        $this->db_name          = 'database';

        //Main Connection script
        $this->db = new PDO('mysql:host='.$this->host.'; dbname='.$this->db_name, $this->host_user, $this->host_pass);
        $this->db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

        // You can turn this to true too ..
        $this->db->setAttribute( PDO::ATTR_EMULATE_PREPARES, false );
        $this->db->exec("SET CHARACTER SET utf8");

        } catch (PDOException $err){

            echo "harmless error message if the connection fails";
            $err->getMessage() . "<br/>";
            die();  //  terminate connection

        }

    }
 }

的JavaScript

<input type="text" id="NewDate" style="display:none" />