I am using this date picker for my Ionic app:
https://github.com/rajeshwarpatlolla/ionic-datepicker
Two of the options I have set seem to have no effect.
Even though I have set dateFormat: 'yyyy-MM-dd' the date in the datepicker is shown in the default format dd-MM-yyyy.
Even though I have set closeOnSelect: true, the date picker does not close on select and the set button is visible.
Here is my code:
app.controller('MyCtrl', function($scope, $state) {
$scope.datepickerObject = {
titleLabel: 'Title', //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
//disabledDates: disabledDates, //Optional
templateType: 'popup', //Optional
to: new Date(),
callback: function (val) { //Mandatory
datePickerCallback(val);
},
dateFormat: 'yyyy-MM-dd', //Optional
closeOnSelect: true //Optional
};
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
// no date selected
} else {
$scope.datepickerObject.inputDate = val;
}
};
});
In order to customize the date format you need to specify that in your html file:
<ionic-datepicker input-obj="datepickerObject">
<button class="button"> {{datepickerObject.inputDate | date:'yyyy/MM/dd'}}</button>
</ionic-datepicker>
Also, in the current release- 0.9.0- closeOnSelect dosen't work.
https://github.com/rajeshwarpatlolla/ionic-datepicker/issues/110
Regards
Related
I wanto to disabled all the dates after a date that a person choose, so I call a function who is doing
$( "#final_date" ).datepicker({ datesDisabled: ['+m'] });
And my datepicker is like that
activeDate() {
$("#initial_date").datepicker({
changeMonth: true,
changeYear: true,
format: 'dd/mm/yyyy',
startView: "days",
minViewMode: "days",
language: 'pt-BR'
});
$("#final_date").datepicker({
changeMonth: true,
changeYear: true,
format: 'dd/mm/yyyy',
startView: "days",
minViewMode: "days",
language: 'pt-BR',
datesDisabled: this.disabledDates
});
}
But only one day after my date is being disabled, what am I doing wrong?????
Given that the goal is to
disable all dates after a date
The bootstrap datepicker documentation says you can do this with maxDate.
Takes a maxDate string, Date, moment, boolean:false parameter and disallows the user to select a moment that is after that moment. If a boolean:false value is passed options.maxDate is cleared and there is no restriction to the maximum moment the user can select. [emphasis mine]
Try this (while passing in your value for final_date):
final_date = '2019-11-11';
$( "#final_date" ).datepicker({ maxDate: final_date });
I'm trying to customize the Data field of atcomb-form-native module.
I wish the date fields were a classic input field but I still tried different methods, I didn't succeed.
I tried to override the datepicker field style but put the style when opening the picker to insert the date and not around the message.
Instead of 'Tap here to select a date' I would like to insert a phrase at will. How can I do?
Also, how can I customize the date format? I tried following this issue of github but it didn't solve the problem.
This is the part of code for formatting the data:
config: {
format: date => {
let toBeFormatted = new Date(date);
return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
},
dateFormat: date => {
let toBeFormatted = new Date(date);
return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
},
timeFormat: date => {
let toBeFormatted = new Date(date);
return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
},
}
Okay. I can give you my code. I had a little trouble finding it, but finally, everything is in the tcomb documentation.
The two important points to answer your question are :
"defaultValueText" and "format: (date) => ..."
import React, { Component } from "react";
import Expo from "expo";
import t from "tcomb-form-native";
import moment from 'moment';
import { StyleSheet, Text, Date} from "react-native";
import { Button } from "react-native-elements";
const Form = t.form.Form;
Form.stylesheet.dateValue.normal.borderColor = '#d0d2d3';
Form.stylesheet.dateValue.normal.backgroundColor = '#ffffff';
Form.stylesheet.dateValue.normal.borderRadius= 5,
Form.stylesheet.dateValue.normal.color = 'grey';
Form.stylesheet.dateValue.normal.borderWidth = 1;
const User = t.struct({
pseudo: t.String,
birthday: t.Date,
});
const options = {
order: ['pseudo','birthday'],
fields: {
pseudo: {
placeholder: 'Enter Name',
error: 'Name is empty?',
},
birthday: {
mode: 'date',
label: 'birthday',
config: {
defaultValueText: 'Enter birthday', // Allows you to format the PlaceHolders !!
format: (date) => {
return moment(date).format('DD-MM-YYYY'); // Allows you to format the date !!
},
}
},
},
};
... ...
export default class SignUp extends Component {
state = {...
render() {
return (
<View style={styles.container}>
<Form
type={User}
ref={c => (this._form = c)} // assign a ref
options={options} //set form options
/>
<Button
title="Sign Up!"
buttonStyle={styles.button}
onPress={this.handleSubmit}
/>
</View>
);
}
}
} ...
I have a category filter that populates month name with alphabetical order. I would like to display the months by chronological order (January, February, March, etc.) and also I would like to set current month name as default in the dropdown. I can not tweak the SQL by ORDER BY field, instead, I would like to do it from category filter.
Code:
var filterFrequencyData = new google.visualization.ControlWrapper(
{
'controlType': 'CategoryFilter',
'containerId': 'filterFrequencyDataHtml',
'options':
{
'filterColumnIndex': '5',
'ui':
{
'label': '',
'labelSeparator': ':',
'labelStacking': 'vertical',
'allowTyping': false,
'allowNone': false,
'allowMultiple': false,
'sortValues': false
}
}
});
When using sortValues: false on a CategoryFilter, the values will be sorted as they appear in the data.
In order to get the month names to sort in chronological order (January, February, March, etc...), you need to use a column type other than 'string' and sort that column, 'number' or 'date', for instance.
Then set the formatted value of the cell to the month name. For example:
{v: 0, f: 'January'}
or
{v: new Date(2016, 0, 1), f: 'January'}
You can also use the setFormattedValue method, if the cell already has a value:
data.setFormattedValue(0, 0, 'January');
once in place, the table can be sorted according to the 'number' or 'date':
data.sort({column: 0});
See the following working snippet, a 'date' column is used to sort the month names:
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [{
label: 'Month',
type: 'date'
}]
});
// load months in reverse
var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'});
var today = new Date();
var monthCount = 12;
var selectedRow;
var rowIndex;
while (monthCount--) {
// get row values
var monthDate = new Date(today.getFullYear(), monthCount, 1);
var monthName = formatDate.formatValue(monthDate);
// use object notation when setting value
rowIndex = data.addRow([{
// value
v: monthDate,
// formatted value
f: monthName
}]);
// set selected row
if (monthName === formatDate.formatValue(today)) {
selectedRow = rowIndex;
}
}
// sort data
data.sort({column: 0});
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
allowMultiple: false,
allowNone: false,
allowTyping: false,
label: '',
labelStacking: 'vertical',
sortValues: false
},
// use month name
useFormattedValue: true
},
// state needs formatted value
state: {
selectedValues: [data.getFormattedValue(selectedRow, 0)]
}
});
// or set state here -- just need month name
control.setState({selectedValues: [formatDate.formatValue(today)]});
var chart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart_div',
options:{
allowHtml: true
}
});
dash.bind(control, chart);
dash.draw(data);
},
packages: ['controls', 'corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="control_div"></div>
<div id="chart_div"></div>
</div>
tryin to implement the ionic datepicker ,by rajesh this is the controller implementation ,after the dependency injection
.controller('PostCtrl', function ($scope, partyStore, $rootScope, $ionicPopup, $location) {
$scope.currentDate = new Date();
$scope.title = "Custom Title";
$scope.datePickerCallback = function (val) {
if (typeof (val) === 'undefined') {
console.log('Date not selected');
} else {
console.log('Selected date is : ', val);
}
};
this is template for rendering the view ,
<ionic-datepicker idate="currentDate" disablepreviousdates="true" disablefuturedates="false" callback="datePickerCallback"
title="title">
<button class="button button-block button-positive">{{ currentDate | date:'dd - MMMM - yyyy' }}</button>
</ionic-datepicker>
this is the error it generates
TypeError: a.callback is not a function
at link.n.on.e.show.buttons.onTap (ionic-datepicker.js:1)
at Scope.IonicModule.factory.extend.$buttonTapped (ionic.bundle.js:45347)
at $parseFunctionCall (ionic.bundle.js:21044)
at ionic.bundle.js:53458
at Scope.$get.Scope.$eval (ionic.bundle.js:23100)
at Scope.$get.Scope.$apply (ionic.bundle.js:23199)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53457)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
You are not doing properly, have you followed the steps to follow?
2) Give the path of ionic-datepicker.bundle.min.js in your index.html file.
<!-- path to ionic/angularjs -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
3) In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}
4) Use the below format in your template's corresponding controller
$scope.datepickerObject = {
titleLabel: 'Title', //Optional
todayLabel: 'Today', //Optional
closeLabel: 'Close', //Optional
setLabel: 'Set', //Optional
setButtonType : 'button-assertive', //Optional
todayButtonType : 'button-assertive', //Optional
closeButtonType : 'button-assertive', //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
templateType: 'popup', //Optional
showTodayButton: 'true', //Optional
modalHeaderColor: 'bar-positive', //Optional
modalFooterColor: 'bar-positive', //Optional
from: new Date(2012, 8, 2), //Optional
to: new Date(2018, 8, 25), //Optional
callback: function (val) { //Mandatory
datePickerCallback(val);
},
dateFormat: 'dd-MM-yyyy', //Optional
closeOnSelect: false, //Optional
};
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
console.log('No date selected');
} else {
console.log('Selected date is : ', val)
}
};
5) Then use the below format in your template / html file
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button>
</ionic-datepicker>
try to use this
http://ngcordova.com/docs/plugins/datePicker/
(here to get start with ngCordova : http://ngcordova.com/docs/install/ )
Really easy to use
module.controller('MyCtrl', function($scope, $cordovaDatePicker) {
var options = {
date: new Date(),
mode: 'date', // or 'time'
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: 'DONE',
doneButtonColor: '#F2F3F4',
cancelButtonLabel: 'CANCEL',
cancelButtonColor: '#000000'
};
document.addEventListener("deviceready", function () {
$cordovaDatePicker.show(options).then(function(date){
alert(date);
});
}, false);
});
Using the basic two input field datepicker format.
http://jqueryui.com/datepicker/#date-range
Input1:
$(function() {
$("#DATE_START").datepicker({ showOtherMonths: true, minDate: +1, dateFormat:"yy-mm-dd", });
});
Input2:
$(function() {
$("#DATE_END").datepicker({ showOtherMonths: true, changeMonth: true, changeYear: true, minDate: +2, dateFormat:"yy-mm-dd", });
});
Issue:
I want the DATE_END to be DATE_START input value, plus 3 months.
EX: maxDate = DATE_START + '3m'
Not needed current date plus 3 months
Thanks
You have just to set the Date like this:
$(function() { $("#DATE_START").datepicker({ showOtherMonths: true, minDate: "+3m", dateFormat:"yy-mm-dd", }); })
$( "#DATE_END" ).datepicker.datepicker({ showOtherMonths: true, minDate: "+3m", dateFormat:"yy-mm-dd", }); })
Have a look on the documentation. Its pretty good.
http://api.jqueryui.com/datepicker/#option-minDate
You can also use this to set the date:
$( ".selector" ).datepicker( "setDate", "10/12/2012" );