Jquery datepicker 在模式弹出窗口中不起作用

Posted 2023-05-09

【中文标题】Jquery datepicker 在模式弹出窗口中不起作用

【英文标题】：Jquery datepicker do not work in modal popup

【发布时间】：2020-12-16 02:34:37

【问题描述】：

var date = new Date();
var datepickerStartMonth = date.getMonth() + 1;
var datepickerStartDate = date.getDate() + "/" + datepickerStartMonth + "/" + date.getFullYear();

$("#datepicker").datepicker(
  format: "dd/mm/yyyy",
  startDate: datepickerStartDate,
  autoclose: true
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" name="date" class="form-control" id="datepicker" autocomplete="off" placeholder="dd/mm/yyyy" value="">

【问题讨论】：

也分享 html 部分

根据您使用的模态库，可能会克隆内容。因此，您需要在显示模式时在 input 元素上定义 datepicker()，而不是在页面加载时。

【参考方案1】：

我认为您想为输入设置默认值。 格式需要一个 0 直到数字 10。

var date = new Date();
var datepickerStartDay = date.getDate();
if (datepickerStartDay < 10) datepickerStartDay = "0" + datepickerStartDay; 
var datepickerStartMonth = date.getMonth() + 1;
if (datepickerStartMonth < 10) datepickerStartMonth = "0" + datepickerStartMonth; 
var datepickerStartDate = datepickerStartDay + "/" + datepickerStartMonth + "/" + date.getFullYear();

console.log(datepickerStartDate);

$("#datepicker").datepicker(
  format: "dd/mm/yyyy",
  startDate: datepickerStartDate,
  autoclose: true
).val(datepickerStartDate);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="date" class="form-control" id="datepicker" autocomplete="off" placeholder="dd/mm/yyyy" value="">