Javascript conditional within function datecalendar - javascript

Morning!
I have this question:
This function:
calendar_arrival.datepicker({
beforeShow: function () {
$('#ui-datepicker-div').removeClass('departure').addClass('arrival');
},
minDate: mindate,
dateFormat: format,
closeText: "Close",
currentText: "",
firstDay: 0,
nextText: " >>",
prevText: "<< ",
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthNamesShort: monthNamesShortArray,
dayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
dayNamesMin: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
isRTL: false,
onClose: function () {
var minDate = calendar_arrival.datepicker('getDate');
if (minDate) {
minDate.setDate(minDate.getDate() + 2);
};
calendar_departure.datepicker('option', 'minDate', minDate || 1).on('focus', function () {
$(this).trigger('blur');
}); // Date + 1 or tomorrow by default
if (convertDates) {
populateCalendar(calendar_arrival);
populateCalendar(calendar_departure);
}
}
Has 3 parameters that I would like to change depending the language:
monthNames
dayNames
dayNamesShort
dayNamesMin
I'm trying to use a conditional for example:
if ($('html').hasClass('smrt-es')) {
var monthNames = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
}
else if ($('html').hasClass('smrt-en')) {
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
}
But not works... gives and error in the console.
I'm wondering if any of you has a quick solution.
Thanks so much!
Rob


You can try declaring the monthNames as default outside of the conditional, and then update its value based on the language:
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
if ($('html').hasClass('smrt-es')) {
monthNames = ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"];
}
calendar_arrival.datepicker({
// ...
monthNames: monthNames,
// ...
});
Do the same for the other parameters dayNames, dayNamesShort, and dayNamesMin.

Related

build object from another object that compares its keys to values in an array

The following object is used as a starting point to populate options of a select box in the UI of an app:
const months = {
"1": "Jan",
"2": "Feb",
"3": "Mar",
"4": "Apr",
"5": "May",
"6": "Jun",
"7": "Jul",
"8": "Aug",
"9": "Sep",
"10": "Oct",
"11": "Nov",
"12": "Dec"
}
The options for the select box must be limited though based on the contents of another array. Here is an example of that array:
const existingMonths = [
1,
2,
3,
4,
5,
6,
7,
8,
12
];
So in this example, the object of final options for the select box should be:
const availableMonths = {
"9": "Sep",
"10": "Oct",
"11": "Nov"
}
I'm having difficulty figuring out how to build the availableMonths object. This does not give the desired output:
const availableMonths = Object.entries(months).filter(k => !existingMonths.includes(k));

You need to take the key from the array of entries and check with the numerical value of the key against the value of the array. Finally create a new object from the entries.
const
months = { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
existingMonths = [ 1, 2, 3, 4, 5, 6, 7, 8, 12],
availableMonths = Object.fromEntries(Object
.entries(months)
.filter(([k]) => !existingMonths.includes(+k))
);
console.log(availableMonths);

const months = {
"1": "Jan",
"2": "Feb",
"3": "Mar",
"4": "Apr",
"5": "May",
"6": "Jun",
"7": "Jul",
"8": "Aug",
"9": "Sep",
"10": "Oct",
"11": "Nov",
"12": "Dec"
}
const existingMonths = [1, 2, 3, 4, 5, 6, 7, 8, 12]
const availableMonths = Object.fromEntries(
Object.entries(months).filter(([k, v]) => !existingMonths.includes(+k))
)
console.log(availableMonths)

Step 1: Shallow Copy months object
Step 2: Loop throught existingMonths
Step 3: Delete shallow copied properties by comparing with existingMonths
elements
let
months = { 1: "Jan", 2: "Feb", 3: "Mar", 4: "Apr", 5: "May", 6: "Jun", 7: "Jul", 8: "Aug", 9: "Sep", 10: "Oct", 11: "Nov", 12: "Dec" },
existingMonths = [ 1, 2, 3, 4, 5, 6, 7, 8, 12],availableMonths = {}
Object.assign(availableMonths,months);
existingMonths.forEach((monthNumber) =>{delete availableMonths[monthNumber]})
console.log(availableMonths);

How can I do to change the language of a datepicker?

I would like to change the language of a datepicker. Here is my code :
$("#datepicker-month").datepicker({
locale: 'fr',
dateFormat: 'mm-yy',
format: 'yyyy-mm',
viewMode: "months",
minViewMode: "months",
autoclose: true,
language: "fr",
regional: "fr",
});
But unfortunately I get this :
datepicker
Could you help me please ?

Rename all names in your local language.
$(document).ready(function(){
$.fn.datepicker.dates['fr'] = {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today",
clear: "Clear",
format: "mm/dd/yyyy",
titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
weekStart: 0
};
$("#datepicker-month").datepicker( {
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months",
language: "fr"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<input type="text" id="datepicker-month" />

Try this
$('#datepicker').datepicker( $.datepicker.regional[ "fr" ] );

How could I parse JavaScript Object from .js file in Python?

I want to get JS object from .js file in Python.
there have my Javascripot file example.
this is .js file.
// License: GNU General Public License v3. See license.txt
frappe.query_reports["Employee Birthday"] = {
"filters": [
{
"fieldname":"month",
"label": __("Month"),
"fieldtype": "Select",
"options": "Jan\nFeb\nMar\nApr\nMay\nJun\nJul\nAug\nSep\nOct\nNov\nDec",
"default": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
"Dec"][frappe.datetime.str_to_obj(frappe.datetime.get_today()).getMonth()],
},
{
"fieldname":"company",
"label": __("Company"),
"fieldtype": "Link",
"options": "Company",
"default": frappe.defaults.get_user_default("Company")
}
]
}
I need this one in Python .py file
that's my goal that's I wanted.
filters = [
{
"fieldname":"month",
"label": __("Month"),
"fieldtype": "Select",
"options": "Jan\nFeb\nMar\nApr\nMay\nJun\nJul\nAug\nSep\nOct\nNov\nDec",
"default": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",
"Dec"][frappe.datetime.str_to_obj(frappe.datetime.get_today()).getMonth()],
},
{
"fieldname":"company",
"label": __("Company"),
"fieldtype": "Link",
"options": "Company",
"default": frappe.defaults.get_user_default("Company")
}
]

Is it possible to manipulate Ant Design Range Picker data before send it?

I have the following form using Ant Design Range Picker component:
<Form layout='inline' onSubmit={(e) => this.handleSubmit(e)}>
<Form.Item>
<RangePicker name='rangeDate' />
</Form.Item>
<Form.Item>
<Input name='channel' placeholder='Type a channel' />
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit' >
{this.props.buttonLabel}
</Button>
</Form.Item>
</Form>
When the form is submitted, the answer I'm getting is this:
{
"channel": "Testing",
"rangeDate": [
{
"_isAMomentObject": true,
"_isUTC": false,
"_pf": {
"empty": false,
"unusedTokens": [],
"unusedInput": [],
"overflow": -2,
"charsLeftOver": 0,
"nullInput": false,
"invalidMonth": null,
"invalidFormat": false,
"userInvalidated": false,
"iso": false,
"parsedDateParts": [],
"meridiem": null,
"rfc2822": false,
"weekdayMismatch": false
},
"_locale": {
"_calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"_longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"_invalidDate": "Invalid date",
"_dayOfMonthOrdinalParse": {},
"_relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"_months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"_monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"_week": {
"dow": 0,
"doy": 6
},
"_weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"_weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"_weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"_meridiemParse": {},
"_abbr": "en",
"_config": {
"calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"invalidDate": "Invalid date",
"dayOfMonthOrdinalParse": {},
"relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"week": {
"dow": 0,
"doy": 6
},
"weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"meridiemParse": {},
"abbr": "en"
},
"_dayOfMonthOrdinalParseLenient": {}
},
"_d": "2018-08-06T15:20:10.948Z",
"_isValid": true
},
{
"_isAMomentObject": true,
"_isUTC": false,
"_pf": {
"empty": false,
"unusedTokens": [],
"unusedInput": [],
"overflow": -2,
"charsLeftOver": 0,
"nullInput": false,
"invalidMonth": null,
"invalidFormat": false,
"userInvalidated": false,
"iso": false,
"parsedDateParts": [],
"meridiem": null,
"rfc2822": false,
"weekdayMismatch": false
},
"_locale": {
"_calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"_longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"_invalidDate": "Invalid date",
"_dayOfMonthOrdinalParse": {},
"_relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"_months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"_monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"_week": {
"dow": 0,
"doy": 6
},
"_weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"_weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"_weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"_meridiemParse": {},
"_abbr": "en",
"_config": {
"calendar": {
"sameDay": "[Today at] LT",
"nextDay": "[Tomorrow at] LT",
"nextWeek": "dddd [at] LT",
"lastDay": "[Yesterday at] LT",
"lastWeek": "[Last] dddd [at] LT",
"sameElse": "L"
},
"longDateFormat": {
"LTS": "h:mm:ss A",
"LT": "h:mm A",
"L": "MM/DD/YYYY",
"LL": "MMMM D, YYYY",
"LLL": "MMMM D, YYYY h:mm A",
"LLLL": "dddd, MMMM D, YYYY h:mm A"
},
"invalidDate": "Invalid date",
"dayOfMonthOrdinalParse": {},
"relativeTime": {
"future": "in %s",
"past": "%s ago",
"s": "a few seconds",
"ss": "%d seconds",
"m": "a minute",
"mm": "%d minutes",
"h": "an hour",
"hh": "%d hours",
"d": "a day",
"dd": "%d days",
"M": "a month",
"MM": "%d months",
"y": "a year",
"yy": "%d years"
},
"months": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"monthsShort": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"week": {
"dow": 0,
"doy": 6
},
"weekdays": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"weekdaysMin": [
"Su",
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa"
],
"weekdaysShort": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"meridiemParse": {},
"abbr": "en"
},
"_dayOfMonthOrdinalParseLenient": {}
},
"_d": "2018-08-23T15:20:10.948Z",
"_isValid": true
}
]
}
So, how can I manipulate this result to change it the way I need?
I would like to be able to convert this result into something like this:
{
"channel": "Testing",
"rangeDate": ["2018-01-01", "2018-01-10"]
}
I'm creating my forms dynamically because the application will have several forms. My example config to create a form:
const fields = [
{
name: 'rangeDate',
errorMessage: 'Please fill the dates',
required: true,
field: <RangePicker format='YYYY-MM-DD' onChange={ (date, dateString) => console.log(date, dateString) } />
},
{
name: 'channel',
errorMessage: 'Please fill the channel',
required: true,
field: <Input placeholder='Channel' />
}
];
And with the fields variable above, I can create my form using just a for to iterate:
getFields () {
const formItems = [],
{ getFieldDecorator } = this.props.form;
for(let i = 0; i < fields.length; i++) {
const formItem = fields[i];
formItems.push(
<FormItem key={i}>
{
getFieldDecorator(formItem.name, {
rules: [{
required: formItem.required,
message: formItem.errorMessage
}]
})(
formItem.field
)
}
</FormItem>
);
}
return formItems;
}
Thanks!

You need to format your rangedate before submit, Hope this sample of code solves your problem.
I have replicated exactly your code, Just check logic inside handle submit function and make those changes to your code accordingly.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, DatePicker, TimePicker, Button, Input } from 'antd';
const FormItem = Form.Item;
const MonthPicker = DatePicker.MonthPicker;
const RangePicker = DatePicker.RangePicker;
class TimeRelatedForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, fieldsValue) => {
if (err) {
return;
}
// Should format date value before submit.
const rangeValue = fieldsValue['rangeDate'];
const values = {
...fieldsValue,
'rangeDate': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
};
console.log('Received values of form: ', values);
});
}
getFields() {
const fields = [
{
name: 'rangeDate',
errorMessage: 'Please fill the dates',
required: true,
field: <RangePicker format='YYYY-MM-DD' onChange={(date, dateString) => console.log(date, dateString)} />
},
{
name: 'channel',
errorMessage: 'Please fill the channel',
required: true,
field: <Input placeholder='Channel' />
}
];
const formItems = [],
{ getFieldDecorator } = this.props.form;
for (let i = 0; i < fields.length; i++) {
const formItem = fields[i];
formItems.push(
<FormItem key={i}>
{
getFieldDecorator(formItem.name, {
rules: [{
required: formItem.required,
message: formItem.errorMessage
}]
})(
formItem.field
)
}
</FormItem>
);
}
return formItems;
}
render() {
return (
<div>
<Form onSubmit={this.handleSubmit}>
{this.getFields()}
<FormItem
wrapperCol={{
xs: { span: 24, offset: 0 },
sm: { span: 16, offset: 8 },
}}
>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form>
</div>
);
}
}
const WrappedTimeRelatedForm = Form.create()(TimeRelatedForm);
ReactDOM.render(<WrappedTimeRelatedForm />, document.getElementById('container'));

