The following code was working with Smartface 4.2.4 but the same code crashes for Smartface 4.3. Did something change in the new version?
function Page1_ImageButton3_OnTouch(e){
showDate();
}
function showDate(){ SMF.UI.showDatePicker({
CurrentDate : new Date(), // date is given with JS date object
mask : "YYYY-MM-DD",
minDate:new Date("2000-01-01"),
maxDate:new Date("2030-12-01"),
showWorkingDate : true,
onSelect : function(e) {
alert("Working!")
}
});
}
Why did you set 2030 on maxDate?
Anyway, you have missed and write wrong some properties of datepicker object. You can try this it will work iOS and Android:
SMF.UI.showDatePicker({
mask : "yyyy-MM-dd",
currentDate : new Date(),
minDate : new Date("2000-01-01"),
maxDate : new Date("2030-12-01"),
showWorkingDate : true,
displayMode : 2,
onSelect : function (e) {},
onCancel : function (e) {}
});
Related
Here I am Using Date Picker of materialize frame work. Can anyone Please tell me how can i Disable Future Date from Current Date?
With 1.0 alpha version you can do you can specify maxDate in the options field when initializing the datepicker:
var elem = document.querySelector('.datepicker');
var instance = M.Datepicker.init(elem, {
maxDate: new Date()
});
// Or with jQuery
$(document).ready(function(){
$('.datepicker').datepicker({
maxDate: new Date(),
});
});
The other version v0.100.2 does not seem to have the maxDate option.
Please add this code to your script:
max: new Date()
Openui5 version working on: 1.38.4
wk_start_ts=new sap.m.DateTimeInput({type:"DateTime",
layoutData: new sap.ui.layout.GridData({linebreak: false,span: "L6 M6 S6"}),
dateValue: new Date(1468845873851),
valueFormat: "dd/MM/yyyy HH:mm:ss",
visible : true,
displayFormat: "dd/MM/yyyy HH:mm"}).placeAt("body");
var oButton1 = new sap.ui.commons.Button({
text : "Button",
tooltip : "This is a test tooltip",
press : function() {alert(wk_start_ts.getValue());}
});
oButton1.placeAt("body");
For example :
Expected data bound by default is 18/7/2016 18:56
Expected output is 18/7/2016 18:56
Actual Output : 07/18/2016 6:56 PM
Note: If I change value and then press button then I get expected date value.
Here is an example bin (https://jsbin.com/doxoro/edit?js,output).
Added a screenshot from browser tested upon i.e. Google Chrome
I debugged a bit and it appears that it processes the settings by for (property in settings) clause. So in your particular fragment dateValue is processed before any formatting options. And I would suggest to place dateValue at the end of the settings object:
wk_start_ts=new sap.m.DateTimeInput({type:"DateTime",
layoutData: new sap.ui.layout.GridData({linebreak: false,span: "L6 M6 S6"}),
valueFormat: "dd/MM/yyyy HH:mm:ss",
visible : true,
displayFormat: "dd/MM/yyyy HH:mm",
dateValue: new Date(1468845873851)
}).placeAt("body");
var oButton1 = new sap.ui.commons.Button({
text : "Button",
tooltip : "This is a test tooltip",
press : function() {alert(wk_start_ts.getValue());}
});
oButton1.placeAt("body");
How to assign a button with picture for a datepicker defined on smartface?
When an icon assigned on datepcker structure it adds "select date.." text instead of image as button.
You can create a imageButton to call showDatePicker method with images.
For example;
function showDate(){
SMF.UI.showDatePicker({
currentDate : (new Date()).toString(), // date is given with JS date object
mask : "dd-MM-yyyy",
minDate : new Date("13 October, 2013"),
maxDate : new Date("13 October, 2020"),
showWorkingDate : true,
onSelect : function (e) {
var sDate = new Date(e.date);
alert("Selected date: " + sDate.toString());
},
onCancel : function (e) {
alert("Picker cancelled!");
}
});
}
var imageButton1 = new SMF.UI.ImageButton({
width : "9.38%",
height : "10.38%",
left : "5%",
top : "84.62%",
touchEnabled : false,
imageFillType : SMF.UI.ImageFillType.autosize,
defaultImage : "datePicker.png", //which is your date icon
highLightedImage : "content1.png", //which is your date icon when highligted
inactiveImage : "content2.png", //which is your inactive date icon
text : "",
onPressed : showDate,
});
I have a page in which I have a date field and a CKeditor textarea(which creates an iframe at the textarea place) . On date picker I have defined a blur function to check date validity, which works correctly.
However, the issue is when I click on a datepicker field the calendar popup gets generated then I enter a invalid date and then click on inside ckeditor , the calendar remains open however focus gets lost but still the blur function doesn't get called. Hence invalid date goes to server. (I need client side validation for this date field) .
$(function(){
$(".dateClass").datepicker({
changeMonth : true,
changeYear : true,
yearRange: "-10:+10",
dateFormat : "dd/mm/yy",
buttonText : "Choose",
showOtherMonths : true,
selectOtherMonths : true
});
$(".dateClass").blur(function(){
if(this.value!=undefined && this.value!=null && this.value.replace(/^\s+|\s+$/g, '')!=''){
if(!isDateValid(this.value) && calendarOpen==0){
alert('Please enter a valid date in dd/mm/yyyy format');
this.focus();
}
}
});
});
CKeditor is actually embedding an iframe in the page.
How do I call blur function when user clicks on date field and then on iframe ??
thnx I got it to work by doing a way around
document.onfocusout = function(e){ //for IE8 and lesser
if( e === undefined ){
//keeping validations here
}
}
$(window).blur( function(e){ //for other browsers –
if( e !== undefined ){
//keeping validations here
}
}
Use onSelect for your required situation as
$(".dateClass").datepicker({
changeMonth : true, changeYear : true,
yearRange: "-10:+10", dateFormat : "dd/mm/yy",
buttonText : "Choose", showOtherMonths : true,
selectOtherMonths : true ,
onSelect: function(dateText, inst) { var date = $(this).val(); var time = $('#time').val(); alert('on select triggered');
}
});
Sorry for unformated code.
Hope it will help
http://forum.jquery.com/topic/jquery-datepicker-onblur
I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
var form = this;
settings.onblur = function(e) {
t = setTimeout(function() {
original.reset.apply(form, [settings, self]);
}, 100);
};
$(this).find('input').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-y',
closeAtTop: true,
onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
});
},
submit : function(settings, original) { }
});
$(function() {
$('.edit_eta').editable('update_must_fix_eta.php', {
id: 'bugid',
name: 'eta',
type: 'datepicker',
event: 'click',
select : true,
width: '50px',
onblur:'cancel',
cssclass : 'editable',
indicator : 'Updating ETA, please wait.',
style : 'inherit',
submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1}
});
});
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.
Have you tried jeditable-datepicker plugin? It seems to do exactly what you need.
It enables jQuery UI Datepicker in Jeditable. Here's the demo.
Yes, I was using the same. I had to disable Prev and Next buttons which navigate to previous and next months respectively. I display 3 months calendar when the link is clicked and if the user wants to enter a date which does not fall in any of these 3 months I let him enter it manually by making the input text box editable. That solved my problem.