I started using the react-datepicker component.
https://github.com/Hacker0x01/react-datepicker
I got the example running and now I want to adapt it that there is no initial value.
The example code is the following:
<script type="text/javascript">
var container = document.querySelector('#datepicker-container');
var exampleComponent = React.createClass({
displayName: 'exampleComponent',
getInitialState: function() {
return {
start_date: moment(),
};
},
handleStartDateChange: function(date) {
this.setState({
start_date: date
});
},
render: function() {
return React.DOM.div({}, [
DatePicker({
key: 'example1',
selected: this.state.start_date,
onChange: this.handleStartDateChange
}),
]);
}
})
React.renderComponent(exampleComponent(), container);
</script>
I tried to use selected: none or even leave selected out but then I get the following error:
TypeError: newProps.date is null
value: newProps.date.format(this.props.dateFormat)
I also looked into the source code, but didn't find any possibility to start with an empty date.
Thanks in advance for your help!
You should be able to achieve what you want by setting start_date: null in your getInitialState,
Alternatively, if you use example 3 from react-datepicker, you can define a function like this:
handleResetDate: function() {
this.setState({
new_date: null
});
},
, and call it whenever you want the date to reset.
Hope this helps!
Note: I'm using react-datepicker version 4.10
Setting start_date or selected to null didn't work for me, instead I simply changed the value for selected to "", as in selected={""}. That worked for me.
Related
I'm using Ajax Autocomplete for Jquery (https://www.devbridge.com/sourcery/components/jquery-autocomplete/) with DataTables to search on a specific column.
Using onSearchComplete and onSelect from Autocomplete I can filter both the input and the table together as the user is typing (onSearchComplete) and when they select an entry (onSelect):
$("#scoreboard_site_name_filter").autocomplete({
serviceUrl: "/wiki/extensions/CFBHA/models/_mSiteNames.php",
onSearchComplete: function(suggestion) {
update_scoreboard_by_site_name_filter(suggestion);
},
onSelect: function(suggestion) {
update_scoreboard_by_site_name_filter(suggestion);
}
});
function update_scoreboard_by_site_name_filter(suggestion) {
var colname = "site_name:name";
if (scoreboard.column(colname).search() !== suggestion) {
scoreboard.column(colname).search(suggestion).draw();
}
};
However, when the input is deleted, then the DataTable is left filtered on the last input because neither event is fired in that case.
I've tried the keyup and change events on the input itself to pass an empty string to the DataTable search:
$("#scoreboard_site_name_filter").on("keyup change", function() {
var suggestion = "";
update_scoreboard_by_site_name_filter(suggestion);
});
If I place it before the autocomplete then it has no affect and if I place it after then of course I lose the ability to filter the table as I type because it fires after the autocomplete.
How can I detect when the input has been deleted and then re-filter the table on an empty string (i.e., clear that filter)?
OK, I was overthinking it . . .
I removed the onSearchComplete event and just went with the input event on the input itself and everything is working great.
I left the onSelect for the Autocomplete and am now properly passing suggestion.value instead of suggestion.
Here's the proper code for anyone interested:
$("#scoreboard_site_name_filter").on("keyup change", function() {
update_scoreboard_by_site_name_filter(this.value);
});
$("#scoreboard_site_name_filter").autocomplete({
serviceUrl: "/wiki/extensions/CFBHA/models/_mSiteNames.php",
onSelect: function(suggestion) {
update_scoreboard_by_site_name_filter(suggestion.value);
}
});
function update_scoreboard_by_site_name_filter(suggestion) {
var colname = "site_name:name";
if (scoreboard.column(colname).search() !== suggestion) {
scoreboard.column(colname).search(suggestion).draw();
}
};
Additionally I updated the code to make the search regex if the suggestion is actually selected (clicked on or entered on) and to add a class to the input as an indicator that the table is now filtered on that exact search term:
$("#scoreboard_site_name_filter").on("input", function() {
update_scoreboard_by_site_name_filter(this.value, false);
});
$("#scoreboard_site_name_filter").autocomplete({
serviceUrl: "/wiki/extensions/CFBHA/models/_mSiteNames.php",
onSelect: function(suggestion) {
update_scoreboard_by_site_name_filter(suggestion.value, true);
}
});
function update_scoreboard_by_site_name_filter(suggestion, selected) {
var colname = "site_name:name";
if (!selected) {
scoreboard.column(colname).search(suggestion).draw();
$("#scoreboard_site_name_filter").removeClass("autocomplete-input-selected");
} else {
scoreboard.column(colname).search("^" + suggestion + "$", true, false).draw();
$("#scoreboard_site_name_filter").addClass("autocomplete-input-selected");
};
};
I have the following route that run a report for specific date range:
export default Ember.Route.extend({
model: function(params){
return this.store.query('report' {
"report":"my_report",
"from":params.startDate,
"to":params.endDate
});
},
setupController: function(controller, model) {
this._super(controller, model);
// change format model and save it in rows
controller.set('model', rows);
}
});
Now, my controller is as follow:
export default Ember.Controller.extend({
queryParams:["startDate","endDate"],
actions:{
processReport:function(from,to){
this.transitionToRoute('reports',{
queryParams :{
"startDate":from,
"endDate":to,
"refreshModel": true
}
});
}
},
to:"",
from:""
});
The template is as follow:
From {{bootstrap-datepicker value=to}}
To {{bootstrap-datepicker value=from}}
<button {{action "processReport" from to}}>Process Report</button>
So, when I click the button the url changed and console show:
Attempting transition to reports ember.debug.js:52602
Transitioned into 'reports' ember.debug.js:27426
but the page remains same. How do I fully transition to the page?
You should add to your route the queryParams configuration to make a full transition
export default Ember.Route.extend({
queryParams: {
startDate: {
refreshModel: true
},
endDate: {
refreshModel: true
}
},
...
And on the controller you'll need to just update the values "startDate" and "endDate" in the custom action:
Export default Ember.Controller.extend({
queryParams:["startDate","endDate"],
actions:{
processReport:function(){
this.set('startDate', this.get('from'));
this.set('endDate', this.get('to'));
}
},
to:"",
from:""
});
This has been explained on the guides:
https://guides.emberjs.com/v2.11.0/routing/query-params/#toc_opting-into-a-full-transition
I figured it out on my own by reading the updated API on query-params in the following link:
https://guides.emberjs.com/v2.3.0/routing/query-params/
I'm looking at the example here and using the javascript provided from that example here. Basically what I want is a stand alone file chooser where I can select as many files as I want. The example that I've tried has a stand alone upload button but they don't let me shift highlight multiple files at the same time.
This code creates the button, but I can't load in multiple files at the same time:
var addFilesButton = new Ext.ux.form.FileUploadField({
buttonText: 'Add Files...',
buttonOnly: true,
listeners: {
'fileselected': function(fb, v){
var Record = myGrid.getStore().recordType;
var newFile = new Record({
fileName: v,
type: 'src',
version: '5.9',
});
myGrid.stopEditing();
myGrid.getStore().add(newFile);
myGrid.startEditing(0, 0);
}
}
});
Ext.ux.form.FileUpload uses HTML INPUT field to set a file to upload which is pretty normal thing to do.
If you are using HTML4, at most one file can be assigned to input file field.
However, from HTML5, there is a special attribute that you can set to accept multiple files.
I have modified the script accordingly and created a demo.
Note that HTML5 spec is still in draft. Feature compatibility table is available on caniuse.com
My MultiFileUploadField class:
MultiFileUploadField = Ext.extend(Ext.ux.form.FileUploadField, {
multiple: false,
createFileInput: function() {
this.fileInput = this.wrap.createChild({
id: this.getFileInputId(),
name: this.name||this.getId(),
cls: 'x-form-file',
tag: 'input',
type: 'file',
size: 1
});
if(this.multiple){
this.fileInput.dom.setAttribute('multiple', 'multiple');
}
},
bindListeners: function(){
this.fileInput.on({
scope: this,
mouseenter: function(){
this.button.addClass(['x-btn-over','x-btn-focus'])
},
mouseleave: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
mousedown: function(){
this.button.addClass('x-btn-click')
},
mouseup: function(){
this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
},
change: function(){
var v = this.fileInput.dom.files;
this.setValue(v);
this.fireEvent('fileselected', this, v);
}
});
},
});
I have a simple angular app here
<div ng-app="WhereToMeet" ng-controller="MapCtrl">
<leaflet shape="shape"></leaflet>
<button ng-click="clicked()">Clicked</button>
</div>
app = angular.module("WhereToMeet", [])
app.directive "leaflet", ->
restrict: "E"
replace: true
transclude: true
template: "<div id=\"map\"></div>"
scope:
shape: "=shape"
link: (scope, element, attrs, ctrl) ->
scope.$watch attrs.shape,( (newValue, oldValue) ->
watched newValue
), true
watched = (newValue) ->
alert newValue
#MapCtrl = ($scope) ->
clicked = (clicked) ->
$scope.shape = "Clicked"
alert "clicked"
I have it in a JSFiddle http://jsfiddle.net/charliedavi/bezFB/22/ but it wont run. Really odd. I think its an error with my coffee script but I can not see it
error:
Uncaught SyntaxError: Unexpected string fiddle.jshell.net:22
Uncaught Error: No module: WhereToMeet
in pure JS
var app;
app = angular.module("WhereToMeet", []);
app.directive("leaflet", function() {
var watched;
({
restrict: "E",
replace: true,
transclude: true,
template: "<div id=\"map\"></div>",
scope: {
shape: "=shape"
},
link: function(scope, element, attrs, ctrl) {
return scope.$watch(attrs.shape, (function(newValue, oldValue) {
return watched(newValue);
}), true);
}
});
return watched = function(newValue) {
return alert(newValue);
};
});
this.MapCtrl = function($scope) {
var clicked;
return clicked = function(clicked) {
$scope.shape = "Clicked";
return alert("clicked");
};
};
http://jsfiddle.net/charliedavi/gsPx3/2/
i dont know coffee script but angular. i just tried to solve it. ;-)
Select no-wrap body, under select framework
Select no-library(pure-js)
Add angular js as resources
Manually initialize angular using this angular bootstrap
angular.bootstrap document, ['WhereToMeet']
The generated javascript code is in another scope. You have to solve this
by either adding the -b parameter to the coffeescript compiler or export your function
explicitly via
root = exports ? this
root.clicked = ->
alert "clicked"
$scope.shape = "Clicked"
It is working now Fiddle Here
I had a similar issue with jsfiddle and angular yesterday. I had to do a couple of things to make it work:
Jsfiddle is adding the tags for html and body, so just write the markup that should end up inside the body tag.
Add a wrapping div with ng-app="myApp" instead of trying to specify another html-tag
Select no-wrap body, under select framework
I don't know what your "leaflet" is doing but I have updated your fiddle so that the click will trigger an alert
I've had to change the how the controller is instantiated to get the onclick to work.
http://jsfiddle.net/t9nsY/2/
app.controller("MapCtrl", function ($scope) {
$scope.clicked = function (clicked) {
console.log("clicked");
$scope.shape = "Clicked";
return alert("clicked");
};
});
$(document).ready(function(){
$('td#crop').click(function() {
$('img').each(function(){
$('this').attr(id);
alert(id);
});
})
});
I am trying to get the the value of the id of each image I click on but this is not working,Please help
this should not be a string, and you need to save the value returned by .attr().
$(document).ready(function() {
$('#crop').click(function() {
$('img').each(function() {
var id = $(this).attr(id);
alert(id);
});
});
});
Other cleanup:
Added a missing semicolon (though that wasn't enough to break the code).
Changed over-specifed selector 'td#crop' to '#crop', since there can be (at most) one element with a particular ID.