Update bootstrap datetime widget to set date - javascript

I'm using the Bootstrap datetimepicker in one of our projects. It is a MVC application and it hides the date input by default and shows the bootstrap datetime picker.
The problem we have now is that we're not able to set the date that's set in the date field in the widget. It always loads today.
eg:
I load the form in the browser
I choose a date in the datetime picker
I submit the form with a error
The page is reloaded and the datepicker is set to today, the input value is the correct day and if I navigate to the date in the datepicker is shows up as selected.
I've read through the documentation and tried to use the update function and the setdate function but they didn't do a thing and also didn't return a error.
What I expect it to do is show the selected date if the input is filled.
Now I'm stuck.
edit:
I use a input type="text" on the page with a classname datePickerInline.
On that class there's a css style that hides the input and the following script is present:
/* Document Ready Inits */
$(function () {
initDatePickers();
});
/* Bindings */
function initDatePickers() {
$('.datePickerInline').datetimepicker({
inline: true,
keepOpen: true,
debug: true,
locale: 'nl'
});
}
The input can be prefilled with a date. That works like a charm. If I for example get $('.datePickerInline').val() and try to add setDate in the datetimepicker method it doesn't work. I cant get .update() to work. It errors out all the time.
The stupid thing is that the date is set correctly but the widget wont "scroll" to the correct page...

Related

free-jqgrid with bootstrap and datepicker issue

I am using demo sample located https://jsfiddle.net/OlegKi/90qmjean/3/
Some reason datepicker is not rendering? also i need to set dateformat to
ISO8601Long:"Y-m-d H:i:s"
But with original date formatter shows selected date as 'Y-3-14 H:i:s'
see the screenshot for details:enter image description here
The problem, which you described in comments above, is the following: you are wonder why the Bootstrap datetimepicker, used in the demo http://jsfiddle.net/OlegKi/duooa5oy/1/, don't close the calendar window after choosing the date.
First of all, I want to stress, that it's the default behavior of the Bootstrap datetime picker. You can try any demo on the page http://eonasdan.github.io/bootstrap-datetimepicker/ to verify that. The reason of the behavior is easy to understand. The datetimepicker allows to change the time and not only the date. The corresponding control contains 4 buttons, which increase/decrease the time via click on the buttons. I marked the buttons on the picture below:
Thus, what you probably want is closing of the datetimepicker if the date (and not the time) is changed. One can implement the requirements by adding the following lines in the demo:
$(el).bind("dp.change", function (e) {
if (e.date.dayOfYear() !== e.oldDate.dayOfYear()) {
$(this).data("DateTimePicker").hide();
}
});
See the modified date http://jsfiddle.net/OlegKi/duooa5oy/7/
It looks like when i updated boostrap-datepicker to latest version, it worked.

Bootstrap datepicker's view is not updating when trying to setDate from JavaScript

I am using Bootstrap Datepicker for choosing dates multiple times.
I am trying to do like, if user select date of first datepicker then second datepicker should also get selected automatically.
I got success to do so using...
$('#firstDatePicker').on('changeDate', function(e) {
if (e.date) {
$("#secondDatePicker").datepicker("update", e.date);
console.log(e.date,'changed');
}
});
This is working properly. But problem is, when I am sending data from another page to this page with the help of cookies and after getting data from cookies I am updating both datepicker (firstDatePicker, secondDatePicker) like this...
FIRST TRY
$("#firstDatePicker").data('datepicker').setDate(moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").data('datepicker').setDate(moment(obj.date_and_time,'DD/MM/YYYY')._d);
SECOND TRY
$("#firstDatePicker").datepicker('setDate',moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").datepicker('setDate',moment(obj.date_and_time,'DD/MM/YYYY')._d);
THIRD TRY
$("#firstDatePicker").datepicker('update',moment(obj.date_and_time,'DD/MM/YYYY')._d);
$("#secondDatePicker").datepicker('update',moment(obj.date_and_time,'DD/MM/YYYY')._d);
above mentioned all try are working and I have also tried to get date from datepicker using $("#firstDatePicker").datepicker('getDate');. I am getting the date also what I have set programmatically but datepicker's view remain same as like nothing happened.
I have used moment.js to convert the date from a JSON object that is 'obj' which is coming in dd-mm-yyyy format so please don't get confused here these all are working even I am able to see the console of $('#firstDatePicker').on('changeDate') but the problem is with view which is not showing the date what is being set.
https://jsfiddle.net/devqualwebs/5gvn5w1y/9/

AngularJS - Bootstrap Datepicker

I have a problem with a bootstrap datepicker. Here is a Plunker example.
This one is not from me. To get it working, you have to change line 60 into:
else if (attrs.initDate)
Just delete the exclamation mark.
Now you get the init-date in the 2nd input-field.
My Problem:
If you click in the 2nd input-field and click somewhere in the document without selecting a date, it changes the init-date into todays date. I want to keep the init date, dough.
Does anyone have a solution for it?
you can look at the documentation here:
http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#forceparse
look at the forceParse, you need to set it to false.
so just add:
$(element).datepicker({
format: format,
forceParse: false

Date time picker in bootstrap modal, scrolling

I have a problem when scrolling in bootstrap modal with the date time picker plugin. (not date picker).
When I am scrolling in modal, the date box stays fixed page, but normally it shouldn't do that
Where is a lot solutions for bootstrap-datepicker, but I use bootstrap-datetimepicker , and I can't find a solution for it, or maybe I can't find it?
Add position: relative; to the parent container.
I also had encountered the same problem, and my date time picker default is displayed below the input box, the separation of the input box and date time picker plug when slide the modal, the I can let the date time picker plug default display on the input box above, so my javascript code is:
$('#datetimepicker').datetimepicker({
#this is other option
...
pickerPosition: 'top-right',
});

jquery ui dateinput alternative field

I am using jquery ui dateinput and i am showing the calendar when the user clicks a small image. In the calendar i have set the selectors to true, so it also shows months and years. What i want, is to pass the chosen date into a textbox as a value.
I did this so far.
$("img[id='CalIcon']").data("dateinput").onHide(function(e){
var dt = $("img[id='CalIcon']").data("dateinput").getValue('dd-mm-yyyy');
$('#relativeDOB').attr({value:dt});
});
The problem is that whatever year or month i am choosing is passing only the current. The day works fine.
Any ideas?
thanks

Categories

Resources