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.
Related
I am trying to add two calenders in a single page using javascript.
But it is not working for me for the second field. I tried the same for jQuery also. Still facing the same problem.
Can any one helpme . Thanks in advance.
Here is the code:
$(".datepicker").each(function () {
$(this).datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
});
});
You don't need to do this in loop (although that should also work.):
$(".datepicker").datepicker({
// your stuff here
});
Because class selectors returns a collection so this would work.
Sample Demo
What could be the issues:
What seems to me is most probably you have same ids to both the elements but still in this case your datepicker for both inputs will be intialized but on selection of a date only first field will be filled with dates if same id applied on every datepicker input.
Sample Demo with same ids.
Why not just this:
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true
});
It should apply plugin for each control with 'datepicker' class
Hey I am trying to use the bootstrap datetimepicker, but it seems as if every option I set is ignored. The default datetimepicker is displayed but I can't modify it in any way with the options given in the documentation. You can find the (not) working fiddle example here, where I am setting the sideByside attribute which obviously is not working.
This is my javascript
$(function () {
$('#bootstrap-datetimepicker-wrapper').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("10/02/2014"),
new Date(2014, 10, 21),
"10/05/2014 00:53"
],
sideBySide: true,
});
});
On the html site I pretty much use the minimum setup descripted here
Make sure you check the JS libraries you're including match the examples/documentation you use to implement. Your original fiddle pulled in sources from here: http://www.malot.fr/bootstrap-datetimepicker/ but you followed instructions for this plugin: http://eonasdan.github.io/bootstrap-datetimepicker/
Ok - check out this fiddle: http://jsfiddle.net/bdv8nrhw/3/
Your second attempt was very close - you still used
`<input value="" class="form-control" id="id_starting_time" name="starting_time" title="" type="text" data-date-pickDate="false" />`
data-date-pickDate="false" was preventing your date-picker to work.
You also don't have to initialize with
pickDate: true,
pickTime: true
those are defaults anyways - they won't hurt but are not necessary - Enjoy ;)
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.
Having a bit of an issue with the JQuery datePicker, I suspect it's just the matter of a setting I've overlooked or got wrong.
If you look at this simple fiddle: JS Fiddle
You'll see I've set the year range, so that the by default when you click on the input it will open it up on 1994, but if you then click on any of those dates, e.g. 3rd Sept, it'll actually put it in the input as 2012 still, rather than the year that is selected in the drop down menu.
How can I make it so that it uses the correct year without having to change the drop down and then change it back again?
Cheers.
As others have suggested, you have to set the defaultDate. However, unlike the other solutions, you don't want to hardcode the date since your dropdown list will be updating as the years pass since you're doing a relative list.
Try this instead...
function loadDatePicker() {
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
yearRange: "-18:-12",
defaultDate:"-18y-m-d" // Relative year/month/day
});
}
Weird, but adding defaultDate:"1994-01-01" to the datepicker options seems to fix it.
Fiddle
I think I got the reason..
It is because yearRange: just restrict the range in dropdown menu only.
It just change the list nothing else.
They mansion this over here..
http://jqueryui.com/demos/datepicker/#option-yearRange
[Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.]
To Prove this .. set date picker as below and you will find all date disable.
because it sawing us the calander of 2012 not 1994
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
yearRange: "-18:-12",
maxDate: new Date(2012,1-1,1)
});
To fix it you have to use defaultDate as well as minDate and maxDate
i hope i am clear
Using KnockoutJS for a jQuery datepicker found here, I have the following setup:
<span data-bind="text: myDateObject"></span>
<input style="display:none"
data-bind="enable: enabledBoolean,
datepicker: myDateObject,
datepickerOptions: {
buttonImage: '/Content/calendar.png',
buttonImageOnly: true,
showOn: 'button',
showOtherMonths: true,
selectOtherMonths: true,
defaultDate: new Date(),
minDate: '-1m',
maxDate: '+1m' }" />
myDateObject is a javascript Date object that could be set to null. When I click on the calendar image and the datepicker pops up, though, it always defaults to the maximum date, even if I have already brought up the datepicker and set a value once already.
As you can see in the code sample above, I'm trying to set the defaultDate to the current date, but it seems to ignore this completely. Perhaps this is due to the KnockoutJS bindings?
The issue ended up being related to how myDateObject was being returned back for the datepicker to access. The custom ko.dependentObservable being accessed was returning the date in a custom format, when it really needed access to the raw data.
To resolve the issue, another ko.dependentObservable was created to allow direct access to the raw Date.