Why Date picker clear my input and select after clicked? - javascript

I have a problem in datepicker. My form has input and select option. After click input datepicker, my input and select always reset to first load page. What is my problem?
$('.myClassDate').datepicker({
format: "yyyy-mm-dd",
todayBtn: 'linked',
todayHighlight : true,
autoclose: true
});

maybe button in your form has not type="button" and your page will reload after click button

Related

Bootstrap datetimepicker automatically populates date

When I click on datetimepicker current date automatically gets populated in input field. I want that it should populate only when I select a date in popup box. Is there any flag to do it ?
$('#datetimepickerStartDate').datetimepicker({
format: 'DD-MMM-YYYY'
});
Ok. I got the solution. It can be done by setting "useCurrent" to false.
Setting the useCurrent option to false will disable this functionality:
$('#datetimepickerStartDate').datetimepicker({
useCurrent: false
});

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.

Update bootstrap datetimepicker after every step/click

I'm using this extension of Bootstrap's datepicker. It works well enough, but I've come upon a usability issue - when selecting a date/time, the text field the datepicker is attached to does not update unless all the steps (year/month/day/hour/minute) are selected to the end. Clicking away from the datepicker before clicking all the steps yields no change to the date in the text field.
How do I make it so that when the user clicks away mid-selection (maybe because they just want to change the date, but find the already-present hour and minute to be acceptable), the text field is updated appropriately?
For example:
Initial date in field: 2015/10/10 10:00
Click on 2015/10/15 -> click away -> date in field: 2015/10/15 10:00
Is that even possible?
Check this updated fiddle - https://jsfiddle.net/4cqLcxcm/8/
Added on changeDay event on datepicker, which will trigger on change of date and set that value into input box.
Below is the code I have changed.
$(document).ready(function() {
var now = new Date();
$('#send-time').datetimepicker({
format: 'yyyy/mm/dd hh:ii',
startDate: now
})
.on('changeDay', function(ev){
$('#send-time').datetimepicker('update',ev.date);
});
console.log('test');
});

Format datepicker date to input

I am trying to make a datepicker work. The datepicker pops up when you click a calendar icon right next to an input field. When a use clicks the icon, and selects a date, the input field should populate with the date. This works if i do not try to format the date, but as soon as i do, i get an
'Cannot read property "formatDate" of undefined'
The icon of a calendar has a class of '.calendar'. Here is my code for when they click that icon.
$('.calendar').datepicker({
format: 'mm/dd/yy',
startDate: '-1'
}).on('changeDate', function (ev) {
$(this).prev('input').val(
$.datepicker.formatDate('mm/dd/y', ev.date)
);
$(this).datepicker('hide');
});
As soon as it hits
$(this).prev('input').val(
$.datepicker.formatDate('mm/dd/y', ev.date)
);
It stops working. What am i doing wrong here?
If you just do $(this).prev('input').val(ev.date); it works perfect, but that format is wrong, and it will not go into my database.
Thank you in advance.

Select input by name with Jquery

I'm adding this input field via an external .js file on clicking a button. This is added every time a button is clicked.
<input name=​"new" id=​"date" type=​"text" value>​
I want to append the Jquery-ui datepicker to this field.
Here's the code I'm using right now but class="hasDatepicker" isn't getting associated with the new field that's added when I inspect it using the console.
$('[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
I want to select this by name and not id as the id's will be unique for each field that's added.
The datepicker is added to other fields on my page so it should work here as well.
I also want to append class="btn btn-darkgrey" to make the input field into a button via Jquery.
Try like
$('input[name="new"]').datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Working FIDDLE
As you said every time input field added when button gets clicked.
so , where you added the new input field at that place you have to initialize input with datepicker. That means on button click, you added code to insert new input field below that you have to find input by
$input = parent_element.find('input[name="new"]').last().
Here parent_element = in which you are appending/inserting your new input.
And initialize that input.
$input.datepicker({
maxDate: '+0d',
dateFormat: 'yy/mm/dd'
});
Try this. hope it will work for you.

Categories