如何启用datepicker?

时间:2015-12-03 04:12:38

标签: javascript datepicker

如何在点击第一个下拉列表时启用日期选择器,其他下拉列表和日期选择器将会出现选择?

Javscript

function checkOption(obj) {
      var CustomerBranch = document.getElementById("CustomerBranch");
      CustomerBranch.disabled = obj.value == "Please select";

      var monthyrtxt = document.getElementById("monthyrtxt");
      monthyrtxt.disabled = obj.value == "";

      <%--var fromdate = document.getElementById("fromdate"); 
      fromdate.datepicker("getDate") == "";--%>
      <%--$(".fromdate").datepicker("enabled");--%>
      <%-- $("#fromdate:enabled").datepicker(); --%>
      var fromdate =document.getElementById("fromdate").disabled='';
      <%-- $("#fromdate:enabled").datepicker(); --%>     


      var todate = document.getElementById("todate");
      todate.disabled = obj.value == "";
  }

HTML代码

<td> 
Business Id :-
</td>

<td> <select   name="Business" id="Business" onChange="checkOption(this)">
<option value="" disabled="disabled" selected="selected">-- Please select --</option>
<%for(Business business : Businesslevel) {%>
<option value="<%=business.getBusinessId()%>"><%=business.getBusinessId()%> - <%=business.getBusinessName()%></option>
<%}%>
</select>
</td>
</tr>
<td>
Branch Id :
</td>
<td>
<select   name="CustomerBranch" id="CustomerBranch" disabled="disabled">
<option value="" disabled="disabled" selected="selected">-- Please select --</option>
<%for(CustomerBranch custBranch : CustBranch) {%>
<option value="<%=custBranch.getBranchId()%>"><%=custBranch.getBranchName()%></option>
<%}
%>
</select>
</td>
</tr>
<tr>
<td>
From Date :
</td>
<td>
<input type="text" id="fromdate" disabled="disabled">
</td>
</tr>
<tr>
<td>
To Date :
</td>
<td>
<input type="text" id="todate" disabled="disabled">
</td>
</tr>

我已经尝试了很多次,但它仍然没有奏效。真的很感谢你的帮助。enter image description here

1 个答案:

答案 0 :(得分:0)

而不是使用纯javascript使用jquery。它的简易库让你开始。只需添加<link rel="stylesheet" href="/resources/demos/style.css">

即可 <head>

中的

&#13;
&#13;
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#fromDate" ).datepicker();

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

  });
  </script>
</head>
<body>
 
<p>From Date: <input type="text" id="fromDate"></p>
 

<p>To Date: <input type="text" id="toDate"></p>
 

 
</body>
</html>
&#13;
&#13;
&#13;