I'm trying to write my first qunit tests using my jquery date picker module, right now I want to trigger the onSelect method I am using but this doesn't seem to get picked up in the tests, here is my simple test:
JS
this.dateSelectorView.$el.on('onSelect', function() {
assert.ok(true, 'true succeeds');
});
Here is the date picker:
this.$el.datepicker({
dateFormat: Common.DATE_FORMAT,
showOtherMonths: true,
selectOtherMonths: true,
beforeShowDay: function (date) {
return _.availableDates(date, Common.availableDates);
},
onSelect: function() {
Backbone.Events.trigger('date:selected', this.value);
}
});
Listen to the view itself,
when invoking the date picker, trigger the event to the view
onSelect: _.bind(function() {
this.trigger('date:selected', this.value);
},this)
I use "bind" to expose the outer scope(the view)
Then, in your View creating the the datepicker, listen to the change event.
this.listenTo(this.dateSelectorView, 'date:selected', this.callback);
Related
Does anybody know how I can trigger the datepicker to fire its onClose() function as if the user made the selection and clicked the Done button?
Maybe I'm looking in the wrong place but I cannot seem to find a way to fire an event that mimics the user selecting the datepicker and clicking on the Done button.
Here's my scenario: I want the date to change when users select an option button. If the user selects the option "YEAR" then #StartDate changes to Jan 2016 and #EndDate changes to Dec 2016. If the user selects the option "MONTH" then #StartDate changes to Jan 2017 and #EndDate changes to Jan 2017.
There are max and min and other requirements handled in the initModule for both datepickers that only get executed when the user selects the datepickers, changes these dates, and clicks on the Done button. I want to fire these events without the user having to manually change the dates.
In my initModule method:
// ----------------Begin Public Methods----------------------------//
var initModule = function () {
var currYear = new Date().getFullYear();
// Hookup datepickers
$(#EndDate).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: new Date(2013, 9, 1),
maxDate: '-1d',
beforeShow: function () {
setTimeout(function () {
$("#ui-datepicker-div").addClass('calendar-off');
}, 0);
},
onClose: function () {
var month = $(#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $(#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate' new Date(year, month, 1));
onChangeEndDate();
}
});
.
.
.
.
.
};
return { initModule: initModule };
So, I've tried $("#EndDate").click('onClose'); and $("#EndDate").trigger('onClose'); and I've poked around everywhere to find an answer to no avail.
How to I get execution into the onClose: function () without the user having to manually change the date in the datepicker and select the Done button?
According to the API documentation, the hide() method will close the datepicker.
So, if you want to close the datepicker, you should do
$(#EndDate).datepicker( "hide" );
How do I access a js function exampleFunction() when date is selected? I want to pass the date value there.
text_field_tag for datetimepicker (haml):
= text_field_tag 'start_day', class: 'datepick'
Javascript:
$(".datepick").datetimepicker({
timepicker: false,
format: 'd/m/Y',
closeOnDateSelect: true
});
You can achieve this by using below given code:
$("#datetimepicker6").on("dp.change", function (e) {
console.log(e.date);
});
I your case, it should be :
$(".datepick").on("dp.change",function(e){ exampleFunction(e.date) });
Remember this will call the example function on change in value of each datetimepicker, since you used class.
Reference URL: https://eonasdan.github.io/bootstrap-datetimepicker/
If this is the plugin you are using then it would be Like this.
$(".datepick").datetimepicker({
onChangeDateTime:exampleFunction
});
function exampleFunction(){
console.log("Date Selected")
}
For full option list Reference:
http://xdsoft.net/jqplugins/datetimepicker/
Hope it helps.
Try this :
$(".datepick").datetimepicker({
timepicker: false,
format: 'd/m/Y',
closeOnDateSelect: true
}).on('dp.change', function (ev) {
exampleFunction() ;//your function call
});
Simply:
$(".datepick").datetimepicker({
format: 'd/m/Y',
}).on('select', function (e) {
console.log('on select event');
});
Currently working on creating a react component for a form. I am applying a datepicker via a regular javascript file to my inputs which are being rendered in react (jsx).
I am trying to pull the state from the inputs when a date is selected from the datepicker. Unfortunately react is not picking up the value. I know it is probably something to do with calling the datepicker from a regular javascript file onto the rendered inputs. Thing is, when I am calling a regular .val on the input once I have selected a date, it gives me the value.
Also should mention, I am using bootstrap-datepicker
Any suggestions or recommendations would be greatly appreciated :)
form.js.jsx
var StepOne = React.createClass({
getInitialState: function() {
return {start: '', end: ''};
},
startDateChange: function(e) {
this.setState({start: e.target.value});
},
endDateChange: function(e) {
this.setState({end: e.target.value});
},
render: function() {
return (
<div className="stepOne">
<ul>
<li>
<label>Starts</label>
<input id="event-start" type="text" value={this.state.start} onChange={this.startDateChange} />
<label>Ends</label>
<input id="event-end" type="text" value={this.state.end} onChange={this.endDateChange} />
</li>
</ul>
</div>
);
},
}); // end of component
stepone_datepicker.js
$(function() {
var date = new Date();
date.setDate(date.getDate()-1);
$('#event-start, #event-end').each(function() {
$(this).datepicker({
autoclose: true,
minDate: new Date(),
startDate: date
});
});
});
The code in the stepone_datepicker.js file is probably executing before your React component has rendered into the DOM.
Using id to reference a DOM node inside a React component is very rarely a good idea and generally ends up as confusing spaghetti code.
React gives us a way to get hold of the DOM nodes with it's refs mechanism.
First, move the date picker code into a new method in your component.
makeDatePicker: function(element) {
var date = new Date();
date.setDate(date.getDate() - 1);
$(element).datepicker({
autoclose: true,
minDate: new Date(),
startDate: date
});
}
Now we can add the ref attribute to each input and use this new method as the callback.
<label>Starts</label>
<input ref={this.makeDatePicker} type="text" value={this.state.start} onChange={this.startDateChange} />
<label>Ends</label>
<input ref={this.makeDatePicker} type="text" value={this.state.end} onChange={this.endDateChange} />
When the element is ready, React will call makeDatePicker and pass the DOM node as the first argument.
After that, you can intercept the DOM node and apply the jQuery plugin.
This way you could even render multiple instances of the StepOne component and not have to worry about collisions between id attributes.
It's not the correct way to do it maybe better to use react-datepicker
But you can do this to trigger onChange event manually
$(function() {
var date = new Date();
date.setDate(date.getDate()-1);
$('#event-start, #event-end').each(function() {
$(this).datepicker({
autoclose: true,
minDate: new Date(),
startDate: date,
onSelect: function( selectedDate ) {
var event = new Event('input', { bubbles: true });
this.dispatchEvent(event);
}
});
});
});
and maybe better to use react-dom to get the DOM node anyway the code that i post with the minimum changes
i am trying to set mindate dynamically on pageload event and dropdown change event also , mindate sets in page load but when i am trying to set on change event it gives error
this is my code
//basic initialization of datepicker
$('#transaction_date').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
maxDate: 'today',
inline: true
});
var fy_start_date = '<?php echo $fy_start_date;?>';
// call function to set mindate on pageload
setmindate(fy_start_date, 0);
// dropdown change event to call ajax function to set ne mindate value
$('#from_ledger').change(function(){
var accstartdate = $('#from_ledger').val();
getstartdate(accstartdate);
});
// dropdown change event to call ajax function to set ne mindate value
$('#to_ledger').change(function(){
var accstartdate = $('#to_ledger').val();
getstartdate(accstartdate);
});
//ajax function to set new mindate
function getstartdate(id){
//call function to set new mindtae
setmindate(result, 1);
}
//function to set mindate
function setmindate(min_date, change) {
var minumum_date = min_date;
$('#transaction_date').datepicker('destroy');
$('#transaction_date').datepicker('option', 'minDate', minumum_date);
}
});
it gives error message Error: cannot call methods on datepicker prior to initialization; attempted to call method 'destroy'
jquery version 1.11.1
jquery ui version 1.11.4
How to get current viewMode property from "Bootstrap Datepicker"?
I initialize the control with viewMode= 'years' and I want to close datepicker on changeDate event, only when viewMode='days'.
The user selects a year, then a month, and finally a day. In that moment the control must be closed.
This is the code:
$("#date").datepicker(
{viewMode: 'years',
format: 'dd/mm/yyyy'
});
$('#date').on('changeDate', function (ev) {
//close when viewMode='0' (days)
})
Can anyone help?
Check this : http://jsfiddle.net/nAXnM/
HTML
<input type="text" class="span2" value="02/16/12" data-date-format="mm/dd/yy" id="dp2" >
JS
$("#dp2").datepicker({
viewMode: 'years',
format: 'dd/mm/yyyy'
});
$('#dp2').on('changeDate', function (ev) {
//close when viewMode='0' (days)
if(ev.viewMode === 'days'){
$('#dp2').datepicker('hide');
}
})
If you're using the forked version of Bootstrap Datepicker, to close the UI widget when a date is selected, set the autoclose option to true:
$("#date").datepicker({
autoclose: true
});