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" );
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 display a date range in my code, which appears as this: 06-08-2017 - 12-08-2017.
But what I would like to see is this: 06 August - 12 August
I wondered how to do it.
Here is the code I use to display dates:
<script>
$(document).ready(function() {
var startDate;
var endDate;
// configure the bootstrap datepicker
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('#js-datepicker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('#js-datepicker').datepicker({
//config default
altField: "#datepicker",
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'dd-mm-yy',
firstDay: 1,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(date,obj){
var daty = $(this).datepicker('getDate');
console.log(daty);
startDate = new Date(daty.getFullYear(), daty.getMonth(), daty.getDate() - daty.getDay());
endDate = new Date(daty.getFullYear(), daty.getMonth(), daty.getDate() - daty.getDay() + 6);
var dateFormat = obj.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, obj.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, obj.settings ));
selectCurrentWeek();
date = $.datepicker.formatDate('dd-mm-yy', daty);
console.log(date);
$('#date_input').val(date);
}
});
});
</script>
Thank you
Try this :
dateFormat: 'dd-MMMM',
A good library for date format is
http://momentjs.com
From the documentation
moment().format('MMMM Do YYYY, h:mm:ss a'); // August 13th 2017, 8:26:44
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
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);
});
I have been working with the FullCalendar and came across some problems in Firefox. I have selectable on and the start date comes over in IETF format. For some reason, IE8 is able to post this (and autoconvert it to a timestamp), but Firefox won't.
It leaves it in IETF format, and PHP's date() function doesn't work with it. I used the fullCalendar.formatDate() function as a work-around, but this doesn't seem like the best solution to me.
Is there another way to make this work?
<script type='text/javascript'>
$(document).ready(function () {
var date = new Date();
var calendar = $("#calendar").fullCalendar({
theme: true,
title: "Employee Calendar",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonIcons: {prev: 'circle-triangle-w', next: 'circle-triangle-e'},
editable: true,
droppable: true,
events: '<?php echo matry::base_to('utilities/calendar_events');?>',
eventClick: function (event) {
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
type: 'POST',
data: {id: event.id, job: 'getEvent'},
success: function(data){
$("#event_box").fadeIn(500);
$("#event_info").html(data);
}
});
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay){
var title = prompt('Event Title');
start = $.fullCalendar.formatDate(start, 'yyyy-MM-dd HH:mm:ss');
end = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm:ss');
if (title)
{
$.ajax({
type: 'POST',
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
data: {title: title, start: start, end: end, allDay: allDay, job: 'createEvent'},
success: function(data) {
calendar.fullCalendar('refetchEvents' );
$("#alerts").html(data);
}//close success function
})//close ajax
}
else
calendar.fullCalendar('unselect');
}//close select function
}); //close fullcalendar function
$("#calendar_controls").accordion({
collapsible: true,
clearStyle:true,
active: false,
autoHeight: true
});//close calendar controls
$(document).on('submit', '#event_form', function (event){
event.preventDefault();
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
type: 'POST',
data: $('#event_form').serialize(),
success: function(data){
$("#event_box").fadeOut('2000');
$("#alerts").html(data).focus();
}
})
});//close on function
$(document).on('click', '#delete', function() {
var con = confirm('Do you want to delete this Event?');
if (con)
{
var id = $("#event_form input[name= 'id']").val();
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
data: {id: id, job: 'deleteEvent'},
type: 'POST',
success: function(data){
$("#alerts").html(data).focus()
calendar.fullCalendar('refetchEvents');
$("#event_box").fadeOut(1000);
;}
});
}
})
}); //close document.ready function
</script>
IETF date format doesn't get passed correctly by firefox, but the date can be altered with the $.fullCalendar.formatDate() function that appears to work well. IF this is added wherever dates are passed, the format can be changed.