I am new to Ionic2.
Is there any way to display showing current date in ionic2 of datepicker ?? I mean current date won't show before datepicker's pick.It will only show only when datepicker apears. Thanks in advance.
Try mapping the datepicker model to a variable which holds the current date:
<ion-datetime [(ngModel)]="currentDate" /></ion-datetime
and in your controller:
var currentDate = new Date();
here's an example :
https://codesundar.com/ionic2-tutorial/ionic-2-date-picker-example/
<ion-datetime (ionChange)="changeDate()" displayFormat="MMMM YYYY" pickerFormat="MMMM YYYY" [(ngModel)]="filterdate"></ion-datetime>
and in your ts file
filterdate = this.today.toISOString();
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()
I am trying to implement the momentjs calendar to show the date passed time as follow
moment("2016-11-13").calendar(moment("2016-11-13"),{
sameDay: '[Today]',
nextDay: '[Tomorrow]',
nextWeek: 'dddd MMM DD',
lastDay: '[Yesterday]',
lastWeek: '[Last] dddd',
sameElse: 'DD/MM/YYYY'
});
but my requirement is when there is days diff less than 7 days then it should show the day diff not "Last Monday"
please correct the format for nextDay, nextWeek, lastDay, lastWeek so that its show the days diff like 1 day ago
function getdateFormated (date){
var otherDates = moment(date).fromNow();
var calback= function () {
return '['+otherDates+']';
}
return moment(date).calendar(null,{
sameDay: '[Today]',
nextDay:calback,
nextWeek: calback,
lastDay: calback,
lastWeek: calback,
sameElse: 'MMM DD, YYYY'
});
}
I currently have 2 datepickers.
First is StartDate & other is EndDate
On selecting StartDate after clicking on calender i want EndDate's Datetimepicker to be shown & not show/display earlier dates.
Currently i got this:
<script>
jQuery('.input-daterange').datepicker({ startDate:'+1', format: 'dd-mm-yyyy'});
$('#StartDate , #EndDate').on('changeDate', function(ev){
$(this).datepicker('hide');
});
</script>
Requirements - End date must be equal and greater then start selected start date in boostrap datepicker and before selected start date disable.
Problem - its possible in jquery date but I want to know how to make in boostrap date.
my boostrap code is
$('#start_date').datepicker({autoclose: true,startDate: new Date()});
$('#end_date').datepicker({autoclose: true,startDate: new Date()});
for reference check jquery code
Fiddle
Note - I want exact implemention of this picker in bootstrap
Can anyone help me?
Please check out this JSFiddle demo. I have placed the code below that uses bootstrap datepicker.
$(".from_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var startDate = new Date(selected.date.valueOf());
$('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
$('.to_date').datepicker('setStartDate', null);
});
$(".to_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var endDate = new Date(selected.date.valueOf());
$('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
$('.from_date').datepicker('setEndDate', null);
});
I have a date picker using jquery. However I want to add the 'bounce' animation to it. Please help me adding this animation to the date picker. My code as of now is:
$(function() {
$("#datepicker").datepicker({ dateFormat: "DD, d MM, yy" });
});
Is this what you are trying to accomplish?
$(function() {
$("#datepicker").datepicker({ showAnim: "bounce", dateFormat: "DD, d MM, yy" });
});
http://jsfiddle.net/damyanpetev/VS2hV/
Additionally you can set duration and additional options that correspond to the effect you are using (in this case 'bounce' .