I'd like to add a button inside the datepicker box, something like "Today" which is clickable and selects the current date;
From what i've seen in the documentation there's only the [dateTemplate] option which seems to affect the date elements inside the datepicker. [custom day view]
Is there another attribute or some other way one can use to add a button inside this box?
Related
I am working with the component on the link: https://ej2.syncfusion.com/angular/documentation/api/calendar/
I couldn't find any function or property that disables component state so I can't select dates on the calendar.
For this reason I would like to know if it is possible to remove the click event so that it cannot select dates in a given situation.
I can only disable the dates that he can't select, only that I can't display the selected dates that I manually entered in the schedule.
Is it possible to remove the event from the DOM so that it cannot perform any action on the component? How can I do this?
You can disable click event by using css somehing like this
/deep/.calendar {
pointer-events: none;
}
You need to add correct class or id of the element you want to disable click event
You can use renderDayCell method to disable the required dates in syncfusion date picker component. Please check the below code block.
https://stackblitz.com/edit/angular-syz8gx?file=app.component.html
Here, we have disabled the week ends in the DatePicker popup. So, we could not select or click the dates.
Is there a way to deselect selected by user day in Pikaday calendar?
I would like to get from this state
to the following one
You could set the pickers date to null using .setDate(null) and attaching a listener to a button you press as described in the documentation to clear the selected date.
I created a demo to show the issue I am having using a jQuery library called Zebra-Datepicker.
Zebra-Datepicker documentation: http://stefangabos.ro/jquery/zebra-datepicker/
Zebra-Datepicker GitHub: https://github.com/stefangabos/Zebra_Datepicker
My demo shows how to:
create a DatePicker instance,
select a date value,
destroy the date picker instance,
create a new instance of the date picker,
select a new date value....
Problem:
The problem is that destroying the DatePicker does not seem to destroy the previous selected date value! So when instantiating a new DatePicker, it has the previous Date value selected instead of a new value!
I could really use some expert help as this is crucial for me to fix for my project which loads Project Task records into a Modal DIV. My Task records all share the HTML in the DOM of a single Modal, just replacing placeholder variables for a Task and then re-setting them when Modal is closed for the next Task to do the process over and over.
My Demo JSFiddle: http://jsfiddle.net/jasondavis/Lqwfamoc/17/
If you follow these steps on my demo you will see what I mean...
Click on Date SPAN to reveal DatePicker calendar and click on date 2015-05-30
Click Destroy DatePicker button
Click on Date Span which will then show DatePicker is missing since we destroyed it.
Now click on UPDATE DatePicker to 2015-05-24 Button which will set the Date SPAN value to have a new date of 2015-05-24. When we instantiate the DatePicker plugin again, it should grab this new date value in the SPAN and set the DatePicker to this date!
Now click Build New DatePicker button which instantiates a new DatePicker
Now click the Date SPAN text: 2015-05-24 to show the DatePicker Calendar again
You should now see that the original 30th day 2015-05-30 is selected in the DatePicker even though it SHOULD now have our Date value of 2015-05-24 selected instead since we destroy() and re-instantiated a new DatePicker after Destroying the old one!
Apparently, the Destroy method didn't full destroy or something else is going on? Any ideas on how to fix this?
The sourcecode of the actual Zebra-Datepicker lIbrary's destroy() method:
Located here
https://github.com/stefangabos/Zebra_Datepicker/blob/master/public/javascript/zebra_datepicker.src.js#L1469
/**
* Destroys the date picker.
*
* #return void
*/
plugin.destroy = function() {
// remove the attached icon (if it exists)...
if (undefined !== plugin.icon) plugin.icon.remove();
// ...and the calendar
plugin.datepicker.remove();
// remove associated event handlers from the document
$(document).unbind('keyup.Zebra_DatePicker_' + uniqueid);
$(document).unbind('mousedown.Zebra_DatePicker_' + uniqueid);
$(window).unbind('resize.Zebra_DatePicker_' + uniqueid);
// remove association with the element
$element.removeData('Zebra_DatePicker');
};
I found the problem. You need to change this:
$('#updateDate').on('click', function(){
$('#task-modal-due-date-span').text('2015-05-24');
});
to this:
$('#updateDate').on('click', function(){
$('#task-modal-due-date-span').text('2015-05-24').val('2015-05-24');
});
The reason is that when you rebuild a new DatePicker control, it is looking at the value of the span, not the text of the span. (Note: Normally you would attach a DatePicker to an "input" element, not a "span" element.)
I have a calendar picker working using jqueryUI but wanted to try to convert it to the native date picker.
i'd like to be able to have the following:
start with the "< input id="nativedate" type="date"/>" element being hidden from the view.
when the main page element is clicked, have the < input > element show, with the calendar opened
when the user selecs a date on the calendar, the element is hidden.
Right now when i get to step 2, the < input > item is showing but with the calendar hidden,
so the user must click to have the element appear and then click again to have the calendar show and then a third click to select the date.
EDIT: I've tried the following:
$('#nativedate').click(function(){
console.log('click logged');
})
and then in another method:
$(#nativedate).trigger('click');
which works in terms of my event handler i've set up, but it does not open the calendar
Some Questions:
i) Is the browser's native datetime element is Opening or your calender is opening on input decleration ?
ii) If the your item is not showing after some time then try some javascript to force it to keep open nearby that specific input tag?
These May Help
Disable native datepicker in Google Chrome
Remove background arrow from date input in Google Chrome v20
or Try Google Search
or You can edit the browsers native DateTime Picker using CSS.
I've got a jquery ui datepicker on my page. It's linked to a span not an input. It's currently tweeked to select a week at a time. I've also got two buttons on my page 'Previous Week' and 'Next Week'. I want the buttons to control what's selected by the datepicker. (ie jump forward / backward by one week when pressed).
I'm not sure how to grab the datepicker so I can mess with it (or what I actually mess with - is there a real 'object' there, or is it a just a load of css / html component like 'ui-datepicker-current-day' etc).
there is a real object you can hold a reference to.
example:
var datePicker = $("#id").datepicker({firstDay: 1});
to know what you can do with it, check:
http://jqueryui.com/demos/datepicker/