flatpickr - Uncaught ReferenceError: exports is not defined

I´m trying to use locale for the plugin: flatpickr
Console says:
Uncaught ReferenceError: exports is not defined
This is my code:
HTML
<input type='text' class="form-control dateTime" name="startDateTime" placeholder="Start.."/>
JS
//DateTime
$('.dateTime').flatpickr({
'locale': 'sv',
mode: 'multiple',
defaultHour: '22',
enableTime: 'true',
time_24hr: 'true',
});
sv.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var fp = (typeof window !== "undefined" && window.flatpickr !== undefined) ? window.flatpickr : {
l10ns: {},
};
exports.Swedish = {
firstDayOfWeek: 1,
weekAbbreviation: "v",
weekdays: {
shorthand: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
longhand: [
"Söndag",
"Måndag",
"Tisdag",
"Onsdag",
"Torsdag",
"Fredag",
"Lördag",
],
},
months: {
shorthand: [
"Jan",
"Feb",
"Mar",
"Apr",
"Maj",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec",
],
longhand: [
"Januari",
"Februari",
"Mars",
"April",
"Maj",
"Juni",
"Juli",
"Augusti",
"September",
"Oktober",
"November",
"December",
],
},
ordinal: function () {
return ".";
},
};
fp.l10ns.sv = exports.Swedish;
exports.default = fp.l10ns;
What might be the problem?
I´ve tried to change order and load the locale file before the js.br>
I have also tried to skip the file sv.js and import this code into my main js.
firstDayOfWeek: 1,
weekAbbreviation: "v",
weekdays: {
shorthand: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
longhand: [
"Söndag",
"Måndag",
"Tisdag",
"Onsdag",
"Torsdag",
"Fredag",
"Lördag",
],
},
months: {
shorthand: [
"Jan",
"Feb",
"Mar",
"Apr",
"Maj",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec",
],
longhand: [
"Januari",
"Februari",
"Mars",
"April",
"Maj",
"Juni",
"Juli",
"Augusti",
"September",
"Oktober",
"November",
"December",
],
},

My solution: Skip the sv.js file and add locale{} in main js.
//DateTime
$('.dateTime').flatpickr({
mode: 'multiple',
defaultHour: '22',
enableTime: 'true',
time_24hr: 'true',
locale: {
firstDayOfWeek: 1,
weekAbbreviation: "v",
weekdays: {
shorthand: ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
longhand: [
"Söndag",
"Måndag",
"Tisdag",
"Onsdag",
"Torsdag",
"Fredag",
"Lördag",
],
},
months: {
shorthand: [
"Jan",
"Feb",
"Mar",
"Apr",
"Maj",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dec",
],
longhand: [
"Januari",
"Februari",
"Mars",
"April",
"Maj",
"Juni",
"Juli",
"Augusti",
"September",
"Oktober",
"November",
"December",
],
},
}
});

Categories

Resources