I've got a fairly complex web app that I'd like to add some date-picking UI to.
The problem I'm running into is that I haven't been able to figure out from the docs how to really take control of how and when the datepicker appears. There are no form elements involved (and no, I'm not going to add a secret form field), so the dead-simple out-of-the-box approach simply won't work.
I'm hoping someone can provide a little guidance on a pattern that allows me to invoke the datepicker programmatically. I believe I know how I'd use the datepicker's custom events to initalize and position it, and to recover the chosen value when the user dismisses it. I'm just having a hard time instantiating a datepicker, since I'm not pairing it to an element.
Here's what isn't working:
function doThing(sCurrent, event) { // sCurrent is the current value; event is an event I'm using for positioning information only
var bIsDate = !isNaN( (new Date(sCurrent)).getTime() );
jQuery.datepicker('dialog',
(bIsDate ? new Date(sOriginal) : new Date()), // date
function() { console.log('user picked a date'); }, // onSelect
null, // settings (i haz none)
event // position
);
}
The reason is that "jQuery.datepicker" isn't a function. (I'm Doing It Wrong.)
I'm not married to the 'dialog' approach -- it was just my best guess at invoking one without reference to a form element.
I'm using jQuery 1.4.3 and jQueryUI 1.8.6
From the plugin page: http://jqueryui.com/demos/datepicker/#inline
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
Date: <div id="datepicker"></div>
</div><!-- End demo -->
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
I read through the datepicker code, and it appears that, as written, the datepicker must be attached to an input, div, or span tag.
So, if your only objection is to using a form element, then attaching to a div or span is probably your best bet, and there's an example of how to do that here: https://stackoverflow.com/a/1112135
If you're looking for some other way to control the datepicker, then you may have to extend datepicker code to do what you want it to do, and if you go that route, then I recommend starting by taking a look at the _inlineDatepicker private method in the datepicker code, which is the method that attaches the datepicker to a div or span tag.
You have to define Input field dynamically then attach the datepicker you your newly created class Without field I Don't think so It will work.
<input type="hidden" id="yourField" />
and use
$("#yourField").datepicker({
buttonImage: '../yourImage.png',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
showOn: 'both',
});
Related
I'm trying to make the materialize date picker editable. Here is the goal, the user can directly write the date in the input field or use the widget to pick a date.
I did something that is about to work on this jsfiddle. But there is a bug I'm trying to solve. When the user directly writes the date in the input, the picker needs to get the new value also (because I use a different format to submit the date and there is a an hidden input field to update). To accomplish that I tried to do
picker.set('select', $(this.val());
But it creates an infinite loop because the method set in materialize also triggers the event change on the input.
EDIT: oh i just found there is an issue open about that on github. Do you have any idea for a workaround?
Any specific reason you want to do it in the change method?
Why not something like this?
this.change(function(event) {
});
this.bind('blur keypress',function(e){
if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
var inputFieldDate=getFmtDate($(this).val());
picker.set('select',inputFieldDate);
}
});
This is a utility function to parse the date in DD/MM/YYY format and get a javascript Date object
function getFmtDate(s){
var valx=new Array();
if(s!=null && s.length>0){
valx = s.split('/');
}
var d = new Date(valx[2],valx[1]-1,valx[0]);
return d;
}
This works for me.
Update:
Once you attach a widget to an html element, the usual event callback functions do not work the way you expect them to. Their functionality is overridden by the widget. You cannot use the functions the same way you are used to and have to find a workaround. In short you cannot use the change function to set or unset the date because set triggrers a change event.
In your case you want to address multiple issues which are very common problems. You should be able to get a lot of examples online to achieve each one of those. What I've done is just one way of doing it.
Populate the form in a non traditional way when the page loads.
Initialize various plugins with values from the form when the page loads
Initialize content from hidden fields when the form loads and update the hidden fields when submitting the form.
Fetch the values by name (of the hidden fields) and use them to initialize the widgets.
I've used blur keypress just to give you an idea that all your requirements can be handled without using change. You use the events that work for you. You can set the date by binding picker to calendar object with this keyword and access it from its instance as shown below.
(function($) {
$.fn.calendar = function(options) {
// Options du datepicker
var settings = $.extend({
editable: true,
format: 'dd/mm/yyyy',
formatSubmit: 'ddmmyyyy'
},
options
);
this.pickadate(settings);
//var picker = this.pickadate(''); will not work
this.picker = this.pickadate('picker');
this.change(function(event) {
});
this.bind('blur keypress',function(e){
if (moment($(this).val(), "DD/MM/YYYY", true).isValid()) {
var inputFieldDate=getFmtDate($(this).val());
picker.set('select',inputFieldDate);
}
});
var $triggerIcon = $('<div class="col s2 center-align"><a class="btn-floating btn-large waves-effect waves-light trigger-datepicker">Date</a></div>');
$triggerIcon.click(function(event) {
event.stopPropagation();
event.preventDefault();
picker.open();
});
this.parent().after($triggerIcon);
// Resolves picker opening for thing
this.next().unbind("focus.toOpen");
return this;
};
}(jQuery));
To set a date:
//This is how you set a date
var cal = $('.datepicker').calendar();
//You can access picker because we changed
//var picker to
//this.picker above in fn.calendar
cal.picker.set('select', getFmtDate($("[name=hiddenDate]").val()));
// The syntax is
//cal.picker.set('select', new Date());
$('#formulaireDate').validate();
You have to convert your date to Date(). The below function should give you an idea. You can also use plugins like jquery dateFormat plugin.
function getFmtDate(s){
var valx=new Array();
if(s!=null && s.length>0){
valx = s.split('/');
}
var d = new Date(valx[2],valx[1]-1,valx[0]);
return d;
}
This is your html.
<div class="row">
<div class="col s4">
<input type="text" class="datepicker" />
<input name="hiddenDate" type="hidden" value="12/12/2016">
</div>
</div>
I am not sure how to get around this or if this is a bug in meteor but if I have a template that appears under two different layouts (I use iron router)
This code for datepicker
Template.new_event.rendered = function (){
this.$('.datepicker').datepicker({
dateFormat: "yy-mm-dd"
});
}
does not work. If I land on a page that uses the "new_event" template and it is using a different layout from the one that last used the "new_event" template the datepicker command does not trigger and no errors are posted. Also I have tried using different templates (doing rendered calls on different templates), but once I go to a page that calls "datepicker" and go to another page that calls "datepicker" it does not trigger if the page is a different layout
Any help with this would be greatly appreciated
Just try removing this from your code:
Template.new_event.rendered = function (){
$('.datepicker').datepicker({
dateFormat: "yy-mm-dd"
});
}
The idea is that whatever this is referring to might not be where when you use a different layout.
First of all you need to download the meteor Datetimepicker package.
meteor add ryanswapp:datetime-picker
this could would solve ur problem I suppose:
Template.templateName.onRendered(function() {
$('#datetimepicker').datetimepicker({
format: 'Y-m-d',
timepicker: false
})
});
Your HTML should look like this
<input class="form-control" type="text" id="datetimepicker" placeholder="Enter the time">
Hope this helps!
On the website I'm currently working I have a form to add a event. This event needs a date which the user selects using a jQuery datepicker. A date can only have one event. So I want to check the date the user insert in the datepicker. I tried doing this by getting the value after the user has selected the date. The problem is however, the datepickers doesn't update his value right away.
I made a JSFiddle to show the problem. When you pick a date the span updates and shows the value of the datepicker. But as you can see the first time it is blank, and the second time it shows the previous selected date. So the datepickers does not update is value right away. How can I fix this?
I looked trough other similar questions here on stackoverflow but their solutions didn't work for me.
JSFiddle: http://jsfiddle.net/kmsfpgdk/
HTML:
<input type="text" id="datepicker" name="date" />
<span id="data"></span>
JS:
$('#datepicker').datepicker();
$('#datepicker').blur(function () {
var val = $(this).val();
$('#data').text(val);
});
Its better to use built in method onSelect:fn to use:
$('#datepicker').datepicker({
onSelect: function () {
$('#data').text(this.value);
}
});
Fiddle
As per documentation:
onSelect
Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.
change event happens before blur event.
Use .change() instead of .blur()
$('#datepicker').change(function() {
var val = $(this).val();
$('#data').text(val);
});
Updated jsFiddle Demo
If Google brought you here because your input does not seem to respond to various JQuery .on( events, most likely it's because you have another element on the same page with the same id.
How do I attach a JQuery Mobile DatePicker dynamically to an input field ?
I tried using ui-datepicker, but I think the plugin attaches Calendar to the input field that has the required markup. How do I dynamically attach a calendar using Javascript ? I tried the following
$("#datep").after( $( "<div />" ).datepicker({
altField: "#datep"
}) );
but the Calendar does not hide after the date has been chosen.
I also explored jQM-DateBox2, but couldn't figure out a way to attach calendar dynamically.
Any help would be appreciated.
To do this with DateBox, you could do something like:
$('<input data-role="datebox" ...etc.. >').appendTo(whatever).trigger('create');
OR, you could add the input field wherever you like, and then
$('#added_element').datebox({<optional options});
this is how i'm trying
<script type="text/javascript">
$(document).ready(function(){
$('#dateIn,#dateOut').click(function(e){
e.preventDefault();
});
});
</script>
but the input stills 'launching' iphone's keyboard
ps: i want to do this because i'm using datepicker plugin for date
By adding the attribute readonly (or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.
This is also usefull in non-mobile devices as you use a date/time picker
inputmode attribute
<input inputmode='none'>
The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:
none -
No virtual keyboard. For when the page implements its own keyboard input control.
I am using this successfully (Tested on Chrome/Android)
CSS-Tricks: Everything You Ever Wanted to Know About inputmode
You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.
$('.selector').datepicker({
beforeShow: function(){$('input').blur();}
});
Note: The iOS keyboard will appear for a fraction of a second and then hide.
Below code works for me:
<input id="myDatePicker" class="readonlyjm"/>
$('#myDatePicker').datepicker({
/* options */
});
$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});
I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it's great.
How to turn off iPhone keypad for a specified input field on web page
Synopsis / pseudo-code:
if small screen mobile device
set field type to "date" - e.g. document.getElementById('my_field').type = "date";
// input fields of type "date" invoke the iPhone datepicker.
else
init datepicker - e.g. $("#my_field").datepicker();
The reason for dynamically setting the field type to "date" is that Opera will pop up its own native datepicker otherwise, and I'm assuming you want to show the datepicker consistently on desktop browsers.
Since I can't comment on the top comment, I'm forced to submit an "answer."
The problem with the selected answer is that setting the field to readonly takes the field out of the tab order on the iPhone. So if you like entering forms by hitting "next", you'll skip right over the field.
Best way to solve this as per my opinion is Using "ignoreReadonly".
First make the input field readonly then add ignoreReadonly:true.
This will make sure that even if the text field is readonly , popup will show.
$('#txtStartDate').datetimepicker({
locale: "da",
format: "DD/MM/YYYY",
ignoreReadonly: true
});
$('#txtEndDate').datetimepicker({
locale: "da",
useCurrent: false,
format: "DD/MM/YYYY",
ignoreReadonly: true
});
});
So here is my solution (similar to John Vance's answer):
First go here and get a function to detect mobile browsers.
http://detectmobilebrowsers.com/
They have a lot of different ways to detect if you are on mobile, so find one that works with what you are using.
Your HTML page (pseudo code):
If Mobile Then
<input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
<input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
JQuery:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max
});
});
This way you can still use native date selectors in mobile while still setting the min and max dates either way.
The field for non mobile should be read only because if a mobile browser like chrome for ios "requests desktop version" then they can get around the mobile check and you still want to prevent the keyboard from showing up.
However if the field is read only it could look to a user like they cant change the field. You could fix this by changing the CSS to make it look like it isn't read only (ie change border-color to black) but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers.
To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:
$( ".date-picker" ).each(function() {
var min = $( this ).attr("min");
var max = $( this ).attr("max");
$( this ).datepicker({
dateFormat: "yy-mm-dd",
minDate: min,
maxDate: max,
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
Note: you will have to find a suitable image.
I have a little generic "no keyboard" script - works for me with Android and iPhone:
$('.readonlyJim').on('focus', function () {
$(this).trigger('blur')
})
Simply attach add class readonlyJim to the input tag and voila.
(*Sorry too much StarTrek here)