Question

我是HTML的新手，所以也许这个问题可能看起来很愚蠢。我正在创建一个文本字段，我可以存储日期值。我已经使用了datepicker（）。但不知何故，该功能不能单击一下。它需要两次点击才能工作。这是我的代码

function clearText(defaultText, textBoxControl) {
  if (textBoxControl.value == "something") {
    textBoxControl.value = "";
    //alert("hi");
    $(function() {
      $("#watermark").datepicker();
    });

    textBoxControl.style.color = 'black';
  }
}

function createWatermark(defaultText, textBoxControl) {
  if (textBoxControl.value == "") {
    textBoxControl.value = defaultText;
    textBoxControl.style.color = 'gray';
  }
}

<!DOCTYPE html>

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <input type="text" id="watermark" style="color:gray;" value="something" onclick="clearText(this.value,this)" onblur="createWatermark('something', this)">
</body>

</html>

Answer 1

在函数外部调用日期选择器。

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

$(function() {
    $("#watermark").click(function() {
        $(this).datepicker().datepicker( "show" )
    });
});
function clearText(defaultText, textBoxControl) {
  if (textBoxControl.value == "something") {
    textBoxControl.value = "";
    //alert("hi");
    textBoxControl.style.color = 'black';
  }
}

function createWatermark(defaultText, textBoxControl) {
  if (textBoxControl.value == "") {
    textBoxControl.value = defaultText;
    textBoxControl.style.color = 'gray';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="watermark" style="color:gray;" value="something" onclick="clearText(this.value,this)" onblur="createWatermark('something', this)">

Answer 2

这是日期时间选择器的示例...有关详细信息，请转到此Link

＆＃13;

$(document).ready(function() {
    $('#watermark')
        .datepicker({
            format: 'mm/dd/yyyy',
            autoclose: true
        })
        .on('changeDate', function(e) {
            // Revalidate the date field
            
        });
    });

＆＃13;

#eventForm .form-control-feedback {
    top: 0;
    right: -15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

 
<form id="eventForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Date</label>
        <div class="col-xs-5 date">
            <div class="input-group input-append date" id="watermark">
                <input type="text" class="form-control" name="date" />
                <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

    <div class="form-group">
         
    </div>
</form>

＆＃13;

Answer 3

试试此代码

<script>
     $( function() {
                $("#watermark").datepicker();
            });
  function clearText(defaultText, textBoxControl)
    {

    if(textBoxControl.value == "something")
        {
        textBoxControl.value = "";
        //alert("hi");


            textBoxControl.style.color = 'black';
        }
    }
    function createWatermark(defaultText, textBoxControl)
    {

        if(textBoxControl.value == "")
        {
            textBoxControl.value = defaultText;
            textBoxControl.style.color = 'gray';
        }
    }
    </script>

当文本框上的onclick函数调用时，datepicker（）在2次单击后工作，而不是一次

3 个答案: