I'm trying to get the selected date on my calendar, but at the first click the selectedDate is null, it works only after secondclick. How can I get the selected Date on first click?
clickEvents: {
click: function(target) {
// console.log(target.date);
console.log('1')
temp1 = this.options;
// selecionado = this.options.selectedDate;
// xx = this.options;
console.log('options');
console.log(this.options);
console.log('2');
console.log('selectedDate')
console.debug(this.options.selectedDate);
console.log('targets')
console.log(this.options.targets);
console.log('options')
console.log(this.options);
console.log('3');
selecionado = moment(target)
},
},
my pen:
https://codepen.io/waltindead/pen/oyJdoN?editors=1111
Related
I'm setting up a Google Sheet with a few columns to be filled for a certain request. So, I included a checkbox to be clicked at the end as a confirmation the request is done. My idea is to have an automated column called 'Request Date' automatically filled with the current date as soon as the Confirmation checkbox is clicked. However, can't use TODAY() formula once it's going to change the date every day. Any solution for this?
unfortunately no. you can't stop TODAY on demand by any means without a script. but you could have a script which would print out the date if certain checkboxes were checked.
function onEdit(e) {
var aCell = e.source.getActiveCell(), col = aCell.getColumn();
if(col == 5) { //number of column where you have a checkbox
var adjacentCell = aCell.offset(0,1);
var newDate = Utilities.formatDate(new Date(),
"GMT+1", "dd/MM/yyyy");
adjacentCell.setValue(newDate);
}}
this will print date in column F if a checkbox in column E is checked
or perhaps like this:
function onEdit(e) {
var activeSheet = e.source.getActiveSheet();
if (activeSheet.getName() == "Sheet1") { // SHEET NAME
var aCell = e.source.getActiveCell(), col = aCell.getColumn();
if (col == 12) { // COLUMN WITH CHECKBOXES
var dateCell = aCell.offset(0,1); // OFFSET ROWS, COLUMNS
if (aCell.getValue() === true) { // VALUE OF CHECKED CHECKBOX
var newDate = new Date();
dateCell.setValue(newDate);
} else {
dateCell.setValue("");
}}}}
Update:
If I remove giving datepicker options from html, it works but I want to set default options like autoclose and all.
I am using https://nkalinov.github.io/ng2-datetime/ for a "from to" datepicker. I am able to set default date for the from datepicker whereas the to datepicker shows choose date until I choose a date. I want to set today as the default date for the to datepicker.
constructor() {
const today = new Date();
this.dateInterval = 7;
const dateObj: any = moment(today).subtract(this.dateInterval, 'days');
this.dateFrom = new Date(dateObj);
this.defaultPickerOptions = {
autoclose: true,
dateFormat: "%Y-%m-%d %H:%i",
enableTime: false,
enableDate: true,
endDate:today
};
this.toPickerOptions = {...this.defaultPickerOptions, startDate:this.dateFrom,defaultViewDate:today};
this.dateTo = today;
};
handleDateFromChange(date) {
this.dateFrom = date;
this.toPickerOptions = {
...this.toPickerOptions,
startDate:this.dateFrom,
}
};
handleDateToChange(date) {
this.dateTo = date;
}
html --->
<datetime [ngModel]="dateFrom" (ngModelChange)="handleDateFromChange($event)" [datepicker]="defaultPickerOptions" [timepicker]="false"></datetime>
<span><b>to:</b></span>
<datetime [ngModel]="dateTo" (ngModelChange)="handleDateToChange($event)" [timepicker]="false" [datepicker]="toPickerOptions" ></datetime>
I have created a datepicker field. When the date picker is displayed and the cancel button is tapped, it takes the first value as the default value. I need to check a condition where I can handle the cancel button on the date pipcker field
case 'Date':
console.log('date value: '+value);
var dt = new Date(value);
console.log('new date: '+dt);
if (dt == 'Invalid Date' || dt == 'NaN/NaN/0NaN') {
value = '';
} else {
value = dt;
}
element = Ext.create('Ext.Container', {
layout : 'hbox',
items : [ {
xtype : 'datepickerfield',
label : label,
name : 'standTimeEdit',
defaultDateFormat : 'D M Y',
value : value,
width : '100%',
style : 'border: 0px solid gray;border-radius:10px',
listeners:{
change:function(){
value = dt;
}
cancel:function(){
console.log('cancel event fired');
}
}
} ]
});
break;
You can try using cancel event of date picker field which will fired when the cancel button is tapped and the values are reverted back to what they were.
Hope it helps :)
I solved this issue by overriding the cancel event in the picker.
var picker = this.getPicker();
picker.on('cancel',function(){
if(defValue == ''){
if(count > 1){
picker.setValue(preVal);
dateObj.setValue({day: preVal.getDate(), month: (preVal.getMonth()+1), year : preVal.getFullYear()});
}
else{
picker.setValue(null);
dateObj.setValue(null);
count--;
}
}
});
This gave me a handle to the cancel button in the picker.
I am creating a date picker field dynamically. I need to set the picker field value to a textfield. somehow i am unable to retrieve the picker value. The date picker is displayed but the done button is throwing an error saying "Cannot call method "Todatestring" of undefined.
My code is :
case 'date':
var cmp1 = Ext.create('Ext.Button', {
text:'Date:',
ui:'plain',
id:'datepicker',
handler:function () {
var datePicker = Ext.create('Ext.picker.Date', {
dateFormat:'Y-m-d',
id:'picker1',
doneButton:{
listeners:{
// when the done button is tapped, set the value
tap:function (button, event, eOpts) {
console.log('inside done button');
console.log(Ext.getCmp('picker1').getValue());
/* var picker = this.up('datepicker');
picker.fireEvent('change', picker, picker.getValue());*/
console.log('done button');
}
}
}
});
Ext.getCmp('overlayId').add(datePicker);
datePicker.show();
Ext.getCmp('datefield').setValue('');
}
});
Ext.getCmp('overlayId').add({ xtype:'container', padding:10, items:[cmp1] });
var cmp = Ext.create('Ext.field.Text', {
//label:'Date:',
id:'datefield',
listener:{
focus:function () {
console.log('on blue function called');
}
}
});
break;
I think you do not need to override the setValue() function direct. Better approach is to override the applyValue() or/and updateValue() functions.
See http://docs.sencha.com/touch/2-0/#!/guide/class_system for more information about config properties and how apply/update/set pattern does work
Cheers, Oleg
i know its late, but help somebody later, you can use change listener to get selected date value dynamically
datePicker = Ext.create('Ext.picker.Date', {
itemId:'ctsdateselect',
value: new Date(),
yearFrom: 1985,
yearTo : 2050,
listeners: {
change: function (value, eOpts) {
console.log(eOpts);
},
cancel: function (picker) {
Ext.Msg.alert('You hit cancel', '');
}
}
});
datepicker.show();
I had the same problem and it got fixed by setting value config for the datepicker.
To get the new value you actually need to have some initial value. Check this.
This question is similar to knockoutjs databind with jquery-ui datepicker, but instead of the jQueryUI datepicker, I would like to use one of the Bootstrap datepickers.
The API for the Bootstrap datepicker is different from jquery-ui, and I am having some trouble wrapping my head around making it work with knockout.js. I have created a jsFiddle to try it out.
It seems like the Bootstrap datepicker could be much simpler to use because it does not independently store the date. However, I would like to know how whether the jsFiddle is the appropriate way to use the Bootstrap datepicker widget with knockout.js i.e.
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
}
};
Here is a sample of how you could accomplish this with the datepicker that you are using:
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function(event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function(element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
if (widget.date) {
widget.setValue();
}
}
}
};
It did not look like there was any destroy functionality, so I removed that piece. This handles the widgets changeDate event to update the view model, when a user changes the date. The update function handles when the view model is changed to update the widget.
If you want to bind the value to a non-observable, then it would take a little more code. Let me know if that is something that you need to support.
http://jsfiddle.net/rniemeyer/KLpq7/
my current version is a mix between the already shown solutions:
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
var binding = allBindingsAccessor();
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
$(element).datepicker('update', dataSource());
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
value(event.date);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
var value = ko.utils.unwrapObservable(valueAccessor());
//when the view model is updated, update the widget
if (widget) {
widget.date = value;
if (widget.date) {
widget.setValue();
$(element).datepicker('update', value)
}
}
}};
The accepted answer didn't work for me with the current version of the date picker. The input wasn't being initialized with the value of the observable. I made an updated binding, to which I added this:
$(element).datepicker('update', dataSource());
That seems to do the trick.
Here's an updated fiddle that uses the latest available date picker, Bootstrap, jQuery, and Knockout: http://jsfiddle.net/krainey/nxhqerxg/
Update:
I experienced some difficulty with the date picker not playing nicely with the observable when a user would edit the value in the text field manually. The tool would immediately parse the date, and plug the result into the input field.
If the user tried to edit 10/07/2014, for example, and used the backspace or delete to remove a number (10/0/2014), the resulting value would be parsed immediately and inserted into the text input. If the value was, for a moment, 10/0/2014, the picker would shift the calendar to 09/30/2014, and plug that value into the text field. If I tried to edit the month, and the value was, for a moment, 1/7/2014, the picker would shift to January 7, 2014, and plug that value in to the text field.
You can see that behavior in this fiddle:
http://jsfiddle.net/krainey/nxhqerxg/10/
I had to update my binding with a special handler to detect focus, and bind a one-time blur event to get it to handle manual edits correctly.
$(element).on("changeDate", function (ev) {
var observable = valueAccessor();
if ($(element).is(':focus')) {
// Don't update while the user is in the field...
// Instead, handle focus loss
$(element).one('blur', function(ev){
var dateVal = $(element).datepicker("getDate");
observable(dateVal);
});
}
else {
observable(ev.date);
}
});
The fiddle referenced in the original answer has been updated to reflect this:
http://jsfiddle.net/krainey/nxhqerxg/
Here is what I Ended up
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = {
autoclose: true,
format: 'yyyy-mm-dd',
}
//var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//when a user changes the date, update the view model
ko.utils.registerEventHandler(element, "changeDate", function (event) {
var value = valueAccessor();
if (ko.isObservable(value)) {
var myDate = event.date;
var month = myDate.getMonth() + 1;
var monthText = month;
if (month < 10)
monthText = "0" + month;
var day1 = parseInt(myDate.getDate());
var dayText = day1;
if (day1 < 10)
dayText = '0' + day1;
value(myDate.getFullYear() + '-' + monthText + '-' + dayText);
}
});
},
update: function (element, valueAccessor) {
var widget = $(element).data("datepicker");
//when the view model is updated, update the widget
if (widget) {
widget.date = ko.utils.unwrapObservable(valueAccessor());
widget.setValue(widget.date);
}
}};
There is a much simpler way to get bootstrap-datepicker.js and knockout.js working together. Typically the initialization of the datepicker inputs is invoked during/after the page load. However when knockout.js updates the value binding, the datepicker is not updated correctly with the new value and so when you focus on the datepicker input it defaults to 01-Jan-2001.
All you have to do is to destroy and reinitialise the datepicker inputs after any knockout.js value bindings are updated as per the ViewModel method below, which sets up a mapped object to be edited.
self.showEditOrderForm = function (data) {
ko.mapping.fromJS(data, self.entity);
self.mode('edit');
$('#edit-dateordered').datepicker('destroy');
$('#edit-dateordered').datepicker({
format: 'dd-M-yyyy',
title: 'Select Date',
weekStart: 1,
todayHighlight: true,
autoClose: true,
endDate: '0d'
});
};