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.

vuejs materializecss timepicker not get value

How can I get time value using materializecss Timepicker in Vuejs
Meterilize css Time Picker Jsfiddle LInk
It's give me value in jsfiddle but when I doing it my vuejs project it's not working..
Vue.js Code:
<v-text-field
name="start-time"
id="edit_start-time"
class="timepicker"
></v-text-field>
mounted() {
$('.timepicker').pickatime({
default: 'now', // Set default time: 'now', '1:30AM', '16:30'
fromnow: 0, // set default time to *
twelvehour: true, // Use AM/PM or 24-hour format
donetext: 'OK', // text for done-button
cleartext: 'Clear', // text for clear-button
canceltext: 'Cancel', // Text for cancel-button
autoclose: false, // automatic close timepicker
ampmclickable: true, // make AM PM clickable
aftershow: function() {} //Function for after opening timepicker
});
$('.timepicker').on('change', function() {
let receivedVal = $(this).val();
console.log(receivedVal);
});
},
NB: My fiddle works fine and if you check console it give me value but same code not work in Vue.js Project my Problem in Vuejs.. i want to get value like jsfiddle

Please use
v-model.lazy="deliverySchedule"
worked for me !!!

Jsfiddle Link With Solution own my problem
I got solution by use input
<input class="timepicker" v-model="deliverySchedule" >

I think you should not use jQuery for this.
Vue offers some nice bindings wich are working way better.
<v-time-picker v-model="myTimeValue"></v-time-picker>
In this code i bind myTimeValue (a local data variable) to the actual value of the timepicker. Now i can use it anywhere and vue deals with all updating stuff.

I think you should use ref
If you need directly access a child component in JavaScript you have to assign a reference ID to the child component using ref.
For more information take a look at Link.
How to use:
Your html should be similar to this:
<div class="input-field inline">
<label for="startDate" class="materialize-label">Start Date</label>
<input id="startDate" ref="startDate" type="date" size="12" class="startDate timepicker">
</div>
You also need to initialize it with jquery (the same way you have done it)
$('.timepicker').pickatime({
...
...
...
})
For example, when your user submits a form you just need to use: this.$refs.startDate.value
This will grab the value of the date.
If you want to bind changes from the user you can use v-model.
Otherwise, I think using v-model is unnecessary.
Vue Docs:
You can use the v-model directive to create two-way data bindings on
form input and textarea elements. It automatically picks the correct
way to update the element based on the input type
More information at: Link

Prevent clearing input after closing bootstrap-datepicker

when using bootstrap-datepicker with:
$('.input-group.date').datepicker({
language: "de",
todayBtn: "linked",
todayHighlight: "true",
autoclose: true
});
it removes the current value (hard coded via HTML) from an <input value="02.02.2017" type="text"> field after it shows up and the user closes the datepicker by clicking anywhere else in the browser. Is there a way to remove this behaviour? Is it possible to let the current value of the <input value="02.02.2017" type="text"> unchanged after dismissing the datepicker?
Using the option forceParse: false doesn't work.
P.S. The format used by bootstrap-datepicker is the same as I use as value in the <input> tags: dd/MM/yy.
Thanks a lot for your help!

Forget about it.
I used another declaration of .datepicker({ in my code before which blocked the other usage.
Thanks for all your help and don't use .datepicker({ at the same selector if it is used before in the code.

JqueryUI Datepicker: Uncaught TypeError: Cannot read property 'settings' of undefined?

I am developing a asp.net MVC4 project where i use lots of JqueryUI datepicker.
For one of my date picker when i tried to click on datepicker image i am getting some error like,
Uncaught TypeError: Cannot read property 'settings' of undefined jquery-ui-1.10.3.min.js:9
Html
<div>
<input type="text" id="tsDte" style="font-size: 14px;width: 50%" >
<img src="~/Images/dayPicker.png" onclick="tsDatePickerClick()" style="vertical-align:bottom"/>
</div>
Javascript
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
function tsDatePickerClick() {
$("#tsDte").datepicker('show');
}
Here i have a Textfield and a datepicker image.When i click on datepicker image datepicker will popup .
i have followed the similar way in other datepicker and they are working fine.I have only problem with this date picker.
Any help is appreciated.

That same error will be shown if you try to open a datepicker on an input field who has the class "hasDatepicker" assigned. Simply remove this class in the html.
Before:
<input type="text" value="01/01/2014" class="hasDatepicker">
After:
<input type="text" value="01/01/2014">

I think your datepicker wasn't created correctly, so when you call show, it expects a settings object.
Probably you didn't create it inside $(document).ready, you should have:
$(document).ready(function(){ //Add this line (and it's closing line)
var currentDate = new Date();
$("#tsDte").datepicker({
dateFormat: 'yy-mm-dd',
maxDate: 0,
changeYear: true
}).attr('readonly', 'readonly');
$("#tsDte").datepicker("setDate", currentDate);
});
Hope this helps. Cheers

You are including the jquery-ui-1.10.3.min.js library.
Your issue is caused by duplicating your jQuery UI core scripts.(check if you are including any other librady such as jquery-ui-1.10.3.drag-drop.min.js .
Load just them once, and your issue will go away.

On refreshing the page, you need to remove class 'hasDatepicker' and then set the settings (again). On refresh, the class is kept and so the datepicker is not recreated.

In my case, this was caused because I had an span with id date and the input had the same id. Giving the input a different id solved the problem.

Had the same issue because I had both
#Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { #class = "DatePicker" })
and
#Html.HiddenFor(m => m.StartDate)
in the same form on my view.

The accepted answer is probably the solution for most people, but This can happen when the picker is properly initialized but another element higher up in the DOM has the same id as your date input element.
You can check if that's the case by querying for this in your browser's console: $('*[id=my-id]');
The code for this datepicker is fairly old and therefore doesn't follow the best practices - it relies on the id attribute when it should really have just tracked the original DOM element reference, but it is what it is.

Multi Dates Picker Bug?

I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.

The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle

I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready