Using jQuery datepicker with Chronic - javascript

I'm trying to get a nice combination working for the strengths of the jQuery datepicker, and Chronic date parser for Ruby on Rails.
The jQuery UI date picker is useful for selecting a date visually. But I would also like the user to be able to type dates in, in whatever format they choose, and let the Chronic library deal with the input.
I've got a text input field, to which I am attaching a date picker, and the date picking functionality works great. But what I would also like is if the user ignores the date picker, and just types in 'last tuesday' and hits enter, I would like to submit 'last tuesday' and let chronic parse that to 2011-10-18. What is happening though is that the textbox value is replaced with the current date from the date picker.
It seems like an option that should be there, to allow the date picker to work as a helper, not the sole source of input. But I can't find a way to disable this functionality.
UPDATE:
I've got an improvement by only showing the calendar on a button press, instead of on focus, but still, it seems wrong, even if you've shown the date picker, that if you type in some text and hit enter, that gets overwritten by the date picker date!
$('.dl_input_production_date').datepicker({
showOn: 'button',
buttonImage: '/images/calendar.gif',
buttonImageOnly: true
});

Got an answer elsewhere: just hide the datepicker on keydown for the original input box. This means that on starting typing, the datepicker vanishes, and the typed input is used directly.
$('.dl_input_production_date').datepicker({
showOn: 'button',
buttonImage: '/images/calendar.gif',
buttonImageOnly: true
}).keydown( function() {
$(this).datepicker( "hide" );
});

Related

Populate values of inline multidate Bootstrap DatePicker

I'm new to JavaScript and still kind of new web development in general so I may be off in my understanding here somewhere.
Here goes:
In an ASP.NET MVC project with Entity Framework and Razor.
I'm using the bootstrap datepicker to try to create an inline multidate selector. I use a hidden input field to capture the list of dates from the datepicker as follows (note: the reason I'm using a hidden input field here is because I don't want to show a textbox, only the inline datepicker. However, I can't get the DatePicker to both appear inline and also use an input div to capture the multidate string.):
<div id="datepicker" class="datepicker datepicker-inline" data-date-format="dd/mm/yyyy"/>
<input type="hidden" id="hiddenForDates" value="#Model.SelectedDateString" name='#Html.NameFor(model => model.SelectedDateString)'/>
Then some script to tie it in:
$(document).ready(function () {
$('.datepicker').datepicker({
multidate: true,
inline: true
});
$('#datepicker').on("changeDate", function () {
$('#hiddenForDates').val(
$('#datepicker').datepicker('getFormattedDate'))
});
});
The HTML input captures the string of dates from the datepicker (like "01/01/2016, 01/02/2015"...). Then in the script I'm setting up the DatePicker and when the changeDate event occurs, updating the value in the input to the string of dates.
The problem I'm having is when loading the page, I want the DatePicker to seed with the value from the input (right now it seems to populate one way). When my page loads, the hidden input contains the string of dates but the datepicker has no dates selected.
I've tried setDates and setUTCDates per the documentation but that doesn't seem to help (my value is a string of comma separated values, but even if I build an array of Dates it doesn't make a difference).
Does anyone have any suggestions?
Note: I should also point out that I have been able to get this to work using:
#Html.TextBoxFor(model => model.SelectedDateString, new{ #class = form-control datepicker})
but this does not allow me to use an inline datepicker.

Opening second datepicker after selecting date

I have two datepicker inputs and I'm trying to automatically open the second one after a date is selected in the first. As of now, the datebox opens and then promptly closes. I can do it just fine outside of my knockout.js viewmodel without the datebox closing, but the problem is I want the second datebox to open only if the first one has a valid date.
This works just fine outside of my viewmodel, as I mentioned above, however it doesn't account for any errors with the start date.
$("#start_date_input").datepicker('option',"onClose", function() {
$( "#start_date_input" ).datepicker( "show" );
});
This is where I'd like the second datepicker to be triggered
self.startDate.subscribe(function(){
var startDateErrors = ko.validation.group(self.startDateValidation);
var endDateErrors = ko.validation.group(self.endDateValidation);
if(startDateErrors().length == 0 && endDateErrors().length == 0){
populateList();
}
else if(startDateErrors().length == 0){ //if a valid start date is selected, show the end date
$("#end_date_input").datepicker("show");
}
});
As soon as I select a start date, the end date picker shows and immediately disappears. The cursor is still in the end date input box and flashing. Any idea what is causing it to close?
I tried adding $("end_date_input").datepicker({autoclose: false}); but that didn't do anything.
Don't reach around the viewmodel and fiddle with the DOM directly. You need a custom binding handler for datepicker. There is one here that seems pretty popular. That by itself probably won't solve your problem, but it will put you in a better place to be in control of what's going on.
I suspect (but don't know) that having a hasFocus binding on the associated input field will show the datepicker properly.

Setting the default date on jquery datepicker without populating the underlying input field

If I do:
$datePicker.datepicker('setDate', null);
the underlying input field does not get set to any specific date, but the datepicker widget selects the current date automatically.
jsfiddle
If I try:
$datePicker.datepicker('setDate', "01-01-2014");
it will populate the date field. The same goes for setting defaultDate on the datepicker options.
jsfiddle
Is there any way to set the widget to a date without having the field populated?
I updated your JSFiddle to work with a textbox rather than a div.
As per jqueryui documentation:
defaultDateType: Date or Number or String
Default: null
Set the date to highlight on first opening if the field is blank.
Which means:
$('#date').datepicker({ defaultDate: '01/01/2015' });

Why does jQuery Datepicker select today's date when numbers are entered and enter is pressed?

I have discovered a scenario in an app I'm working on that is replicated on the jQuery site. For example, if you go here and enter a string of integers (e.g. "12345678") and hit enter, you'll see that the current date then fills the input. If you then retype another string of numbers and hit enter again, your typed string remains.
In my application I need whatever numbers are typed to remain after ANY enter key press. My questions are:
Why is the string overwritten with a date on the initial enter key press event?
How can this behaviour be prevented?
The Enter key will always grab the selected date and output this value to the textbox. This selected date will be the default date when it is opened. You can set the defaultDate when opening the datepicker, but it will either be a valid date or today's date. There is no way currently to open a datepicker with no defaultDate out of the box.
Normally, you can remove the selected date by setting it to null.
$('#mydate').datepicker('setDate', null);
But this won't work when the datepicker is initially opened, since it ALWAYS opens with a default/selected date.
I've come up with a fiddle showing a possible work around.
/***
Since there is ALWAYS a default date in the datepicker when it's opened,
then let's try and trigger an event after it has been opened, then set the
date to null.
***/
$('#textbox').datepicker(
{
beforeShow: function()
{
$(this).trigger('afterShow');
}
})
.bind('afterShow', function()
{
var $this = $(this);
setTimeout(function()
{
$this.datepicker('setDate', null);
}, 100);
});

jQuery - datepicker - onblur

I'm using the jQuery datepicker where I have two textboxes (start date / end date). The user clicks in a respective textbox and the calendar shows up. That is OK.
What I need to do is when the user say, clicks in the start date textbox and picks a date. I need an onblur event to be triggered then.
Where do I set that onblur event for the calendar control after a date has been selected? I tried in the actual textbox but that's not right because that happens before an actual date is picked from the calendar control.
I think you want the onselect event...
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});

Categories