I'm trying to create a datepicker with Materialize.
According to the documentation the datepicker should close when the user selects a date.
That's not working in my page. I'm using the latest Chrome browser on Windows. I've tried IE browser, but there's the whole datepicker not showing...
Click here for my page (input 3 and 4 are datepickers)
My javascript:
$('#due_date').pickadate({
monthsFull: [ 'januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december' ],
monthsShort: [ 'jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ],
weekdaysFull: [ 'zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag' ],
weekdaysShort: [ 'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za' ],
today: 'vandaag',
clear: 'verwijderen',
close: 'sluiten',
firstDay: 1,
format: 'dd-mm-yyyy',
formatSubmit: 'yyyy/mm/dd',
closeOnSelect: true,
selectMonths: true, // Creates a dropdown to control month
selectYears: 3, // Creates a dropdown of 15 years to control year
min: new Date()
});
Can anyone help me to fix these datepickers?
Please add below few lines to your code..
onSet: function (ele) {
if(ele.select){
this.close();
}
}
var datePicker = $('.datepicker').pickadate({
onSet: function () {
this.close();
}
});
The developer of materialize thought that it would match Google's date picker if it doesn't close on select according to this issue:
https://github.com/Dogfalo/materialize/issues/870
However you can change the source code of materialize if you don't mind, like this:
https://github.com/Dogfalo/materialize/commit/db0629d30a9d3e5ac06a019955a8e10062f91833
Better Solution: Use if ( 'select' in arg ) condition so that the datepicker dialog wont hide when you select month or year.
$('.datepicker').pickadate({
onSet: function( arg ){
if ( 'select' in arg ){ //prevent closing on selecting month/year
this.close();
}
}
});
i had the same problem and i solved it this way:
$('.datepicker1').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year
min: true,
onOpen: function () {
this.clear();
},
onSet: function () {
var x,y,year,date,month;
x = $('.datepicker1').pickadate().val().toString();
y = x.split(/[ ,]+/);
date = y[0];
month = y[1];
year = y[2];
console.log(y[0]+" "+ y[1]+ " "+ y[2]);
if(date && month && year){
this.close();
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Materialize Datepicker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
</head>
<body>
<form class="col s6">
<label for="To" >To : </label>
<input type="date" id="To" class="datepicker1">
</form>
<script src="site.js"></script>
</body>
</html>
The onSet: function(called when a date is set) ensures the date,month and year are entered and closes only if the date is set.
The onOpen: function(called when the datepicker opens) clears the input when datepicker is opened again, useful in case when the user inputs the wrong date.. Without using this function , the datepicker cant navigate though different months,years without closing..
Hope this solves your problem.
If "closeOnSelect: true" is not working then you can call click event of the close button
HTML code for input element:
<input type='text' id='purchase_date'/>
Js code for the element:
jQuery(document).ready(function(){
$('#purchase_date').pickadate({format: 'yyyy-mm-dd'})
.on('change', function(){
$(this).next().find('.picker__close').click();
});
});
Hope this will solve your problem.
Tested on materializecss 1.0.0: use onSelect callback
$('.datepicker').datepicker({
autoClose: true,
today: 'Today',
clear: 'Clear',
close: 'Close',
format: 'dd/mm/yyyy',
//perform click event on done button
onSelect: function () {
$('.confirmation-btns .datepicker-done').click();
}
});
Related
I need to select only day and month from bootstrap datepicker. I have try viewMode,minViewMode like attributes used but still I am not getting success.
HTML:
<input type="text" class="form-control" name="Date" id="Date" />
JS:
$(document).ready(function () {
$('#Date').datepicker({
//dateFormat: 'dd-mm-yy',
format: 'dd-mm',
viewMode: 'days',
minViewMode: 'days',
orientation: "bottom left",
container: "#date-from-container",
startDate: new Date()
}).on("changeDate", function (e) {
});
});
can you please help me how can do that?
You need maxViewMode instead of minViewMode. startView mentions the mode at which the datepicker is opened. 0-days(default), 1-months, 2-years, 3-decades, 4-centuries.
To be simple,
If you need to configure from a mode use : minViewMode.
If you need to configure to a mode use : maxViewMode.
$.fn.datepicker.dates.en.titleFormat="MM";
$(document).ready(function(){
var date_input=$('input[name="date"]');
date_input.datepicker({
format: 'dd-mm',
autoclose: true,
startView: 1,
maxViewMode: "months",
orientation: "bottom left",
})
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.css');
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
color: #b90000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<input name="date">
To update the title format, set
$.fn.datepicker.dates.en.titleFormat="MM";. en denotes English language.
This may vary if a different language is used in the datepicker. Bootstrap supports the language tags specified in IETF.
For tag reference, IETF Language Tag List
I tried to fix this but its just not working. It outputs like: 08/15/2016 but I want it like that: 15.08.2016. I tried also with "dateFormat" but it didn't work either.
var nowTemp = new Date();
nowTemp.setDate(nowTemp.getDate()+1);
var fromEndDate = new Date();
$(function() {
$('#dpd1').datepicker({
startDate: nowTemp,
dateFormat: "dd.mm.yy"
});
$('#dpd2').datepicker({
endDate: fromEndDate,
autoclose: true,
dateFormat: "dd.mm.yy"
});
});
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
The below code is to disable past dates and the option to select in dpd2 only future dates.
Change " " to ' '
$(function() {
$('#dpd1').datepicker({
startDate: nowTemp,
dateFormat: 'dd.mm.yy',
});
$('#dpd2').datepicker({
endDate: fromEndDate,
autoclose: true,
dateFormat: 'dd.mm.yy'
});
});
Do the test without the rest of the script, to be sure that the problem is in this function.
The code works fine, maybe the error is in another place.
https://jsfiddle.net/iandrabedin/09sh7b86/
Is this what you want
$('#txtDob').datepicker({
format: 'dd.mm.yyyy',
autoclose: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.de.min.js"></script>
<form action="#" method="post">
<label for="txtDob"></label>
<input type="text" id="txtDob" />
</form>
I am trying to implement sap.ui.unified.Calendarapi and to fetch events month wise. I need events or methods like Next month, previous month, or current visible month. Can anyone help ?
Listener for month and year change is currently unavailable.
I have same query and have raised a token on openui5 github.
you can check it on following link.
https://github.com/SAP/openui5/issues/361
Cheers,
harshal
This is how I use in the onAfterRendering() method
var oView = this.getView();
var oCalendar = oView.byId("usageCalendar");
var calendarHeaderRef = sap.ui.getCore().byId(oCalendar.sId + "--Head");
//to disable prev and next buttons
calendarHeaderRef.setEnabledNext(false);
calendarHeaderRef.setEnabledPrevious(false);
If you would like to listen to the previous and next buttons on the calendar, you can use
calendarHeaderRef.attachPressNext(this.calendarNextMonthPressed);
calendarHeaderRef.attachPressPrevious(this.calendarPrevMonthPressed);
Thanks.
Listening to month / year selection
In sap.ui.unified.Calendar
You can listen to month & year navigation by listening to startDateChange. Here is an example:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/unified/Calendar",
], Calendar => new Calendar({
startDateChange: event => {
const navigatedDate = event.getSource().getStartDate();
const monthYearText = navigatedDate.toLocaleString("default", {
month: "long",
year: "numeric",
});
alert(`Navigating to ${monthYearText}`);
},
}).placeAt("content")))
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
In sap.m.DatePicker
In case of the DatePicker or controls that are derived from it (DateTimePicker, DateRangeSelection, ...), the same event is applied with the event navigate
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/DatePicker", // or DateTimePicker or DateRangeSelection, etc..
], DatePicker => new DatePicker({
width: "17rem",
placeholder: "Select month / year in Calendar -->",
navigate: event => {
if (!event.getParameter("afterPopupOpened")) {
alert("Changing month / year");
}
}
}).placeAt("content")))
<script id="sap-ui-bootstrap" src="https://ui5.sap.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
I am new to JQgrid and we are using Perl Catalyst to build the application.
I need to have a drop down for the Operating system field
Please find the code for JQgrid
<title>Server Details </title>
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/css/cupertino/jquery-ui-1.10.3.custom.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/ui.jqgrid.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/print-container.css') %]" />
<script src="[% c.uri_for('/static/plugins/jqGrid/js/i18n/grid.locale-en.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.printElement.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/printing.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/export_to_excel.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.jqGrid.src.js') %]" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:"[% c.uri_for("server_details_json") %]",
datatype:'json',
mtype:'GET',
colNames:['Server Id' , 'Host Name', 'IP Address','Operating System','Operating System Version', 'Network Domain','Business Unit'],
colModel:[
{name:'server_id', index:'server_id', align:'centre',editable:false},
{name:'server_name', index:'server_name', align:'left',editable:true},
{name:'ip_address', index:'ip_address', align:'left',editable:true},
{name:'operating_system', index:'operating_system', align:'left',editable:true, edittype: 'select',
searchoptions: {value:getOptionsList(),
sopt:['eq']}},
{name:'operating_system_version', index:'operating_system_version', align:'left',editable:true},
{name:'domain', index:'domain', align:'left',editable:true},
{name:'business_unit', index:'business_unit', align:'left',editable:true},
],
pager:'#pager',
rowNum:10,
autowidth:true,
autoheight:true,
rowList:[10,20,30,1000000000000000000],
loadComplete: function() {
$("option[value=1000000000000000000]").text('All');
},
sortname:'server_id',
sortorder:'asec',
shrinkToFit:true,
viewrecords:true,
gridview:true,
height:'auto',
editurl:"[% c.uri_for("postrow") %]",
caption:'Server List '
});
$("#list").jqGrid('navGrid', '#pager',{
view:false,
del:true,
add:true,
edit:true,
search: true,
refresh: true,
print:true
},
{height:250,width:500,reloadAfterSubmit:true}, // edit options
{height:480,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
)
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Server Details');
setExcelGrid('list','pager','/tams/Server_Details_CSV','Server Details1');
});
</script>
<script>
function getOptionsList(){
$.ajax({
type: "POST",
url:"[% c.uri_for("OS_json") %]",
async:false,
dataType: 'json',
success: function(data){
options=data.value;
},
failure :function(xhr,status,msg) {
alert("Unexpected error occured. !!!"+msg);
}
});
return options;
}
</script>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>`
The Json Data is like this
[{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}]
Can some one help me Thanks in advance for your precious time
First of all you defined searchoptions.value for operating_system column which will be used during searching and not during editing. Moreover the property will work in Searching dialog only if you would add additional property stype: "select". So you should add editoptions: {value: getOptionsList() } to have <select> during editing.
The format of value for editoptions.value and searchoptions.value can be either the string like
"86:Windows;87:AIX"
or an object like
{"86": "Windows", "87": "AIX"}
and not [{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}] which you currently use.
You should change the code of getOptionsList to construct the corresponding results. By the way I prefer to use String form instead of Object form because it allows to specify the exact order of <option> elements in the <select>. The order of options in case of usage object form can be different in different web browsers.
I would recommend you to change your code so that you don't use synchronous Ajax request. Instead of that you can use editoptions {dataUrl: "[% c.uri_for("OS_json") %]", buildSelect: function (data) {...}}. You should additionally define ajaxSelectOptions: {dataType: "json"}. The callback function buildSelect get the server response (data) and it should return the HTML fragment of <select> with all <option> elements. You can find some examples here, here and here.
UPDATED: The code of buildSelect can be something like
buildSelect: function (data) {
var html = "<select>", length = data.length, i, item;
for (i = 0; i < length; i++) {
item = data[i];
html += '<option value=' + item.id + '>' + item.value + '</option>';
}
return html + "/<select>";
}
if you want that results of editing of the select will be sent as select id (like 86 for "Windows") to the server (see the demo). If you want that server get the name (like "Windows") then you need fill value of <option> elements using value property and ignore the id value:
buildSelect: function (data) {
var html = "<select>", length = data.length, i, item;
for (i = 0; i < length; i++) {
item = data[i];
html += '<option value=' + item.value + '>' + item.value + '</option>';
}
return html + "/<select>";
}
see the demo. You can use Fiddler, Developer Tools of IE or other free tools to trace the exact HTTP traffic during editing.
Your colModel must be like,
{ name: 'Decision', width: 200, editable: true, formatter: 'select', edittype: 'select',
editoptions: {
value: {
'1': 'Option 1',
'2': 'Option 2',
'3': 'Option 3'
}
}
},
I guess, it must be editoptions instead of searchoptions.
Here is an example grid, thanks to Oleg
I have a couple of columns in jqGrid with edittype="select". How can I read the option value of the value currently selected in a particular row?
e.g.: When I provide the following option, how do I get "FE" for FedEx, etc.
editoption: { value: “FE:FedEx; IN:InTime; TN:TNT” }
getRowData() for the rowId/cellname returns only the text/displayed component of the select.
If I set a "change" data event on the column, the underlying fires change events only on mouse clicks, and not keyboard selects (there's numerous references to generic selects and mouse/keyboard issues).
Bottomline, when a new value is selected, I need to know the option value at the time of the change, and also prior to posting to the server.
You have to set the formatter of the column to 'select'
Example from the wiki:
colModel : [ {name:'myname',
edittype:'select', formatter:'select',
editoptions:{value:"1:One;2:Two"}} ...
]
See more here jqgridwiki
I was having the same problem and this worked like a charm
I just solved this question by using setting JqGrid unformat option and use the following function for unformatting cell value.
function Unformat_Select(cellvalue, options, cellobject)
{
var unformatValue = '';
$.each(options.colModel.editoptions.value, function (k, value)
{
if (cellvalue == value)
{
unformatValue = k;
}
});
return unformatValue;
}
The above method will be called everytime when grid need cell data like when you call "getRowData" method. However, my function only support key-paired value edit option. You need to change your data like the following pattern.
editoption:
{
value:
{
FE:'FedEx',
IN:'InTime',
TN:'TNT'
}
}
For more information about unformat option, you can see at the following link.
JqGrid Wiki - Custom Formatter
PS. It's possible to modify my function to support client-side dropdownlist value. But I think it's impossible to apply this function for server-side dropdownlist value.
Update
In the latest jqGrid 3.8.1, I just found some bug when user cancel editing row(or programmatically call "restoreRow" method), jqGrid will create label by using key of data (instead of value of data). I create the following function to fix this issue. For use this, you must it as custom formatter function of this column. This function maps cell value to value of list by comparing key or value.
function JqGridInlineEditor_SelectFormatter(cellvalue, options, rowObject)
{
var temp = '';
$.each(options.colModel.editoptions.value, function (key, value)
{
if (cellvalue == key || cellvalue == value)
{
temp = value;
return false;
}
});
return temp;
}
So, you can send key or value as column data to be rendered by the above custom formatter.
If in case you have requirement where each row has dropdown and it has values like
FE:'FedEx',
IN:'InTime',
TN:'TNT'
Now instead of saving the data to backend on dropdown change event;you want to save data on "Save" button click at row level but want to save dropdwon selected value (TN) not display text(TNT). You can create another hidden field to set selected country code on inline editing of dropdown. Here when user exit after cell inline editing afterSaveCell method will be called and you can set it as mentioned in below code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/q/9655426/315935</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint devel: true, browser: true, plusplus: true, nomen: true, unparam: true */
$(document).ready(function () {
'use strict';
var listOptions = "CN:Canada; US:United States; FR:France; IN:India";
var mydata = [{
name: "Toronto",
country: "CN",
continent: "North America",
countrycode: "CN"
}, {
name: "New York City",
country: "US",
continent: "North America",
countrycode: "US"
}, {
name: "Silicon Valley",
country: "US",
continent: "North America",
countrycode: "US"
}, {
name: "Paris",
country: "FR",
continent: "Europe",
countrycode: "FR"
}, {
name: "Pune",
country: "IN",
continent: "Asia",
countrycode: "IN"
}]
$("#gvManageMapping").jqGrid({
data: mydata,
datatype: "local",
colNames: ["Name", "Country", "Continent", "countrycode"],
colModel: [{
name: 'name',
index: 'name',
editable: false,
},
{
name: 'country',
index: 'country',
editable: true, edittype: "select", formatter: 'select', editoptions: {
value: listOptions,
}, editrules: { required: true, integer: false }, formatter: "select"
},
{
name: 'continent',
index: 'continent',
editable: false,
},
{
name: 'countrycode',
index: 'countrycode',
editable: false
}],
afterSaveCell: function (rowid, cellname, value) {
var selectedCountryCode, $this;
if (cellname === 'country') {
$this = $(this);
selectedCountryCode = $this.jqGrid("getCell", rowid, 'country');
$this.jqGrid("setCell", rowid, 'countrycode', selectedCountryCode);
}
},
pager: '#pager',
'cellEdit': true,
'cellsubmit': 'clientArray',
editurl: 'clientArray'
});
});
//]]>
</script>
</head>
<body>
<table id="gvManageMapping"><tr><td /></tr></table>
<div id="pager"></div>
</body>
</html>
The documentation for getRowData states:
Do not use this method when you editing the row or cell. This will return the cell content and not the actuall value of the input element
Is the row still being edited when you call getRowData()?
Update
Agreed, jqGrid does not handle <select> very well. In my application I actually was able to get around this by not specifying an edit option (meaning, key/value were both "FedEx"); the translation to ID is then done on the server. This is not the right way to code this, but it worked well enough for my needs at the time.