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.

how to change min date of kendo date picker: Jquery

I am creating a web app in which I have 2 date time textbox(txtFromDate, txtToDate), for which I am using Kendo-UI,
On my page load I am setting min date for my txtToDate
Which looks like below
$('#txtToDate').data("kendoDatePicker").min(new Date($('#txtFromDate').val()));
the above code works properly and setting the min date for txtToDate textbox properly,
but the problem is
when user changes from date let say from (05/08/2019) to (05/20/2019)
the min date for txtToDate should be changed from 05/08/2019 to 05/20/2019
but nothing happens, below is my onchange function
$('#txtFromDate').change(function () {
$('#txtToDate').data("kendoDatePicker").min(new Date($('#txtFromDate').val()));
});
how can I reset the min date for txtToDate Textbox?

I think the problem is that you're binding to the change event of the input, instead of the kendo widget.
Replace
$('#txtFromDate').change(function () {
with
$('#txtFromDate').data("kendoDatePicker").bind("change", function () {
Edited to add: you may also prefer to just use Kendo's date range picker

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

Jquery UI Datepicker return minDate

I'd like to think I'm tech savvy, but my experience with js is all code-hacking, so I really don't know what I'm doing.
I have all of the options of the datepicker set up in an external js file. The datepicker is for selecting a delivery date. In the header, I have a clock that counts down to 2 PM - the latest we can deliver. At 2, the clock turns off and is replaced with an image. However, we don't delivery on Sundays or specific dates set in the datepicker options, but the clock still shows on those dates.
I want the clock to read the next available delivery date from the dateicker (set by minDate). Is there any way for me to call that variable from my datepicker options back to the header?

var minDate = $( "%your_selector%" ).datepicker( "option", "minDate" );

You can use the option getter for the datepicker:
$(selector).datepicker('option', 'minDate');
jQuery UI Datepicker - minDate

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