Default value

[1000camels]

It appears that the default value is not being set within the picker (for either the date or time).

I checked the markup before and after selecting the same date which is in the input value. Before I manually select it, it is not selected within the picker. How does one get this value to be picked up?

[Jivebunny]

@1000camels With which code do you initialize your datepicker?

[1000camels]

/** * Date Picker */ $('#order_date').pickadate({ format: 'dddd, mmmm d', selectYears: true, selectMonths: true, min: moment() .add(3,'d') //replace 2 with number of days you want to add .toDate() });

/** 
 * Time Picker
 */
$('#order_time').pickatime({
    format: 'h:i A',
    interval: 15,
min: [8,00],
max: [21,45],
closeOnSelect: true
});

[Jivebunny]

There's nothing in your code that sets a time or date in both pickers. I suggest using the .set method for best effect:

dpicker.set('select', minDate); tpicker.set('select', 480);

To be able to do the above you'd need to change your code to:

    var minDate = new Date();
    var plus3Days = 3;
    minDate.setDate(minDate.getDate() + plus3Days);
    var orderdate = $('#order_date').pickadate({
        format: 'dddd, mmmm d',
        selectYears: true,
        selectMonths: true,
        min: minDate
    });
    dpicker = orderdate.pickadate('picker');
    dpicker.set('select', minDate);

    /** 
     * Time Picker
     */
    var ordertime = $('#order_time').pickatime({
        format: 'h:i A',
        interval: 15,
    min: [8,00],
    max: [21,45],
    closeOnSelect: true
    });
    tpicker = ordertime.pickatime('picker');
    tpicker.set('select', 480);

I've taken out moment.js since I think you don't really need it in this case. Key takeout here is the .set methods, which will allow you to set the pickers to a default date/time.

Also, check out the API documentation. That will help you a lot as well

[1000camels]

I should have been clearer. The preset date and time are coming from PHP and are being set in the value attribute for the input field. Is there are way to do this using onRender or onSet? I tried but failed.

[Jivebunny]

@1000camels I edited my original comment above yours with code to do what is said and set in your original code.

Based upon your response above this one, I'd take these values with jQuery and put them into a var and then put that var into the configuration as I did with minDate for example.

Maybe do this:

var minDate = $("input[unique attribute]").val();

or:

var minDate = $("#id").val();

[1000camels]

But I am not setting the minDate. I am setting the previously selected and session-saved date, when the user returns to the page with the pickadate widget

[Jivebunny]

Ah okay. But shouldn't you still able to get these values (I think you said you had those as a value attribute for the input fields through php?), and then put them in the date or timepicker by using:

dpicker.set('select', phpValueVariable); 

after initializing the datepicker?

Plus having some more info/insight on/in your specific webpage and code would be helpful, since there's different libraries in play here as well as php etc.

[1000camels]

Is there some trick to the initialization, because the date being set is not the same as what is in the value attribute.

I am executing this right after the picker is initiated:

datepicker.pickadate('picker').set('select', $('#order_date').val() );

The value is matching the format (format: 'dddd, mmmm d',) which does not include a year. Could that be the issue?

[Jivebunny]

As far as I can tell, pickadate needs a year for it to be a valid format. But I cannot confirm this for you. Sorry

[mihail-minkov]

I noticed something particular. I was initializing it using the value attribute of the input. What I noticed was that if I used an input[type=date] it didn't work, I suppose it's the word formatting. So I switched to an input[type=text] and it worked as supposed to.