Is it possible to disable all specified weekdays in XDSoft DateTimePicker, for example all (and only) Sundays? How to do that?
try this.
function disabledWeekdays(date) {
var day = date.getDay();
//0 is Sunday, 1 is Monday, 2 is Tuesday , 3 is Wednesday, 4 is Thursday, 5 is Friday and 6 is Saturday
if (day == 1 || day == 2 ||day == 3 ||day == 4 ||day == 5 ||day == 6) {
return [false] ;
} else {
return [true] ;
}
}
$('#datetimepicker').datetimepicker({
beforeShowDay: disabledWeekdays
});
Create a if statement same as 'xdsoft_weekend' in the jquery.datetimepicker.js file as below.
if (start.getDay() === 0 || start.getDay() === 6 || options.weekends.indexOf(start.dateFormat(options.formatDate)) !== -1) {
classes.push('xdsoft_weekend');
}
if (start.getDay() === 0 || options.weekends.indexOf(start.dateFormat(options.formatDate)) !== -1) {
classes.push('xdsoft_sunday');
}
Then, create a jQuery as follow.
$('#datetimepicker').datetimepicker({
onGenerate:function( ct ) {
jQuery(this).find('.xdsoft_date.xdsoft_sunday')
.addClass('xdsoft_disabled');
},
timepicker: false
});
Very easy:
onGenerate:function( hu ) {
jQuery(this).find('.xdsoft_date.xdsoft_day_of_week0').addClass('xdsoft_disabled');
},
Related
I have the following function that is formating font colour based on the value returned. The value returned is from a GraphQl non-nullable field and is in a range from 0-10. It works perfectly if the value is 1-10, if the value is zero it does not run as expected.
formatFont: function (state) {
if (state) {
if (state >= 0 && state <= 6) {
return 'red--text';
} else if (state >= 7 && state <= 8) {
return 'orange--text';
} else if (state >= 9 && state <= 10) {
return 'green--text';
} else {
return 'white-text' // i.e. white on white = invisible
}
} else {
console.log('Output else')
return 'white--text' // i.e. white on white = invisible
}
}
If the value is zero it will return the else statement, I have a solution to increment each value by 1 which resolves but it feels like a hack, I want to understand why it doesn't recognise zero?
change
if (state) {
to
if (typeof state !== 'undefined') {
why because 0 is falsey
var a= 0
var b= '0'
var c= 1
if(a) {
console.info('a',a)
}
if(b){
console.info('b',b)
}
if(c){
console.info('c',c)
}
Because of the 0 as a false consider but you pass as a string then it will go the true.
How to calculate age of users when they are entered their date of birth in react-native?
I want to check user is more then 18 year or not.When they are entered date of birth .
I am using react-native-datepicker for take user's date of birth.
I am trying to calculate age of user using below code but it not work properly .So please help me .How i can achieve this functionality.
calculate_age = (date) => {
var today = new Date();
var birthDate = new Date(date);
console.log("get bod-->",birthDate) // create a date object directly from `dob1` argument
var age_now = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age_now--;
}
console.log('my age', age_now);
return age_now;
}
onDateChange = (date) => {
this.setState({ date: date }, () => {
console.log(date)
if (this.calculate_age(date) < 18) {
alert("You Are Not Eligable")
} else {
}
})
}
Using 'npm i moment' package.I solved this problem.
onDateChange = (date) => {
this.setState({ date: date }, () => {
if (this.calculate_age(Moment(date,"DD-MM-YYYY").format("YYYY-MM-DD")) <= 17 ) {
this.setState({errmsg:"You must be atleast 18 years of old to join."})
}else{
this.setState({errmsg:" "})
}
})
}
You can make a custom function like this:
const getAge = (dateString)=>{
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}
console.log('age: ' + getAge("1980/08/10"));
Within my app I'm trying to develop the ability to filter my returned array of offers if they fall within a set of dates set using a datepicker.
My datepicker emits the values to two properties within a range object - this is filters.range.startDate & filters.range.endDate. Each offer in my array has the properties, offer.dates.start & offer.dates.end.
I've added the below statement in my computed property which doesn't break the computed, just returns no results regardless of dates.
Does anyone have any advice?
EDIT- Added the entire computed property with the date range statement as the last condition.
computed: {
filteredOffers() {
let filtered = this.offers.filter(offer => {
return (offer.island === this.filters.islandFilter || this.filters.islandFilter === 'All') // Island
&& (offer.starrating === this.filters.starRating || this.filters.starRating === 'All') // Star Rating
&& (offer.board === this.filters.boardBasis || this.filters.boardBasis === 'All') // Board Basis
&& (offer.duration === this.filters.duration || this.filters.duration === 'All') // Duration
&& (offer.price.from < this.filters.price) // Price
&& (this.filters.travelby === 'sea' && offer.travel.air === false || this.filters.travelby === 'All') // Sea or Air
&& (this.filters.range.startDate >= offer.dates.start && offer.dates.end <= this.filters.range.endDate) // DATE RANGE!!
});
if (this.sortby === 'ascending') {
return filtered.sort((a, b) => {
return a.price.from - b.price.from;
})
} else {
return filtered.sort((a, b) => {
return b.price.from - a.price.from;
})
}
}
}
First, I would transform your date objects to timestamp in milliseconds, just avoid some format errors when you compare.
let date = new Date();
let timestamp = date.getTime();
After that, I guess your logic is not correct, because your end date on filter should be greater than your offer end date, and your start date on filter should be smaller than your offer start date.
this.filters.range.startDate <= offer.dates.start && this.filters.range.endDate >= offer.dates.end
I want to create a checkout form which includes expiry date TextInput. It will look like a this (MM/YY). After adding first 2 digits it will automatically add / then the person can type last 2 digits for the year. I found this code on the other question. But it doesn't work. When you type inside the form nothing is typed. Here is the code. How can I make this code work as needed?
constructor() {
super()
this.state = {
isReady: false
}
}
componentDidMount() {
this.setState({
isReady: true
})
}
onChange(text) {
let newText = '';
let numbers = '0123456789';
for (var i = 0; i < text.length; i++) {
if ( numbers.indexOf(text[i]) > -1 ) {
newText = newText + text[i];
}
}
this.setState({myNumber: newText})
}
formatFunction(cardExpiry = ""){
//expiryDate will be in the format MMYY, so don't make it smart just format according to these requirements, if the input has less than 2 character return it otherwise append `/` character between 2nd and 3rd letter of the input.
if(cardExpiry.length < 2){
return cardExpiry;
}
else{
return cardExpiry.substr(0, 2) + "/" + (cardExpiry.substr(2) || "")
}
}
inputToValue(inputText){
//if the input has more than 5 characters don't set the state
if(inputText.length < 6){
const tokens = inputText.split("/");
// don't set the state if there is more than one "/" character in the given input
if(tokens.length < 3){
const month = Number(tokens[1]);
const year = Number(tokens[2]);
//don't set the state if the first two letter is not a valid month
if(month >= 1 && month <= 12){
let cardExpiry = month + "";
//I used lodash for padding the month and year with zero
if(month > 1 || tokens.length === 2){
// user entered 2 for the month so pad it automatically or entered "1/" convert it to 01 automatically
cardExpiry = _.padStart(month, 2, "0");
}
//disregard changes for invalid years
if(year > 1 && year <= 99){
cardExpiry += year;
}
this.setState({cardExpiry});
}
}
}
}
render (){
let {cardExpiry} = this.state;
return (
<Image style={styles.image} source={require('../img/cover.jpg')}
>
<Content style={styles.content}>
<Form>
<Item >
<Icon active name='card'/>
<Input keyboardType='numeric' maxLength={16} placeholder='Card Number'
onChangeText = {(text)=> this.onChange(text)}
value = {this.state.myNumber}/>
</Item>
<Grid>
<Row>
<Col>
<Item style={{ marginBottom:10}}>
<Icon active name='calendar' />
<Input keyboardType='numeric' placeholder='MM/YY'
value = {this.formatFunction(cardExpiry)}
onChangeText={this.inputToValue.bind(this)}/>
</Item>
</Col>
<Col>
<Item style={{ marginBottom:10}}>
<Icon active name='lock' />
<Input maxLength={3} secureTextEntry={true} placeholder='CVV'/>
</Item>
</Col>
</Row>
</Grid>
Use this code to handle your problem:
constructor(props) {
super(props);
this.state = { text: '' };
}
handleChange = (text) => {
let textTemp = text;
if (textTemp[0] !== '1' && textTemp[0] !== '0') {
textTemp = '';
}
if (textTemp.length === 2) {
if (parseInt(textTemp.substring(0, 2)) > 12 || parseInt(textTemp.substring(0, 2)) == 0) {
textTemp = textTemp[0];
} else if (this.state.text.length === 2) {
textTemp += '/';
} else {
textTemp = textTemp[0];
}
}
this.setState({text: textTemp})
}
render() {
return (
<TextInput
keyboardType={'numeric'}
onChangeText={this.handleChange}
value={this.state.text}
maxLength={5}
/>
);
}
After searching a lot for Picker with Month/Year, for the time being i have created a logic for the Expiry date.
Hope this will help somebody.
const onCardExpiryDateChange = (prevValue:string, currentValue: string) => {
if (currentValue?.includes(',') || currentValue?.includes('-') || currentValue?.includes('.')) {
return prevValue
} else {
let textTemp = currentValue
if (textTemp[0] !== '0' && textTemp[0] !== '1' && textTemp[0] !== '2' && textTemp[0] !== '3') {
textTemp = '';
} else if ((prevValue?.length === 5) && currentValue.length === prevValue.length-1) {
textTemp = textTemp?.slice(0, -3)
} else if (textTemp.length === 6 && (textTemp[5] == '0' || textTemp[5] == '1')){
textTemp = textTemp?.slice(0, -1)
}
else if (textTemp.length === 7 && textTemp[6] == '0') {
textTemp = textTemp?.slice(0, -1)
} else if (textTemp.length === 2) {
if (parseInt(textTemp?.substring(0, 2)) > 12 || parseInt(textTemp?.substring(0, 2)) == 0) {
textTemp = textTemp?.slice(0, -1)
} else if (textTemp?.length === 2) {
textTemp += ' / ';
} else {
textTemp = textTemp[0];
}
}
return textTemp
}
}
As #AndroConsis pointed out in #Vahid Boreiri's answer, the only problem with adding '/' after length 2 is when deleting the expiry date it keeps adding '/'. To fix this, one can add a conditional backspaceFlag.
const [backspaceFlag, setBackspaceFlag] = React.useState(false);
const [expiratoinDate, setExpirationDate] = React.useState('');
const handleExpirationDate = (text) => {
let textTemp = text;
if (textTemp[0] !== '1' && textTemp[0] !== '0') {
textTemp = '';
}
if (textTemp.length === 2) {
if (parseInt(textTemp.substring(0, 2)) > 12 || parseInt(textTemp.substring(0, 2)) == 0) {
textTemp = textTemp[0];
} else if (text.length === 2 && !backspaceFlag) {
textTemp += '/';
setBackspaceFlag(true);
} else if (text.length === 2 && backspaceFlag) {
textTemp = textTemp[0];
setBackspaceFlag(false);
} else {
textTemp = textTemp[0];
}
}
setExpirationDate(textTemp);
};
const [expiratoinDate, setExpirationDate] = useState(''); const [backspaceFlag, setBackspaceFlag] = useState(false);
const handleExpirationDate = (text) => {
if(backspaceFlag===false){
if(text.length==2){ setExpirationDate(text+"/"); setBackspaceFlag(true) }
`else{
setExpirationDate(text)
}`
}
else{
if(text.length==2){
let text2=expiratoinDate.slice(0,1)
`setExpirationDate(text2);`
`setBackspaceFlag(false)
}`
`else{
setExpirationDate(text)
}`
}
`};`
Adding an answer that resolves not being able to delete the '/' in above solution.
const setExpiry = (e) => {
const { name, value } = e.target;
var v = value;
if (v.includes('/') == false) {
if (v.length === 4) {
var a = v.substr(0, 2);
var ae = v.charAt(v.length - 2) + v.charAt(v.length - 1);
e.target.value = a + '/' + ae;
}
}
}
I am simply using a #Html.TextBoxFor(m => m.PhoneNumber, new { id = "phoneNo")
I am using a regex to limit it to 10 numbers only.
Is there a way I can format the textbox to appear like (555) 444-3333 while they type, but in the model it will simply be passing the 10 numbers, like 5554443333? I meant to automatically create those brackets and - while also checking using regex if they entered 10 numbers?
You can do it with jquery as Matt said at his comment, stated at this question of the site:
Phone mask with jQuery and Masked Input Plugin
Or with plain javascript, as explained by xxx here with alternatives too:
Mask US phone number string with JavaScript
List of alternatives coded for a example input called "phone":
Example code with plain javaScript:
document.getElementById('phone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});
Example code with jQuery but without adding any new dependence():
$('#phone', '#example-form')
.keydown(function (e) {
var key = e.which || e.charCode || e.keyCode || 0;
$phone = $(this);
// Don't let them remove the starting '('
if ($phone.val().length === 1 && (key === 8 || key === 46)) {
$phone.val('(');
return false;
}
// Reset if they highlight and type over first char.
else if ($phone.val().charAt(0) !== '(') {
$phone.val('('+$phone.val());
}
// Auto-format- do not expose the mask as the user begins to type
if (key !== 8 && key !== 9) {
if ($phone.val().length === 4) {
$phone.val($phone.val() + ')');
}
if ($phone.val().length === 5) {
$phone.val($phone.val() + ' ');
}
if ($phone.val().length === 9) {
$phone.val($phone.val() + '-');
}
}
// Allow numeric (and tab, backspace, delete) keys only
return (key == 8 ||
key == 9 ||
key == 46 ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
.bind('focus click', function () {
$phone = $(this);
if ($phone.val().length === 0) {
$phone.val('(');
}
else {
var val = $phone.val();
$phone.val('').val(val); // Ensure cursor remains at the end
}
})
.blur(function () {
$phone = $(this);
if ($phone.val() === '(') {
$phone.val('');
}
});
Example code with jQuery using Masked Input Plugin:
$("#phone").mask("(99) 9999?9-9999");
$("#phone").on("blur", function() {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
if( last.length == 3 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
var lastfour = move + last;
var first = $(this).val().substr( 0, 9 );
$(this).val( first + '-' + lastfour );
}
});