We Keep Coding

JQuery-UI Datepicker() click Done programmitally

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" );

Getting React state of input that has been selected from datepicker

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

jQuery datepicker not working on dynamically inserted html element

This same question has been asked repeatedly, and the only time it has been answered is the one where the fellow was trying to initialise datepicker in the .onReady() function. I am not doing that. In fact, I am actually doing what that solution is doing; implementing datepicker immediately after creating the element.
Here is my template code:
<input type=text name="txt_you_History_From_Date_XXX" id="txt_you_History_From_Date_XXX" class="month-picker inputField" size=16 maxlength=16>
You will notice the month-picker class. Also, you will notice the "XXX" placeholders.
Here is the code that inserts that template code:
//
// find the next available id
//
for (var i = 0; ; i++) {
if (!$("#divEmployer_" + i.toString()).length) {
break;
}
}
//
// get html, and replace the placeholders with id, then append.
//
$.get("content/contentHistoryEmployerTemplate.html", function (data) {
while (data.indexOf("XXX") >= 0) {
data = data.replace("XXX", i.toString());
}
$("#employerDIV").append(data);
});
//
// activate datepicker on all month-picker class elements
//
$('.month-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
//alert("here");
I do see the "here" alert if I uncomment it, so I know the code is being run.
The datepicker() throws no error.
I know the function is available because if I comment out my jquery-ui-min.js in my <HEAD>, a reference to datepicker() does then throw an error.
But the field does not respond when it receives focus. The datepicker does not appear.
Can anyone tell me what's wrong? Thanks!

You are trying to instantiate the datepicker before the element exists. Put that code inside the async callback.
$.get("content/contentHistoryEmployerTemplate.html", function (data) {
while (data.indexOf("XXX") >= 0) {
data = data.replace("XXX", i.toString());
}
$("#employerDIV").append(data);
// PUT DATEPICKER HERE
});

Setting Datepicker min/maxDates with $scope variables

The problem I am facing is that I have created a datepicker and I want to set its min date and max date based on the days I gather from a json.
The problem is that by the time the datepicker is initialised the $scope variables are null.
$scope.dates = [];
$scope.stats = {};
$scope.latestDay;
$scope.startDay;
$controller('rightsController', {
$scope : $scope
});
init();
$("#datepick").datepicker({
changeMonth: true,
changeYear: true,
buttonImageOnly: true,
dateFormat: 'dd/mm/yy',
minDate: ''+$scope.startDay,
maxDate: ''+$scope.latestDay
});
function init() {
fetchHourlyStats0();
}
$scope.fetchComparativeStats = function() {
fetchHourlyStats0();
}
function fetchHourlyStats0() {
var promiseStats = statsFactory.getHourlyStats();
$q.all([ promiseStats ]).then(function(values) {
$scope.stats = values[0].data;
i = 0;
for ( var k in $scope.stats) {
$scope.dates[i] = k;
var v = $scope.stats[k];
i++;
}
var length = $scope.dates.length-1;
$scope.latestDay = $scope.dates[0];
$scope.startDay = $scope.dates[length];
})
}
Is it possible to create the datepicker after the data access object is created and after I fill the variables?

First of all, I really suggest you to stop mixing Jquery and Angular. Have a look at this thread : "Thinking in AngularJS" if I have a jQuery background?
I think you will have it really difficult to get the value set by jquery into your picker.
But, this is not your issue right now.
function fetchHourlyStats0() {
var promiseStats = statsFactory.getHourlyStats();
$q.all([ promiseStats ]).then(function(values) {
// code removed
$scope.latestDay = $scope.dates[0];
$scope.startDay = $scope.dates[length];
$("#datepick").datepicker({
changeMonth: true,
changeYear: true,
buttonImageOnly: true,
dateFormat: 'dd/mm/yy',
minDate: ''+$scope.startDay,
maxDate: ''+$scope.latestDay
});
});
}
You can simply run your jquery code inside the .then() of your promise to defer the creation of your date picker.
Also, promiseStats looks like a single promise. You don't need to inject $q into your controller. Use directly your first promise :
statsFactory.getHourlyStats().then(function(values){
//
});
or
var promiseStats = statsFactory.getHourlyStats();
promiseStats.then(function(values){
//
});

How to get current viewMode property from "Bootstrap Datepicker"

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
});