javascriptjqueryjquery-mobiledatepickerdatebox

Dynamically setting date and time in DateBox Jquery Mobile


I need to populate date and time dynamically to JQuery DataBox input field. I teried to do but it is populating the current date in the input fields irrespective of the data I pass.

Here is the date picker which I am cloning to dynamically have in my interface.

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();

Similar way I created a time picker and cloned as did above,

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}' />

Inserting Date

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

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

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

Inserting Time

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

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

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

I want to set date and time to these DateBox input fields dynamically based on the response I get.

Is there any control to get date and time in a single control using DateBox ?

Thanks.


Solution

  • Clone your templates, add them to a container DOM element and then tell the element to enhanceWithin(). This creates the databox widgets, then set the date and time using the setTheDate method:

    $("#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