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/.
Related
I have a small requirement in sap.ui.unified.Calendar, I want to remove the selected Special dates from Calendar. I'm trying with multiple options but still, I'm not able to achieve this.
On selection of a particular row, I'm going to call an OData Service and displaying the special dates which got highlighted in the Calendar.
Here my requirement is like if I select the 2 or more records in the table I should not display the special dates and the selected dates should get removed and the calendar should display the dates without any selections
I'm trying with removeStyleClass properties but it is not working. Here is my code.
if(sap.ui.getCore().roomsArr.length > 1){
MessageToast.show("Calendar Dates View will not get displayed for multiple record selections");
var oCal1 = that.getView().byId("myCalendar");
oCal1.removeStyleClass("sapUiCalItemType01");
}
Here i guess like, if i get the selected row Id's then i can remove the style class that is getting violet Background. But im getting dynamic date values so im not able to achieve this. Can someone help me to fix the issue?
Thank you in advance
I am using ag-grid to display a list of columns. One of the columns contains the date section.
User should be able to edit the row and use calendar to select a particular date. Once a date is selected, it will get updated in the cell.
Any idea how to make it achievable ?
As per Ag-grid, we have to use cellEditor rather than cellRenderer to edit a cell and show calendar at every cell for selection of a date
https://www.ag-grid.com/javascript-grid-cell-editing/index.php
They have given few examples of how we can use Celleditor. Can someone please let me know how to use calendar for each cells of the 'date' column.
Got the following answer from ag-grid team
editing of dates is not provided out of the box. you will need to create your own cell editor for dates.
details on how to do cell editors is here:
https://www.ag-grid.com/javascript-grid-.../index.php
I use bootstrap, and this has property type="date". I have one list "ListDataSource", this has one file call celDate and contains this html:
When i send this list to api.setRowData(ListDataSource), the grid create the date input.
See you.
I'm working on a Wordpress website with the theme based on Bootstrap 3.
In a form I need to include calendar date pickers. I added a js library from eyecon (Demo Website for Datepicker Library). I made it work with date selectors, but I'm having trouble disabling choosing the past times for arrival field, when the departure time is set.
For example, if the Departure time is set to be 1 March, when the user clicks on the Arrival field in the calendar that pops up, all the dates before 2nd March should be disabled.
I tried multiple versions of code given on demo website, but they didn't work. I think the problem might be that I have jQuery in noConflict mode.
My current script is located in footer.php of my theme. The calendar pop up works, and it disables past dates, but it doesn't disable dates before the Arrival field once the Departure date is set.
This was the most successful attempt, as at least the calendar popups were working on this attempt: http://jsfiddle.net/j5ZKc/
And this is my current script:
<script type="text/javascript">
jQuery(function() {
jQuery('#dp1, #dp2'
).datepicker({startDate: '-0m'}).on('changeDate', function(){
jQuery( '#dp1, #dp2'
).datepicker('hide');
})
});
</script>
Any suggestions please?
So after some trouble I finally got something working for you:
jsFiddle Bootstrap-datepicker
What did I do:
I used forked Bootstrap-datepicker. It is in my opinion way better documented and easier to use. I got it working so that should count for something.
For example I got the date of the respective datepicker by invoking getDate() on a datepicker:
checkout.datepicker("getDate").valueOf()
If you have any questions about my code, let me know!
EDIT:
I updated the former jsFiddle (see the link above). It automatically sets the value of #dp2 to the selected date of #dp1 + one day. Therefore you should always be in the correct month.
If you don't want the code to put the focus on #dp2 after a date is selected just remove the following line in the jsFiddle:
$('#dp2')[0].focus();
Try this code snippet:
$('#changestartdate').datetimepicker({
minDate:new Date()
});
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.
hi
I have a Jquery Datepicker object that is created fine with no highlighted dates and a particular minDate.
I want to add a highlights to this datepicker based on an AJAX call made by the user, but the only way I can see to change the highlights is adding a function to the beforeShowDay event, which is set on setup.
How can I change this function on an existing datepicker and force it to redraw so that I get my new date(s) to be highlighted.
Many thanks everyone.
Dave
Right the only way I could find to do this is to use the destroy method then redraw the picker with the new method attached to it. If anyone knows a better way of doing this please add it and I'll give you the answer.
Thanks
EDIT: Code...
Setup the picker...
var datePickerSettings = {
beforeShowDate: beforeShowDateMethod
};
var alternateDatePickerSettings = {
beforeShowDate: beforeShowDateMethodAlternate
};
$('#mydiv').datepicker(datePickerSettings);
Then once callback is complete
$('#mydiv').datepicker('destroy')
$('#mydiv').datepicker(alternateDatePickerSettings);
In the end I didn't use the date picker as the requirements changed, but this should solve the problem
Dave
There is the setDate method of the datepicker. I cannot link directly but it is here http://jqueryui.com/demos/datepicker/ under methods