I can go back from date to year in datepicker. But when I try to come back to date, when i clicked on year, datepicker automatically hide.
var datePickerOptions = this.data || {};
datePickerOptions.format = datePickerOptions.format || "mm-dd-yyyy";
datePickerOptions.language = datePickerOptions.language || this.lang.code;
var $context = this;
var dateContainer = this.container.find(".datepicker");
dateContainer.datepicker(datePickerOptions).on('changeDate', function (ev) {
// here i'm getting the value
});
This because of bootstrap-datepicker.js .
on click event you can find like following.
case 'span':
if (!target.is('.disabled')) {
this.viewDate.setUTCDate(1);
if (target.is('.month')) {
var day = 1;
var month = target.parent().find('span').index(target);
var year = this.viewDate.getUTCFullYear();
this.viewDate.setUTCMonth(month);
this._trigger('changeMonth', this.viewDate);
if (this.o.minViewMode === 1) {
this._setDate(UTCDate(year, month, day,0,0,0,0));
}
} else {
var year = parseInt(target.text(), 10)||0;
var day = 1;
var month = 0;
this.viewDate.setUTCFullYear(year);
this._trigger('changeYear', this.viewDate);
if (this.o.minViewMode === 2) {
this._setDate(UTCDate(year, month, day,0,0,0,0));
}
}
this.showMode(-1);
this.fill();
}
instead of this.fill(), if you use like following code, this will work as you expected.
if (target.is('.month')) {
if (!this._o.changeMonth) {
this.fill();
}
}
else {
if (!this._o.changeYear) {
this.fill();
}
}
I hope, this will help you. :-)
Related
I'm trying to disable specific dates and enable only specific days of the week on a jQuery UI datepicker.
This is inside a Wordpress/Woocommerce theme and I'm trying to solve some bugs but I'm here for hours trying to figure out for a solution and even tried every solution I found on StackOverflow and other websites, but nothing seems to work.
My objective is to enable only chosen days of the week to be available, but when a date is chosen and bought, I need to disable it too. I successfully disabled the days of the week that I need to be disabled, but I can't do even a hardcoded prototype about the bought dates that should be disabled.
The code (with some hardcoded sample):
$(document).ready(function(){
var available_days = ["3"]; //it comes from the database
var today = new Date();
var tour_start_date = new Date( 1525132800000 ); //it comes from the database
var tour_end_date = new Date( 1546214400000 ); //it comes from the database
var available_first_date = tour_end_date;
var lang = 'en_UK';
lang = lang.replace( '_', '-' );
today.setHours(0, 0, 0, 0);
tour_start_date.setHours(0, 0, 0, 0);
tour_end_date.setHours(0, 0, 0, 0);
if ( today > tour_start_date ) {
tour_start_date = today;
}
function DisableDays(date) {
var day = date.getDay();
if ( available_days.length == 0 ) {
if ( available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
return true;
}
if ( $.inArray( day.toString(), available_days ) >= 0 ) {
if ( available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
return true;
} else {
return false;
}
}
if ( $('input.date-pick').length ) {
if ( lang.substring( 0, 2 ) != 'fa' ) {
$('input.date-pick').datepicker({
startDate: tour_start_date,
endDate: tour_end_date,
beforeShowDay: DisableDays,
language: lang
});
$('input[name="date"]').datepicker( 'setDate', available_first_date );
} else {
var date_format = $('input.date-pick').data('date-format');
$('input.date-pick').persianDatepicker({
observer: true,
format: date_format.toUpperCase(),
});
}
}
});
Please review: http://api.jqueryui.com/datepicker/#option-beforeShowDay
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The issue in your code was that you were only returning true or false when an Array was needed. For example:
$(function() {
var available_days = ["3", "5"]; //it comes from the database
var today = new Date();
var tour_start_date = new Date(1525132800000); //it comes from the database
var tour_end_date = new Date(1546214400000); //it comes from the database
var available_first_date = tour_end_date;
var lang = 'en_UK';
lang = lang.replace('_', '-');
today.setHours(0, 0, 0, 0);
tour_start_date.setHours(0, 0, 0, 0);
tour_end_date.setHours(0, 0, 0, 0);
if (today > tour_start_date) {
tour_start_date = today;
}
function DisableDays(date) {
var day = date.getDay();
var found = false;
if (available_days.length == 0) {
if (available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
found = true;
}
if ($.inArray(day.toString(), available_days) >= 0) {
console.log(day + " in Array");
if (available_first_date >= date && date >= tour_start_date) {
available_first_date = date;
}
found = true;
}
console.log(day, found);
return [found, "tour-date", "Tour Date"];
}
if ($('input.date-pick').length) {
if (lang.substring(0, 2) != 'fa') {
$('input.date-pick').datepicker({
startDate: tour_start_date,
endDate: tour_end_date,
beforeShowDay: DisableDays,
language: lang
});
$('input[name="date"]').datepicker('setDate', available_first_date);
} else {
var date_format = $('input.date-pick').data('date-format');
$('input.date-pick').persianDatepicker({
observer: true,
format: date_format.toUpperCase(),
});
}
}
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date: <input type="text" class="date-pick" name="date" />
I am trying to validate that the time is past the current time in my "if" statement. This is a javascript file.
addNewTodoSave() {
var self = this;
if (this.validateFields()) {
var todos = State.getState().todos;
if (!todos) {
todos = [];
}
var date = moment(self.$el.find('.add-todo .date-input').val());
var time;
if (moment(self.$el.find('.add-todo .todo-time input').val(), 'hh:mm A').isValid()) {
time = moment(self.$el.find('.add-todo .todo-time input').val(), 'hh:mm A').format('HH:mm:ss');
} else if (moment(self.$el.find('.add-todo .todo-time input').val(), 'HH:mm').isValid()) {
time = moment(self.$el.find('.add-todo .todo-time input').val(), 'HH:mm').format('HH:mm:ss');
} else {
time = '';
}
}
}
I need to get visible dates from the Datepicker if mode is day.
Example:
In this case I need to get these 42 days. Also if user change month, I should refresh the Datepicker controller view and get new 42 days.
So i managed to fix this.
We need to extend uibDatepickerDirective
angular.module('ui.bootstrap.datepicker')
.config(function ($provide) {
$provide.decorator('uibDatepickerDirective', function ($delegate, $timeout) {
var directive = $delegate[0];
var link = directive.link;
angular.extend(directive.scope, {
visibleDates: '=?'
});
directive.compile = function () {
return function (scope, element, attrs, ctrls) {
link.apply(this, arguments);
var datepickerCtrl = ctrls[0];
datepickerCtrl.getVisibleDates = function () {
var year = this.activeDate.getFullYear(),
month = this.activeDate.getMonth(),
firstDayOfMonth = new Date(this.activeDate);
firstDayOfMonth.setFullYear(year, month, 1);
var difference = this.startingDay - firstDayOfMonth.getDay(),
numDisplayedFromPreviousMonth = difference > 0 ?
7 - difference : -difference,
firstDate = new Date(firstDayOfMonth);
if (numDisplayedFromPreviousMonth > 0) {
firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
}
return this.getDates(firstDate, 42);;
}
var firstTime = true;
$timeout(function () {
scope.$watch("activeDt", function () {
var newValues = datepickerCtrl.getVisibleDates();
if (firstTime) {
scope.visibleDates = newValues;
firstTime = false;
return;
}
if (newValues[0].getYear() !== scope.visibleDates[0].getYear() ||
newValues[0].getMonth() !== scope.visibleDates[0].getMonth() ||
newValues[0].getDate() !== scope.visibleDates[0].getDate()) {
scope.visibleDates = newValues;
}
});
});
}
};
return $delegate;
});
});
And in directive itself we need to pass atribute visible-dates and point to the variable where we want to save these 42 days.
<span uib-datepicker visible-dates="visibleDates" datepicker- ng-model="datePicked"></span>
This way we will update visibleDates (42 of them) if we change month in datepicker, but if we change activeDate (scope.activeDt) on the same month (same visible dates), it will stay unchanged.
I ran into a deadly chaos on datepicker issues.
Who can solve my problem I can give 100 point as a return.
When I click the calendar on 2016-08-23 it will show me the 2016-08-22 as the date value.
Furthermore, the date value in angular model is also not correct.
I want to make the output can be consistent.
To reproduce the buggy issue, change your timezone between LA and TOKYO
DEMO site: https://test.jiyubi.com/tour_package/home
controller js
app.controller('tourPackageStartDatePickerCtrl',
function ($scope) {
$scope.initStartDate = function () {
$scope.startDate = $scope.startDate || null;
};
$scope.initStartDate();
$scope.dateOptions = {
baseDate: $scope.startDate,
minDate: $scope.startDate || moment.utc().toDate(),
};
$scope.openStartDateClick = function () {
$scope.startDatePopup.opened = true;
};
});
app.controller('tourPackageEndDatePickerCtrl',
function ($scope, $rootScope) {
$scope.clear = function () {
$scope.endDate = null;
};
$scope.endDateOptions = {
dateDisabled: disabledDays,
baseDate: new Date(),
};
$scope.openEndDateClick = function () {
$scope.endDatePopup.opened = true;
};
$scope.$watch("endDate", function (new_val, old_val) {
if (new_val && moment(new_val).isValid()) {
setTravelDateRange($scope.startDate, $scope.endDate);
}
}, true)
function setTravelDateRange(startDate, endDate) {
var start_date = moment_with_TAIPEI_TZ(startDate).format("YYYY/MM/DD");
var end_date = moment_with_TAIPEI_TZ(endDate).format("YYYY/MM/DD");
moment(startDate.toDateString()).tz("Asia/Taipei").format("YYYY/MM/DD");
$scope.q_param.startDate = start_date;
$scope.q_param.date_range = start_date + "-" + end_date;
}
});
helper.js
function moment_with_TAIPEI_TZ(time){
return moment(time).tz("Asia/Taipei");
}
function MOMENT_WITH_LOCAL(time){
return moment(time).local();
}
function discard_timezone(value) {
return moment.utc(value).format(DEFAULT_MOMENT_TIME_FORMAT);
}
function getYYYYMMDD(value) {
return moment.utc(value).format("YYYY/MM/DD");
}
function date_without_timezone(value) {
return moment.utc(value).toDate();
}
It's may be because of a timezone issue.
Could you please try to convert to date without considering the timezone?
this.convertToDateWithoutTimezone = function(date) {
if (date.toString().match(/(\d\d\d\d)-(\d\d)-(\d\d)/)) {
var year = $filter('date')(date.slice(0, 10), 'yyyy'),
month = $filter('date')(date.slice(0, 10), 'MM'),
day = $filter('date')(date.slice(0, 10), 'dd');
return new Date(year, month - 1, day);
} else {
return new Date(date);
}
};
A friend of mine has a Drupal 6 site where users are able to select a future date for a delivery. Recently, several customers have been selecting weekends and holidays for delivery dates, and my friend would like to prevent them from doing so.
This is the code we're currently using to block out weekends. Can someone help modify it to also block out Christmas and New Years Eve?
Thanks very much!
drupal_add_js("
Drupal.behaviors.date_popup = function (context) {
for (var id in Drupal.settings.datePopup) {
$('#'+ id).bind('focus', Drupal.settings.datePopup[id], function(e) {
if (!$(this).hasClass('date-popup-init')) {
var datePopup = e.data;
// CUSTOM
datePopup.settings.beforeShowDay = function(date) {
var day = date.getDay();
return [(day != 0 && day != 6), ''];
}
// Explicitely filter the methods we accept.
switch (datePopup.func) {
case 'datepicker':
$(this)
.datepicker(datePopup.settings)
.addClass('date-popup-init')
$(this).click(function(){
$(this).focus();
});
break;
case 'timeEntry':
$(this)
.timeEntry(datePopup.settings)
.addClass('date-popup-init')
$(this).click(function(){
$(this).focus();
});
break;
}
}
});
}
};
",'inline');
UPDATE:
I ended up doing the following, which works for our needs:
drupal_add_js("
Drupal.behaviors.date_popup = function (context) {
for (var id in Drupal.settings.datePopup) {
$('#'+ id).bind('focus', Drupal.settings.datePopup[id], function(e) {
if (!$(this).hasClass('date-popup-init')) {
var datePopup = e.data;
// CUSTOM
datePopup.settings.beforeShowDay = function(date) {
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[12, 31, 2015], [12, 25, 2015]];
var closedDays = [[Saturday], [Sunday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
// Explicitely filter the methods we accept.
switch (datePopup.func) {
case 'datepicker':
$(this)
.datepicker(datePopup.settings)
.addClass('date-popup-init')
$(this).click(function(){
$(this).focus();
});
break;
case 'timeEntry':
$(this)
.timeEntry(datePopup.settings)
.addClass('date-popup-init')
$(this).click(function(){
$(this).focus();
});
break;
}
}
});
}
};
",'inline');