I have a text input to which I have applied a DateTimePicker plugin
But when I click on the input before opening the DateTimePicker, it sets default value as current date, I want the value to stay empty as long as the user selects it from the DateTimePicker.
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
The DateTimePicker Library which i am using is:
eonasdan.github.io/bootstrap-datetimepicker
I have mentioned the answer in the comments above but just posting it as an Answer for someone who might face the same issue in the future
Initialize the DateTimePicker with useCurrent as false as shown below:
$('.datepicker').datetimepicker({format: 'DD/MM/YYYY',useCurrent:false});
Related
I'm trying to dynamically change the date picker value
I'm changing the input value using Jquery but unfortunately, date picker value stays the same.
image of the problem
You can see that the initial value is "19/06/2017" and after changing it shows the new value ("10/10/2017") in the text box but date picker still shows the previous date ("19/06/2017")
I tried using $('.datepicker').datepicker('update', $('#doc_due_date').val()); but still nothing changed
Is there a way update or refresh the date picker after changing the input value?
I read some answers regarding the same issue but seems like nothing worked, date picker still shows the initial value
thanks in advance.
p.s
I'm using bootstrap date picker
use this
$('#datepicker_id').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
I'm using the UI-Bootstrap Datepicker inline for date selection, as shown below.
<datepicker ng-model="profile.available_from" show-weeks="true"></datepicker>
I would like to enable the user to deselect the currently selected date by clicking the same date again.
Eg. the user clicks 29 May 2015, the corresponding tile is highlighted and profile.available_from is updated with the value. If the user now clicks that same date again, the selection highlight should be removed and profile.available_from is set to undefined/null.
Any ideas?
I guess this is not possible without modifying the original source code of datepicker.
It would have to check if the field already has the selected value, and if yes, then clear it. Which would complicate the code with no obvious benefit.
I would add clear button instead.
example code (taken from http://angular-ui.github.io/bootstrap/#/datepicker)
$scope.clear = function () {
$scope.profile.available_from = null;
};
I am working on a project using Ruby + the Bootstrap framework, including the Bootstrap datetimepicker plugin.
I have a field in my form as thus:
<div class='datetimepicker-input input-group' id='logged_at'>
<input class='form-control' data-format='DD/MM/YYYY hh:mm A' name='logged_at' type='text' value='27/06/2014 05:08 PM'>
<span class='input-group-addon'>
<i class='fa fa-calendar'></i>
</span>
</input>
</div>
As you can see, I want my datetimepicker to use the DD/MM/YYYY hh:mm A formatting, however, when I enter a default date and time in the value attribute of the <INPUT> tag when generating the form, and then click on the calendar icon to pop up the picker, the picker window just gives me NaN in the heading and won't let me select a date or a time.
If however, I leave the value attribute blank when generating the form, the popup works just fine.
I have also noticed that if I type over the default date in the field, and swap the month and day around, i.e. asMM/DD/YYYY hh:mm A,the popup works fine, i.e. the calendar defaults to the right day, however when I choose a date, it displays in the input field as DD/MM/YYYY hh:mm A.
I am wondering if there is another way I have to set the default date/time in the field? Simply populating the value attribute seems to be confusing the plugin, as it appears to be wanting the initial date in mm/dd/yyyy..., but then happy to show it as dd/mm/yyyy... afterwards.
Ok, I think I have figured this one out. It appears to be related to moment.js which bootstrap-datetimepicker relies on for date parsing.
Without messing around with the language options, there was a line in bootstrap-datetimepicker.js (line 222) which had to be changed from:
if (dateStr) picker.date = moment(dateStr);
to
if (dateStr) picker.date = moment(dateStr, picker.format);
Basically we had to use the picker.format as the second parameter to force mention to parse the entered date using the supplied format that we had in the INPUT field.
I'm Working with Asp .net MVC3.i'm having a text box with a datepicker image that textbox having a date filled in it.when i click select the datepicker image the popped up datepicker has to be pointing out the date which is in textbox instead of pointing the current date.Is there any jquery for this?
Use the setDate option :
$('element').datepicker({
defaultDate: '02/02/12'
}).datepicker('setDate', '02/02/12');
FIDDLE
Works just fine by default.
See fiddle: http://jsfiddle.net/ymLe2/1/
$('#dated').datepicker({showOn: "button"});
You need to post your code, so as to be able to identify the cause of your problem.
I'm using jQueryUI to add a datepicker to a textfield. It all works fine, but because of this i'm not able to type any text into the textfield. I can only add a date through the datepicker.
But i want users to be able to also enter things like NOW in the textfield. But currently entering manual text is blocked as you can see in this example fiddle: http://jsfiddle.net/Kugzd/
Is there anyway to change this behavior?
Just add constrainInput: false to your datepicker option
$(function() {
$('.date').datepicker({
constrainInput: false
});
});
Check the documentation
Demo: http://jsfiddle.net/Kugzd/2/
In addition to using constraintInput option (as noted by another answer), consider combining the datepicker along with Date.js library, which allows you to work with words and expressions such as today, tomorrow, next Tuesday and turn them into dates.