I am trying to update the default date on each link clicked. But it only updates for the first time. After I click another link it still shows old date. But when I debug the defaultD is updating.
I am using bootstrap-datetimepicker
updateSessionDate: function(datetime){
$("#updateUTCDate").modal("show");
var defaultD = moment(datetime, "MMM Do YYYY, h:mm a").format("MM-DD-YYYY HH:mm:ss");
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
},
Click any date it will show only the first one I have click.
How do I update date and time on each click?
$('#current_session_date').datetimepicker({
defaultDate: defaultD,
});
This creates the datetimepicker with an initial value, so doesn't work if the datetimepicker already exists.
You either need to call date([newDate]) to update it in place (you'll need to initialise it elsewhere) or destroy() it when the modal is closed, allowing you to remake it with a new initial value.
Related
I am using Tempus Dominus Bootstrap-4 datetime picker in a modal window that is shown when user double clicks on a specific row of a table:
$('#btn_modal').on('click', function() {
//
// .... some irrelevenat code, like geting data of a specific row,
// .... filling other fields
//
$('#modal_datetimepicker').datetimepicker({
defaultDate: moment(row['date_rkw'], "YYYY-MM-DD"),
viewMode: 'days',
format: 'YYYY-MM-DD',
extraformats: [ 'YYYY-MM-DD' ]
});
$('#modal').modal();
});
The date is properly set first time the modal is shown, but next time the modal is shown (selecting other row to edit), it keeps the previous value,
completely ignoring the above call with new value to defaultDate.
What is the proper way to set datetimepicker to a specific date?
I tried calling destroy with
$('#modal_datetimepicker').datetimepicker('destroy')
or even
$('#modal_datetimepicker').val(row['date_rkw'])
but with no luck.
You can try destroying datepicker when modal is hidden
$('#modal').modal('show')
.on('hidden.bs.modal',function(){
$('#modal_datetimepicker').datetimepicker('destroy')
});
Have a look at this reference - https://getbootstrap.com/docs/4.0/components/modal/
I am using pickadate for date-picking. Say currently we are in April and I navigate to June or select a date in june and then clear the date. Now if i re-open the datepicker it shows june and not the current month i.e. April.
I have the datepicker initialized as
lt dpInit = $('.datepicker').pickadate(optionsObject);
I tried to do
let dp = $('.datepicker').pickadate().pickadate('picker');
dp.stop().start();
or
dp.stop();
dp.start();
This leads to datepicker being stopped but doesn't start back. I thought the dpInit and dp are two separate instances so probably it happens so and I did
lt dpInitPick = $('.datepicker').pickadate(optionsObject).pickadate('picker');
dpInitPick.stop().start();
Again same result.
I tried to do this.stop().start() inside the event in optionsObject still the same result i.e.
optionsObject = {
onOpen: function() {
this.stop().start(); //same result of datepicker stopping but not starting again.
}
}
instead of onOpen I tried onRender, onClose etc too.
When I say it doesn't start I mean clicking on the datepicker input element does not open the date-picker anymore.
How do I reset the datepicker to point to current date?
Ah figured a solution,
I ended up using
this.set('select', new Date());
this.clear();
in order to make datepicker point to current date
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');
});
I am using jquery date-time picker in input box.
initialized with below code
minDate: 0/new Date(); (tried both)
Input box has some old date-time when I click for edit it open date-time picker, it disable old date and old time but it also change time in input box to current time if input box time is earlier than current time.
You can see here live example
http://jsfiddle.net/bhupendra21589/perd7pc6/
use
var d = new Date()
$( '#duedate' ).datetimepicker({
minDate: '0',
minTime:d.getHours()+":"+d.getMinutes(),
formatTime:'H:i'
});
I hope this solves the issue
jsfiddle link : http://jsfiddle.net/adityashankert/perd7pc6/17/
I've highlighted the example here:
http://jsfiddle.net/aDxeE/
Basically, a separate event (not known at construction) needs to set "option","maxDate" on the datepicker control. This 'clears' the textbox value which is really annoying, as the initial construction does not.
Can anyone offer a solution?
Edit:
Changing line 5 to:
$("#myinput").datepicker("destroy");
$("#myinput").datepicker({minDate:new Date(), maxDate: new Date()});
makes it work as expected, but is a seriously messy approach.
It's an issue with the format. Your initial value dd-mm-yyyy doesn't match the datepickers default format. To resolve, set the initial value to the correct format and specify the format as dateFormat when creating the datepicker.
Fiddle
Change to:
<input id="myinput" type="text" value="01-01-1970" />
And:
//construct datepicker
$("#myinput").datepicker({minDate:new Date(), dateFormat : "dd-mm-yy"});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
$("#myinput").datepicker("option","maxDate", new Date());
You could do this:
$("#myinput").datepicker('destroy').datepicker({maxDate:new Date()});
Removes the datepicker functionality completely. This will return the element back to its pre-init state.
Again re-initiate the datepicker with setting the maxdate option.
FIDDLE DEMO
UPDATE
Formated the code for the readability purpose:-
$("#myinput").datepicker("destroy");
$("#myinput").datepicker({
minDate: new Date(),
maxDate: new Date()
});
Try to give it in $(document).ready(function(){..});
//construct datepicker
$(document).ready(function(){
$("#myinput").datepicker({minDate:new Date()});
//later on, a seperate event changes the maxDate property
//but this 'clears' the existing value in the textbox!
});
$("#myinput").datepicker("option","maxDate", new Date());
Check JSFiddle.
FYI: use placeholder instead of value placeholder="dd-mm-yyyy"
How about manually setting it back again?
var d = $("#myinput").val();
$("#myinput").datepicker("option", "maxDate", "+2d").val(d);
This question was already answered here : https://stackoverflow.com/a/8945264/2050459
You need to set the date first trough code(using setDate) or by opening the datepicker(user interaction).
Here is how you would do it with code : fiddle
$("#myinput").datepicker({
minDate: new Date()
});
$("#myinput").datepicker("setDate", new Date());
In your example, try opening the datepicker and then trigger an event to set a maxDate, you'll see that the input will not be cleared because an active date has been set.
Jqueryui DatePicker clears the textbox's value?
myinput = ID of datapicker
$("#myinput").val('');