Is there a way to deselect date in Pikaday? - javascript

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.

Related

Disable event click from component angular

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.

Restrict and change select lists values used along jQuery UI's datepicker

I'm using jQuery UI's datepicker to display a calendar with select lists. Input field and select list are synchronized, so when you change value of either the datepicker or select list, the value of the other fields will change accordingly.
The datepicker is used with the Restrict date range functionality (http://jqueryui.com/datepicker/#min-max). That does its job perfectly - the END date can't be before the START date and you are unable to choose previous days accordingly. Of course, you can't choose that the START date is after the END date either.
The problem is with the select list. Even if "restrict date range" does its job, you still can select any date with the select lists. Therefore, I'm looking for this solution when you use the select lists (it shouldn't affect anything if you only use the calendar icon):
If you first select the START date, the END date should automatically change to one day after the selected date.
If you have both dates selected and decide to change the START date to the date that is after the END date, the END date should again change to one day later.
If you have both dates selected and decide to change the END date to the date that is before the START date, the START date should change to one day before the END date.
I have tried with using this piece of code to affect #1 and #2:
$('#start').change(function() {
var date2 = $('#start').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('#end').datepicker('setDate', date2);
});
However, it doesn't seem to affect anything. Here is the whole example on jsFiddle:
http://jsfiddle.net/JW4jg/

Knockout with Jquery UI datepicker date display

Please see this link for details http://jsfiddle.net/pakpatel/5p6Uz/4/
Can we do the range in Datepicker, If first date choose [ 10/12/2012 ] then second date shouldn't be before 10/12/2012, Customer can select date after ex.[10/13/2012] in datepicker.
Could anyone explain me how to implement. Thanks in advance.
By using the previous row's data as the new min, it makes it challenging.
Working demo is at http://jsfiddle.net/photo_tom/5p6Uz/24/
There were two things that were required.
Added a computed observable to pass the previous row's choosedate value to the current row.
Added a new minDate binding to set the mindate option on the date picker.
This is not a completed fiddle. It doesn't properly handle adds or deletes. This is because the ko.computables need to be rebuilt.
EDIT:
Updated to handle add / delete methods. Interesting problem, trying to transfer information between two different rows in the table. Good challenge.
Soution at http://jsfiddle.net/5p6Uz/34/.

Update Datepicker in Sencha Touch Form

I have a sencha touch form where one of the fields has an xtype of 'datefpickerfield'
This operates exactly as it should. (i.e. tap the field, date picker pops up, you select the date, it closes and populates the field)
Based on another event in the form (change of a select field) I would like to update the datepicker field in code.
I have managed to do all of this, except being able to find suitable code that actually updates the field. I can update a text field without issue, but not a datepicker field.
What am I doing wrong?
Sorry, I do not have a proper code sample to post, but if anyone could just point me in the right direction here, I would be most grateful.
This is what I have used to update a text field which works, but doesn't for a datepicker field:
var nDate = '13/08/2011';
Ext.getCmp('SampleTextField').setValue(nDate);
datepicker needs a Date object, not a string
As per value of a datepickerfield is an object with properties for each component (ie. day, month and year), you can programmatically do the following:
Ext.getCmp('SampleTextField').setValue({day: 1, month: 1, year: 2001});
Also, try to avoid getCmp. It very time consuming.
HTH.
Milton.

JqueryUI Datepicker cannot correctly handle initial values

I have the following simple datepicker in JqueryUI:
$('#id_due_date').datepicker().datepicker("option", "dateFormat", "yy-mm-dd");
$('#id_due_date').datepicker("setDate",
new Date($("input#id_due_date").attr("value")));
So, if the already has a value it shows that date instead of blank (second line of code above).
However, i'm having the following difficulties:
I want to be able to show the month of that initial value in the calendar. So if that date is 3 months ahead, i want to show that month in the calendar.
With this code, if i'm not setting an initial value, it defaults to today, which is kind of wrong for my application as some items can have a missing due_date
Can you please help?
new Date is a javascript native method and expects the javascript dateformat to be correct
check out alt field, altField in jq ui
use datepicker({option:value})
check the changeMonth option in jq ui
check the change year option in jq ui
This should work:
$('#id_due_date').datepicker({dateFormat:"yy-mm-dd"});
Or to set the default date 1 month in the future:
$('#id_due_date').datepicker({dateFormat:"yy-mm-dd", defaultDate:'+1m'});
Then, just make sure that the input it's attached to is either blank or in the format of "2011-02-18" (yy = yyyy FYI; see here)
This way, the datepicker will automatically pick up the date in the box and show it. If it's blank, it will just display today's date.

Categories