flatpickr - Uncaught ReferenceError: exports is not defined - javascript

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",
],
},
}
});

Related

Javascript conditional within function datecalendar

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.

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'));

Categories

Resources