在DateBox Jquery Mobile中動態設置日期和時間

Question

我需要將日期和時間動態填充到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在單個控件中獲取日期和時間？

謝謝。

Answer 1

克隆您的模板，將它們添加到容器DOM元素中，然后告訴該元素to EnhanceWithin（）。 這將創建數據框小部件，然后使用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);
});

演示

Answer 2

我不確定我是否遵循您要完成的操作，但是可以，有一種模式可以同時進行日期和時間操作-幻燈片框。

您將需要（至少）設置以下選項：

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

對於它的價值，flipbox 也許可以改變，既要工作，但它的不平凡。 datebox可能已經可以工作了（我從未嘗試過），但是您將需要對CSS進行大量修改-至少首先要使控件擴大很多。