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
Related
I'm working on a fullcalendar project.
When I click on a day of my calendar it appeared a modal where you put the name of your event, the start date and end date.
The input for start and end date is a datetime-local and I was looking for a way that when you click on a day and the modal show up in my start input is already visualize the day.
This is my modal and, for example, when I click on 4th of April it appeared directly like this, without me having to put it manually: like this ->example.
I found online this solution to get the clicked date:
dayClick: function(date, jsEvent, view, resourceObj) {
alert(date.format('DD/MM/YYYY 08:00')); //format i decide
},
But i dont know how to applied to my code to have it as input and not alert
I found also this way, I like it better because I can add the hour I want:
var startDateSelected = moment(event.startStr).format("DD-MM-YYYY 08:00:00");
var endDateSelected = moment(event.endStr).format("DD-MM-YYYY 17:30:00");
but still havent found a way to applied to my input datelocal-time
At the end I found this solution:
select: function select(event, date) {
$('#addNewEvent').modal('show');
$('#calendar').fullCalendar('refetchEvents',event._id);
var now = new Date(event);
document.getElementById('starts').value = now.toISOString().slice(0,16);
document.getElementById('ends').value = now.toISOString().slice(0,16);
}
This is the function that open my modal and fecth the events from my database by ID
And the ID mention in getElementById are from my two datetime-local input
I hope someone can find it useful.
It refered to Fullcalendar v3 because that the version the template I'm using have
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.
I have 2 text boxes namely fromDate & toDate for date search , in which by default, current day will be showed.
working code:
Jquery
(document).ready(function () {
$('.dateClass').datetimepicker({timepicker: false}); // css for displaying date without time
$('#fromDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
$('#toDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
});
Struts
<html:text property="fromDate" styleId="fromDateId" styleClass="dateClass" />
<html:text property="toDate" styleId="toDateId" styleClass="dateClass" />
Issue:
By default current day shown in both textboxes, suppose user choose different dates and submit,
db records are fetched and displayed but these 2 texboxes replaced with current dates how to avoid this.
kindly help me to resolve.
Update: There are reports this no longer works in Chrome.
This is concise and does the job:
$(".fromDateId").datepicker('setDate', new Date());
And another thing,
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
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');
});
What I Have
In jquery.ui.datepicker I have changed the value minDate to +1 so todays date or any historical date cannot be selected.
All good so far.....However.....
What I Want
I want to stop anyone selecting tomorrows date after 8pm today, so, after 8pm tomorrows date should no longer be available for selection.
I cannot see an option to do this in the default values or any of the examples on the datePicker website.
What is the best or easiest way I can achieve this?
Thanks in advance of a hopefully good suggestion
Since, jQuery DatePicker hasn't yet provided the functionality to support time(i guess) we need to do this in manual way.
You can use beforeShow options of jQuery DatePicker; which is called upon the datePicker UI display every time you click on DatePicker input field.
So, Inside beforeShow you can calculate the current time and manipulate the minDate as required ,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8PM
if(hour >= 20){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
}
Here is the working demo.
P.S
I haven't tried this yet but you should look into this
DateTimePicker plugin
if you want a more subtle approach