We Keep Coding

Bootstrap Datetime picker dynamic default date not working

I am trying to update the default date on each link clicked. But it only updates for the first time. After I click another link it still shows old date. But when I debug the defaultD is updating.
I am using bootstrap-datetimepicker
updateSessionDate: function(datetime){
$("#updateUTCDate").modal("show");
var defaultD = moment(datetime, "MMM Do YYYY, h:mm a").format("MM-DD-YYYY HH:mm:ss");
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
},
Click any date it will show only the first one I have click.
How do I update date and time on each click?

$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
This creates the datetimepicker with an initial value, so doesn't work if the datetimepicker already exists.
You either need to call date([newDate]) to update it in place (you'll need to initialise it elsewhere) or destroy() it when the modal is closed, allowing you to remake it with a new initial value.

jquery datepicker textbox value issue

I have 2 text boxes namely fromDate & toDate for date search , in which by default, current day will be showed.
working code:
Jquery
(document).ready(function () {
$('.dateClass').datetimepicker({timepicker: false}); // css for displaying date without time
$('#fromDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
$('#toDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
});
Struts
<html:text property="fromDate" styleId="fromDateId" styleClass="dateClass" />
<html:text property="toDate" styleId="toDateId" styleClass="dateClass" />
Issue:
By default current day shown in both textboxes, suppose user choose different dates and submit,
db records are fetched and displayed but these 2 texboxes replaced with current dates how to avoid this.
kindly help me to resolve.

Update: There are reports this no longer works in Chrome.
This is concise and does the job:
$(".fromDateId").datepicker('setDate', new Date());
And another thing,
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});

Update bootstrap datetimepicker after every step/click

I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?

Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});

Add Day Before Cut Off Time To jquery.ui.datepicker

What I Have
In jquery.ui.datepicker I have changed the value minDate to +1 so todays date or any historical date cannot be selected.
All good so far.....However.....
What I Want
I want to stop anyone selecting tomorrows date after 8pm today, so, after 8pm tomorrows date should no longer be available for selection.
I cannot see an option to do this in the default values or any of the examples on the datePicker website.
What is the best or easiest way I can achieve this?
Thanks in advance of a hopefully good suggestion

Since, jQuery DatePicker hasn't yet provided the functionality to support time(i guess) we need to do this in manual way.
You can use beforeShow options of jQuery DatePicker; which is called upon the datePicker UI display every time you click on DatePicker input field.
So, Inside beforeShow you can calculate the current time and manipulate the minDate as required ,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8PM
if(hour >= 20){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
}
Here is the working demo.
P.S
I haven't tried this yet but you should look into this
DateTimePicker plugin
if you want a more subtle approach

Setting 'option' on jqueryui DatePicker clears the textbox's value?

I've highlighted the example here:
http://jsfiddle.net/aDxeE/
Basically, a separate event (not known at construction) needs to set "option","maxDate" on the datepicker control. This 'clears' the textbox value which is really annoying, as the initial construction does not.
Can anyone offer a solution?
Edit:
Changing line 5 to:
$("#myinput").datepicker("destroy");
$("#myinput").datepicker({minDate:new Date(), maxDate: new Date()});
makes it work as expected, but is a seriously messy approach.

It's an issue with the format. Your initial value dd-mm-yyyy doesn't match the datepickers default format. To resolve, set the initial value to the correct format and specify the format as dateFormat when creating the datepicker.
Fiddle
Change to:
<input id="myinput" type="text" value="01-01-1970" />
And:
//construct datepicker
$("#myinput").datepicker({minDate:new Date(), dateFormat : "dd-mm-yy"});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
$("#myinput").datepicker("option","maxDate", new Date());

You could do this:
$("#myinput").datepicker('destroy').datepicker({maxDate:new Date()});
Removes the datepicker functionality completely. This will return the element back to its pre-init state.
Again re-initiate the datepicker with setting the maxdate option.
FIDDLE DEMO
UPDATE
Formated the code for the readability purpose:-
$("#myinput").datepicker("destroy");
$("#myinput").datepicker({
minDate: new Date(),
maxDate: new Date()
});

Try to give it in $(document).ready(function(){..});
//construct datepicker
$(document).ready(function(){
$("#myinput").datepicker({minDate:new Date()});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
});
$("#myinput").datepicker("option","maxDate", new Date());
Check JSFiddle.
FYI: use placeholder instead of value placeholder="dd-mm-yyyy"

How about manually setting it back again?
var d = $("#myinput").val();
$("#myinput").datepicker("option", "maxDate", "+2d").val(d);

This question was already answered here : https://stackoverflow.com/a/8945264/2050459
You need to set the date first trough code(using setDate) or by opening the datepicker(user interaction).
Here is how you would do it with code : fiddle
$("#myinput").datepicker({
minDate: new Date()
});
$("#myinput").datepicker("setDate", new Date());
In your example, try opening the datepicker and then trigger an event to set a maxDate, you'll see that the input will not be cleared because an active date has been set.

Jqueryui DatePicker clears the textbox's value?
myinput = ID of datapicker
$("#myinput").val('');