My test code is the following, it's just an example to understand my question.
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const props = defineProps({
account: Object,
})
const { account } = toRefs(props);
const accountDate = ref("")
const formatDate = (date) => {
var d = new Date(date)
var month = '' + (d.getMonth() + 1)
var day = '' + d.getDate()
var year = d.getFullYear()
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
onMounted(() => {
accountDate.value = formatDate(account.value.date)
console.log(account.value.date)
})
</script>
<template>
<input type="text" v-model="accountDate"></input>
</template>
So the "formatDate" function just transforms Date format to YYYY-MM-DD, it's not important in my question. So I v-model accountDate with the new Date format but the console.log shown just print "undefined". So props are not defined yet in onMounted lifecycle.
How can I do it?
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"));
I am calculating the some values based on data available for previous month and displaying in table format in view. I have another model where I need to pass these values and save in database. I am not inputting any value, either values are static or calculated. Values are not passed from view to controller.
I have tried the jquery/ajax but not successful.
//Controller//
[HttpPost]
public JsonResult Proccess(List<ServerCount> deviceCounts)
{
if(deviceCounts == null)
{
deviceCounts = new List<ServerCount>();
}
var startOfTthisMonth = new DateTime(DateTime.Today.Year,
DateTime.Today.Month, 1);
var FromDate = startOfTthisMonth.AddMonths(-1);
var ToDate = startOfTthisMonth.AddDays(-1);
var billMonth = startOfTthisMonth.AddMonths(-1).ToString("MMM") + "-" + startOfTthisMonth.AddMonths(-1).ToString("yyyy");
ServerCount model = new ServerCount();
foreach (ServerCount sc in deviceCounts)
{
model.BillingMonth = billMonth;
model.ServiceName = sc.ServiceName;
model.BaslineVol = sc.BaslineVol;
model.ResourceUnit = sc.ResourceUnit;
model.DeviceCount = sc.DeviceCount;
model.DeployedServer = sc.DeployedServer;
model.RetiredServer = sc.RetiredServer;
_context.ServerCount.Add(model);
}
int insertRecords = _context.SaveChanges();
return Json(insertRecords);
}
==================
Jquery
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "#btnSave", function () {
var deviceCounts = new Array();
$("#tblServerCount TBODY TR").each(function () {
var row = $(this);
var deviceCount = {};
deviceCount.ServiceName = row.find("TD").eq(0).html();
deviceCount.BaslineVol = row.find("TD").eq(1).html();
deviceCount.ResourceUnit = row.find("TD").eq(2).html();
deviceCount.DeviceCount = row.find("TD").eq(3).html();
deviceCount.DeployedServer = row.find("TD").eq(4).html();
deviceCount.RetiredServer = row.find("TD").eq(5).html();
deviceCounts.push(deviceCount);
});
var model = $("#MyForm").serialize();
$.ajax({
type: "POST",
url: '#Url.Action("Proccess", "DeviceCountServers", new { Area = "Admin" })?' +model,
data: JSON.stringify(deviceCounts),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
location.reload();
});
});
});
</script>
I looking that data from table is saved to sql on click of button
how do I get a list of data from API according to start date and end date in react-native?
componentDidMount = async() => {
var token = await AsyncStorage.getItem('accessToken')
var response = await this.props.listData({'startDate':,'endDate':},accessToken)
if(!response.error){
this.setState({})
}
}
componentDidMount = async() => {
start = 0;
var today = new Date();
today.setHours(0,0,0,0);
var day = today.getDay() - start;
var date = today.getDate() - day;
var Start = new Date(today.setDate(date));
var End= new Date(today.setDate(date + 6));
var StartDate = new Date(Start);
var EndDate = new Date(End);
var startingDate = StartDate.getDate()+"-"+(new Date(Start).getMonth()+1)+"-
"+ new Date(Start).getFullYear();
var endingDate = EndDate.getDate()+"-"+(new Date(End).getMonth()+1)+"-"+ new
Date(End).getFullYear();
var token = await AsyncStorage.getItem('accesToken')
var response await = this.props.posthistory({'startDate':startingDate,'endDate':endingDate,'page':'1'},accesstoken)
if(!response.error){
this.setState({response})
}
}
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));
}