We Keep Coding

How to change the bootstrap datetimepicker to display only dates and not time

I have several inputs with dates. I don't need time, but somehow I can't get rid of it.
I tried all the solutions I found on StackOverflow without success.
I am using the tempusdominus datetimepicker.
JS FIDDLE LIVE DEMO
Does anyone know how can I remove the option to enter hours and minutes?
I thought format: 'MM/DD/YYYY' would do the trick but apparently it's not working.
$('#monthDatetimepicker').datetimepicker({
defaultDate: date,
viewMode: 'days',
format: 'MM/DD/YYYY'
});

You need to set the default options so that it applies to newly created date[time]pickers:
From the options page on how to set global defaults:
$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
viewMode: 'days',
format: 'MM/DD/YYYY',
});
Updated fiddle
Your issue was that this line
$('#monthDatetimepicker').datetimepicker({
format: 'MM/dd/YYYY'
doesn't get applied to anything as $('#monthDatetimepicker') === 0 at the time the code runs.
Moving that line to the end also does nothing as your newly created date inputs have id="monthDatetimepicker" + i. Changing to a valid ID such as:
$('#monthDatetimepicker0').datetimepicker({
format: 'MM/dd/YYYY'
then only works for the first picker.
So you could do some hideous $("[id=^monthDatetimepicker]").datetimepicker... or, easier, you could add a class into your html builder and use that as a selector. Or set it globally as above (which will affect other pickers unless they had a different format applied). (or use a datepicker instead...)

Add .substring(0,10) at the end.

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.

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');
});

Updating jQuery Datepicker restricted dates when a button is clicked

Is there a simple way to update a jQuery Datepicker when a button is clicked? The datepicker is displayed inline, and I would like it to always be visible.
The logic flow behind this is that the user would check off certain dates and click the 'Done' button, which would update the datepicker to restrick the dates they selected.
The code below just creates the datepicker when the program opens. Should I just create a new datepicker with the restricted dates every time the user clicks the 'Done' button?
$( "#calenderDiv" ).datepicker({
minDate: 0,
onSelect: function(dateText, obj){
$('#A12').val(dateText);
},
beforeShowDay: function(date) {
var day = date.getDay();
return [(day == 0)];
}
});

The jQueryUI documentation states that
By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.
Is your #calenderDiv indeed a div or a span?
Edit
Save the selected date in a variable, and inside beforeShowDay you check if the date in the calender that is currently being added has the same weekday as the selected day.
You would then end up with the following code:
var curDate;
$("#calenderDiv").datepicker({
minDate:0,
onSelect:function(dateText, obj) {
$("#A12").val(dateText);
curDate = new Date($(this).val());
$(this).datepicker("refresh");
},
beforeShowDay:function(date){
return [(typeof curDate === 'undefined' || day != curDate.getDay())];
}
});
Alternatively, if you want to have multiple days crossed out, use an array instead, push the selected weekdays onto it and later check inside beforeShowDay if the date is in the array.

Format datepicker date to input

I am trying to make a datepicker work. The datepicker pops up when you click a calendar icon right next to an input field. When a use clicks the icon, and selects a date, the input field should populate with the date. This works if i do not try to format the date, but as soon as i do, i get an
'Cannot read property "formatDate" of undefined'
The icon of a calendar has a class of '.calendar'. Here is my code for when they click that icon.
$('.calendar').datepicker({
format: 'mm/dd/yy',
startDate: '-1'
}).on('changeDate', function (ev) {
$(this).prev('input').val(
$.datepicker.formatDate('mm/dd/y', ev.date)
);
$(this).datepicker('hide');
});
As soon as it hits
$(this).prev('input').val(
$.datepicker.formatDate('mm/dd/y', ev.date)
);
It stops working. What am i doing wrong here?
If you just do $(this).prev('input').val(ev.date); it works perfect, but that format is wrong, and it will not go into my database.
Thank you in advance.