在 DateBox Jquery Mobile 中动态设置日期和时间答案

【问题标题】：Dynamically setting date and time in DateBox Jquery Mobile在 DateBox Jquery Mobile 中动态设置日期和时间
【发布时间】：2015-11-02 12:18:34
【问题描述】：

我需要将日期和时间动态填充到 JQuery DataBox 输入字段。我尝试这样做，但无论我传递的数据如何，它都会在输入字段中填充当前日期。

这是我要克隆到我的界面中动态拥有的日期选择器。

HTML:-

<input class="time-input day-time-picker day-time-picker-inline-input"  type="text" data-role="datebox" data-options='{"mode":"datebox", "useFocus": true}' style="width:8em" />

Javascript:-

var datePicker = $("#date-time-picker-template-container .date-time-picker-template").clone();

我创建了一个时间选择器并像上面一样克隆，

HTML :-

var timePicker = $("#time-picker-template-container .time-picker-template").clone();

Javascript :-

<input class="time-input day-time-picker day-time-picker-inline-input" type="text" data-role="datebox" data-options='{"mode":"timebox", "useFocus": true}' />

插入日期

$(".time-input",  datePicker).datebox();

$(".time-input",  datePicker).datebox("refresh");

$(".time-input",  datePicker).datebox('setTheDate', dynamicDate);

插入时间

$(".time-input",  dayTimePicker).datebox();

 $(".time-input",  dayTimePicker).datebox("refresh");

 $(".time-input",  dayTimePicker).val('datebox', {'method':'set', 'value':dynamicTime});

我想根据收到的响应为这些 DateBox 输入字段动态设置日期和时间。

是否有任何控件可以使用 DateBox 在单个控件中获取日期和时间？

谢谢。

【问题讨论】：

代码中 DateBox 的值是在哪里设置的？克隆将忽略值字段。
编辑了问题。现在它具有插入日期和时间的代码。克隆不会保留值？
不，它不会成立。所以你必须在克隆后设置值。
但我只在克隆后设置了值。但它仍然显示当前日期而不是设定日期。
我能知道任何可能的方法来让它正确，以便我可以尝试前进

标签： javascript jquery jquery-mobile datepicker datebox

【解决方案1】：

克隆您的模板，将它们添加到容器 DOM 元素中，然后告诉该元素使用enhancedWithin()。这将创建数据框小部件，然后使用 setTheDate 方法设置日期和时间：

$("#btnAdd").on("click", function(){
    var dynamicDate = new Date(2014,3,22,10,11,0,0);

    var datePicker = $("#templates .date-time-picker-template").clone();
    var dayTimePicker = $("#templates .time-picker-template").clone();
    $("#time-picker-block").append(datePicker).append(dayTimePicker).enhanceWithin(); 

    $(".date-input",  datePicker).datebox('setTheDate', dynamicDate);
    $(".time-input",  dayTimePicker).datebox('setTheDate', dynamicDate);
});

DEMO

【讨论】：

【解决方案2】：

我不确定我是否遵循您想要完成的任务，但是是的，有一种模式可以同时进行日期和时间操作 - 滑动框。

您需要设置（至少）以下选项：

{
  mode = "slidebox",
  overrideSlideFieldOrder = ["y","m","d","h","i"],
  overrideDateFormat = "%Y-%m-%d %k:%M
}

对于它的价值，flipbox 可以可能被更改为与两者一起使用，但这并不重要。 datebox 可能已经可以工作（我从未尝试过），但您需要对 CSS 进行相当大的改动 - 至少首先要使控件更宽。

【讨论】：