I am trying to disable months in a dateTIMEpicker, not datepicker, which is in month mode (and need to stay in that mode).
Months that I need to disable are the ones that are before those in datePickerFrom.
Here is my code:
$('#newDialog #datePickerFrom').datetimepicker({
format: 'dd.MM.yyyy',
viewMode: 'months',
minViewMode: 'months',
pickTime: false
});
$('#newDialog #datePickerTo').datetimepicker({
format: 'dd.MM.yyyy',
viewMode: 'months',
minViewMode: 'months',
pickTime: false
});
$('#newButton').click(function() {
var dialog = $('#newDialog');
$('#dialogHeader').text("New monthly fee");
resetValue($("#id", dialog), '');
resetValue($("#countryId", dialog), '');
resetValue($("#typeId", dialog), '');
resetValue($("#currencyId", dialog), '');
resetValue($("#reportChannelTypeId", dialog), '');
resetValue($("#value", dialog), '0.00');
resetValue($("#description", dialog), '');
resetValue($("#validTo", dialog), '');
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var pickerFrom = $('#newDialog #datePickerFrom').data('datetimepicker');
firstDay.setHours(0, 0, 0, 0);
pickerFrom.setLocalDate(firstDay);
$('#newDialog #datePickerTo').datetimepicker().on("changeDate", function(e) {
var endDay = new Date(e.date.getFullYear(), e.date.getMonth() + 1, 0);
var pickerEnd = $('#newDialog #datePickerTo').data('datetimepicker');
endDay.setHours(23,59,59,999);
pickerEnd.setLocalDate(endDay);
});
Related
I have two text boxes with a datetimepicker hooked up to them. The text boxes are for start date and end date. The first datetimepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datetimepicker so that it cannot choose a date before the date chosen in the first date picker and whatever date is selected in first datetimepicker, the second datetimepicker date should be exactly 1 month from the first datetimepicker(User can then select the second datetimepicker to be 1 month or less than 1 month)?
Here's what I have so far:
Tried it via datetimepicker and onChangeDateTime function
<script src="~/Scripts/jquery.datetimepicker.js"></script>
<script>
$(document).ready(function () {
$('#ValidFrom').datetimepicker({
datepicker: true,
timepicker: false,
format: 'm/d/Y',
step: 30,
minDate: new Date(),
onChangeDateTime: function (dp, $input) {
var date = new Date($input.val());
$('#ValidTo').datetimepicker("option", "minDate", date);
//alert(date);
var date2 = new Date($input.val());
date2.setMonth(date.getMonth() + 1);
$('#ValidTo').datetimepicker("option", "maxDate", date2);
//alert(date2);
date2 = (date2.getMonth() + 1) + '/' + date2.getDate() + '/' + date2.getFullYear();
$('#ValidTo').val(date2);
}
});
$('#ValidTo').datetimepicker({
datepicker: true,
timepicker: false,
format: 'm/d/Y',
step: 30,
minDate: new Date()
});
});
</script>
If today is 1/16/2019 and I choose 1/28/2019 in the first datetimepicker, then the second date picker shouldn't be able to choose anything before 1/28/2019, second datetimepicker date should be 2/28/2019 or the user if wants, can select the date as less than 1 month.
You can use this function and use startdate id as date_timepicker_startend and enddate id as date_timepicker_end
<input type="text" class="form-control" id="date_timepicker_start">
<input type="text" class="form-control" id="date_timepicker_end">
These are the plugins you have to call
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.js"></script>
Date Logic with date and time validation
jQuery(function(){
var logic_start = function( currentDateTime ){
var d = new Date(currentDateTime); var date = d.getDate();
var month = d.getMonth(); var year = d.getYear();
var hours = d.getHours(); var minutes = d.getMinutes();
var dd = new Date($('#date_timepicker_end').val()); var end_date = dd.getDate();
var end_month = dd.getMonth(); var end_year = dd.getYear();
var end_hours = dd.getHours(); var end_minutes = dd.getMinutes();
var endtime= end_year+'/'+end_month+'/'+end_date;
var starttime= year+"/"+month+"/"+date;
if(starttime==endtime){
this.setOptions({
maxTime:end_hours+":00"
});
}else
this.setOptions({
maxTime:"23:00"
});
this.setOptions({
maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
});
};
var logic_end = function( currentDateTime ){
var d = new Date(currentDateTime); var date = d.getDate();
var month = d.getMonth(); var year = d.getYear();
var hours = d.getHours(); var minutes = d.getMinutes();
var dd = new Date($('#date_timepicker_start').val()); var end_date = dd.getDate();
var end_month = dd.getMonth(); var end_year = dd.getYear();
var end_hours = dd.getHours(); var end_minutes = dd.getMinutes();
var starttime= end_year+'/'+end_month+'/'+end_date;
var endtime= year+"/"+month+"/"+date;
if(starttime==endtime){
this.setOptions({
minTime:end_hours+":00"
});
}else
this.setOptions({
minTime:"00:00"
});
this.setOptions({
minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
});
};
jQuery('#date_timepicker_start').datetimepicker({
format:'Y/m/d H:i:s',
onChangeDateTime:logic_start,
onShow:logic_start
});
jQuery('#date_timepicker_end').datetimepicker({
format:'Y/m/d H:i:s',
onChangeDateTime:logic_end,
onShow:logic_end
});
});
let DateInitial = $("#DateInitial");
let DateEnd = $("#DateEnd");
let dateNow = new Date();
/* click start clear end */
DateInitial.on("click", function(){
DateEnd.val(" ");
DateInitial.datetimepicker({
onShow:function( ct ){
this.setOptions({
format: 'd-m-Y H:i',
closeOnDateSelect : true,
validateOnBlur : true,
minDate: -0,
minTime: dateNow.getTime(),
onClose: function($input){
dateAllowPlusOne($input);
}
});
}
});
});
function dateAllowPlusOne(dateStart){
if(DateInitial.val()=="")
{
DateInitial.focus();
return false;
}
DateEnd.datetimepicker({
'format': 'd/m/Y H:i',
'minDate': -0,
startDate: dateStart,
'closeOnDateSelect' : true,
'validateOnBlur' : true,
'minDateTime': new Date()
});
DateEnd.attr("disabled", false);
}
I'm using this code for create a booking system:
http://jsfiddle.net/9zjwdypc/
This example working fine, but I can't add the internalization and others option.
I tried this sample code:
$('#dpd1').datepicker({
language: 'it'
});
$('#dpd1').datepicker({
format: "dd-mm-yyyy",
weekStart: 1,
language: "fr",
autoclose: true,
todayHighlight: true
});
$('#dpd2').datepicker({
format: "dd-mm-yyyy",
weekStart: 1,
language: "fr",
autoclose: true,
todayHighlight: true
});
$(window).load(function(){
var nowTemp = new Date();
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');
});
adding:
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/locales/bootstrap-datepicker.fr.js"></script>
The same using this:
$(document).ready(function(){
$.fn.datepicker.defaults.language = 'it';
});
This is the error:
TypeError: $.fn.datepicker.dates is undefined
You have include french language file and then try to use italian language...
I do the following
When I tap on text field, I show a picker, and I change the background image of the text field.
When the person is done with the picker (they click "done"), and I change the text field background back to white.
When I click on the text field again, the background image does not get changed even though the picker appears.
What can I do? I want it so that the text field keeps getting changed to a green background whenever I click on it and the picker shows up. And then changes back to white when I tap out of it and the picker disappears.
tf1.addEventListener('focus', function(e) {
Titanium.API.info('Triggered focus on date txtField');
tf1.setBackgroundImage('../images/selected.gif');
Titanium.API.info(tf1.backgroundImage);
var winDatePicker1 = Titanium.UI.currentWindow;
var minDate = new Date();
minDate.getFullYear();
minDate.getMonth();
minDate.getDate();
var maxDate = new Date();
maxDate.setFullYear(2018);
maxDate.setMonth(9);
maxDate.setDate(30);
var datePicker = Ti.UI.createPicker({
type : Ti.UI.PICKER_TYPE_DATE_AND_TIME,
minDate : minDate,
maxDate : maxDate,
bottom : 0,
minuteInterval : 10
});
var tview = Ti.UI.createView({
height : '100%',
width : '100%',
top : 0,
backgroundColor : 'transparent'
});
var done1 = Ti.UI.createImageView({
title : '',
width : 80,
right : 12,
height : 40,
image : '../images/done.gif',
});
var toolbar1 = Ti.UI.createView({
height : 43,
backgroundImage : '../images/toolbar.gif',
});
toolbar1.add(done1);
done1.addEventListener('click', function() {
tf1.backgroundImage = '';
toolbar1.hide();
datePicker.hide();
tview.hide();
});
tview.addEventListener('click', function() {
toolbar1.hide();
datePicker.hide();
tview.hide();
});
// turn on the selection indicator (off by default)
datePicker.selectionIndicator = true;
datePicker.addEventListener('change', function(e) {
Titanium.API.info('E value = ' + e.value);
var pickerDate = e.value;
var day = pickerDate.getDate();
day = day.toString();
if (day.length < 2) {
day = '0' + day;
}
var month = pickerDate.getMonth();
month = month + 1;
month = month.toString();
if (month.length < 2) {
month = '0' + month;
}
var year = pickerDate.getFullYear();
var hr = pickerDate.getHours();
var min = pickerDate.getMinutes();
if (hr < 10) {
hr = '0' + hr;
}
if (min < 10) {
min = '0' + min;
}
var datestr = '';
if (hr >= 12)
{
datestr += ' ' + (hr == 12 ? hr : hr - 12) + ':' + min + ' PM';
} else {
datestr += ' ' + hr + ':' + min + ' AM';
}
var newdate = month + "/" + day + "/" + year + datestr;
Titanium.API.info('converted value = ' + newdate);
tf1.setValue(newdate);
});
tview.add(datePicker);
tview.add(toolbar1);
winDatePicker1.add(tview);
winDatePicker1.show({
view : tf1,
animated : true
});
});
make setVisible(true) or setVisible(false)
show() and hide() will not give proper toggle at some conditions.
I'd like to use the dijit.calendar widget, but be able to set disabled dates from an array of dates. All the examples point out how to disable weekends, but I need to disable special dates too.
Can anyone point me in the right direction to utilize a custom function in the isDisabledDate, rather than just whats in dojo.date.locale?
I've tried writing a function, and putting it inside the isDisabledDate attribute, but all I get is errors.
I'm making a huge assumption here, that you're populating your array for each month displayed via an XHR request. This XHR request returns an array of strings in Y-m-d format (i.e. ['2011-11-29','2011-11-30']). Another slight assumption is that the XHR request returns an array of dates that should be enabled, but this can be reversed by swapping the disable = true; and disable = false; lines
I don't know how much detail to go into without being patronizing, so if anything is unclear I'll try to clarify afterwards.
dojo.provide("custom.Calendar");
dojo.declare("custom.Calendar", dijit.Calendar, {
_xhr: null,
// Month/Year navigation buttons clicked
_adjustDisplay: function(){
// Ensure all dates are initially enabled (prevents seepage)
this.isDisabledDate = function(date) {
return false;
};
this.inherited(arguments);
this._disableAndPopulate();
},
constructor: function(){
this.inherited(arguments);
this._disableAndPopulate();
},
// Month drop down box
_onMonthSelect: function(){
// Ensure all dates are initially enabled (prevents seepage)
this.isDisabledDate = function(date) {
return false;
};
this.inherited(arguments);
this._disableAndPopulate();
},
// Set disabled dates and re-render calendar
_disableAndPopulate: function(){
var currDate = this.currentFocus;
// Get Lower bound date
var startDate = new Date();
startDate.setFullYear(currDate.getFullYear(), currDate.getMonth(), -5);
// Create ymd dates manually (10x faster than dojo.date.locale.format)
var startMonth = (startDate.getMonth()<9 ? '0' + (startDate.getMonth()+1) : startDate.getMonth()+1);
var startDay = (startDate.getDate()<10 ? '0' + startDate.getDate() : startDate.getDate());
var ymdStartDate = startDate.getFullYear() + '-' + startMonth + '-' + startDay;
// Get Upper bound date
var endDate = new Date();
endDate.setFullYear(currDate.getFullYear(), currDate.getMonth() + 1, 14);
// Create ymd dates manually (10x faster than dojo.date.locale.format)
var endMonth = (endDate.getMonth()<9 ? '0' + (endDate.getMonth()+1) : endDate.getMonth()+1);
var endDay = (endDate.getDate()<10 ? '0' + endDate.getDate() : endDate.getDate());
var ymdEndDate = endDate.getFullYear() + '-' + endMonth + '-' + endDay;
var calendar = this;
// Get IssueDates
var issueDates;
// If an existing xhr request is still running, cancel it before starting a new one
if (this._xhr) {
this._xhr.cancel();
}
this._xhr = dojo.xhrGet({
url: "http://.....", // url of server-side script
content: {
startDate: ymdStartDate, // Earliest possible date displayed on current month
endDate: ymdEndDate, // Last possible date displayed on current month
filters: {} // Any additional criteria which your server-side script uses to determine which dates to return
},
failOk: true, // Prevent error being logged to console when previous XHR calls are cancelled
load: function(data){
issueDates = dojo.fromJson(data);
if (issueDates === undefined) {
// Error with xhr
} else {
calendar.isDisabledDate = function(date) {
var disable = true;
// Create ymdDate manually (10x faster than dojo.date.locale.format)
var month = (date.getMonth()<9 ? '0' + (date.getMonth()+1) : date.getMonth()+1);
var day = (date.getDate()<10 ? '0' + date.getDate() : date.getDate());
var ymdDate = date.getFullYear() + '-' + month + '-' + day;
// Loop through array returned from XHR request, if it contains current date then
// current date should not be disabled
for (key in issueDates) {
if (issueDates[key] == ymdDate) {
disable = false;
break;
}
}
return disable;
};
calendar._populateGrid(); // Refresh calendar display
}
},
// Log any errors to console (except when XHR request is cancelled)
error: function(args) {
if (args.dojoType == 'cancel') {
// Request cancelled
} else {
console.error(args);
}
}
});
},
onClose: function() {
// If an existing xhr request is still running, cancel it before starting a new one
if (this._xhr) {
this._xhr.cancel();
}
}
});
AMD style:
CalendarLite.js.uncompressed.js in dojo 1.7.1 contains the isDisabledDate function:
isDisabledDate: function(/*===== dateObject, locale =====*/){
// summary:
// May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend`
// dateObject: Date
// locale: String?
// tags:
// extension
/*=====
return false; // Boolean
=====*/
},
...
You could re-implement the function using this example:
var myCalendar = declare(Calendar, {
datesToDisable : [],
constructor: function(args) {
this.inherited("constructor", arguments);
this.datesToDisable = args.datesToDisable;
},
isDisabledDate: function(/*Date*/date, /*String?*/locale){
return array.some(this.datesToDisable, function(item) {
return dojo.compare(item, date, "date") === 0;
});
}
});
Then you can use the following constructor and datesToDisable parameter to specify your array.
var someCalendar = new myCalendar({datesToDisable: [new Date(...),....,new Date(....)]},...);
or try this for a fast and dirty solution:
var someCalendar = new Calendar(...);
someCalendar.datesToDisable = [new Date(...),....,new Date(....)];
someCalendar.isDisabledDate = function(/*Date*/date, /*String?*/locale){
return array.some(this.datesToDisable, function(item) {
return date.compare(item, date, "date") === 0;
});
}
But I would recommend the first approach. The assumption is that you know AMD style in order to "import" dijit/Calendar, dojo/_base/array and dojo/date (for "date.compare()" to work).
Cheers!
You can add list of holidays in an array with its timestamp and use indexOf method to find matching dates while populating the calendar in the overriding function of isDisabledDate
var holidays = new Array();
var holidDt = new Date("October 2, 2012");
holidays.push(holidDt.getTime());
Now access the holiday array and check its presence. If present disable, else enable by overriding the isDisabledDate function
isDisabledDate: function(d) {
var dt = new Date(d);
var dayN = dt.getDay();
dt.setHours(0, 0, 0, 0);
/**
* Condition for
* 1. Weekends
* 2. Holidays (holiday array needs to be updated with holiday times)
*/
return ((!((dayN > 0) && (dayN < 6))) || (arrayUtil.indexOf(holidays, dt.getTime()) >= 0));
}
I want to use WebDriver to select a line of text in browser screen(actually in CKEditor editing area) then change its text style from CKEditor toolbar. Any method can do that?
For example, a line with html code like below:
this is a sample line.
I try to use Actions to build a mouse action chain but no success due to not familiar with that. Thanks for any hints or answer.
I'm not sure this is actually possible with WebDriver. What you would want to do is to clickAndHold(...).moveByOffset(...).release(...). Unforunately, WebDriver only allows a WebElement as a parameter to clickAndHold().
My best advice to you is to emulate JavaScript events for this. You can then do something like this in your test:
((JavascriptExecutor) driver).executeScript(...);
I wrote code for emulating mouse events which I use with some of my Selenium tests. Although it doesn't do exactly what you want, hopefully it will be useful (hopefully you can just set the x/y coords and perhaps that will get it working):
var f = function() {
var id = "ext-gen1116";
var top = document.querySelector( '#ext-gen1116:nthchild(0)' );
var bot = document.getElementById( id ).childNodes[3];
var getX = function( obj ) {
if( obj == null ) {
return 0;
} else {
return obj.offsetLeft + getX( obj.offsetParent );
}
}
var getY = function( obj ) {
if( obj == null ) {
return 0;
} else {
return obj.offsetTop + getY( obj.offsetParent );
}
}
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousedown", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
bot.dispatchEvent(evt);
evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousemove", true, true, window,
0, 0, 0, getX( top ) - getX( bot ), getY( top ) - getY( bot ),
false, false, false, false, 0, null);
bot.dispatchEvent(evt);
var mouseup = function( elem ) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseup", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
elem.dispatchEvent(evt);
}
setTimeout( mouseup, 500, bot );
};
f();
If it's possible for you to do what you want with the keyboard instead, this is by far the better solution. You can simply do driver.sendKeys(...). The Keys enum will be priceless for you in this case :-)
You can also try to do it with JavaScript:
let el = document.querySelectorAll("p")[0];
let range = document.createRange();
range.selectNodeContents(el);
window.getSelection().addRange(range);