How to change language on bootstrap 4 datepicker - javascript

I've been stuck on changing the language of a calendar from English which is the default to French on Bootstrap 4 and I can't do it, it's driving me mad!
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrapdatepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script src="./js/main.js"></script>
<script>
$(document).ready(function() {
var date_input = $('input[name="date"]');
var container = $('.input-group').length > 0 ? $('.input-group').parent() :
'body';
var options = {
format: 'dd/mm/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
daysOfWeekDisabled: [0, 6],
weekStart: [1]
};
date_input.datepicker(options);
});
</script>
Thanks

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
Use this tag after bootstrap-datepicker. and this
$('.datepicker').datepicker({
language: 'fr'})
It will work.

It's because you haven't passed the language key to options.
Try adding this keys as options:
var options = {
language: 'fr'
};
All locales are available under js/locales. Be sure to include it after plugin initialization.
References:
1- https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
2- https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#language
3- Change language for bootstrap DateTimePicker

You can use translation i18n of lang and call it, theres no needed to call language specific. Like this.
this.$i18n.t("fixed_pickups.weekdays.monday") }

Related

How to pass a variable to full calendar event?

this is my code
$(document).ready(function() {
var dates = "{title : 'event1',start : '2018-07-10'},{title : 'event2',start : '2010-07-18'}";
dates = JSON.parse(dates);
alert(dates);
$('#calendar').fullCalendar({
height: 450,
defaultView: 'month',
events: dates
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>
I need to pass the dates variable to the full calendar event. Please help
Your JSON is invalid, as it's just a list of objects with no link between them. You can use https://jsonlint.com/ to validate your JSON strings. This is causing you to get an error when you try and parse it because you can't change a series of objects into a single variable. Your field names and values also need to be double-quoted, so you need to wrap your string in single-quotes. Besides that fullCalendar requires an array of events, and this is a valid thing to parse into a variable.
Try this:
$(document).ready(function() {
var dates = '[{"title": "event1", "start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}]';
dates = JSON.parse(dates);
$('#calendar').fullCalendar({
height: 450,
defaultView: 'month',
events: dates
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>
Alternatively, you could build a JavaScript object directly, if you're using JavaScript to generate the event data:
$(document).ready(function() {
var dates = [{"title": "event1", "start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}];
$('#calendar').fullCalendar({
height: 450,
defaultView: 'month',
events: dates
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<div id="calendar"></div>
You need to pass event data as an array. At the moment, you're passing an object. Instead of writing your dates in a string, just write the array manually into the events property of the constructor as follows:
$(function() {
$('#calendar').fullCalendar({
height: 450,
defaultView: 'month',
events: [
{
title: 'event1',
start: '2018-07-10'
},
{
title: 'event2',
start: '2010-07-18'
}
]
});
});
You can read more about adding events in the FullCalendar docs.
Alternatively, if you have to use the JSON.parse(), simply wrap the string in square brackets:
var dates = JSON.parse('[{"title": "event1","start": "2018-07-10"},{"title": "event2","start": "2010-07-18"}]');

bootstrap datepicker set default date not working

I am using bootstrap datepicker.I want to show 01-01-1960 as selected date in my calendar when it is loaded first time.
javascript
<script src="~/Content/js/datepicker/bootstrap-datepicker.js"></script>
<link href="~/Content/js/datepicker/datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker-input').datepicker({
defaultViewDate: { year: 1960, month: 01, day: 01 },
format: 'mm-dd-yyyy',
});
});
I am using this theme - http://flatfull.com/themes/scale/form-elements.html.
You can set default date like :
<script src="~/Content/js/datepicker/bootstrap-datepicker.js"></script>
<link href="~/Content/js/datepicker/datepicker.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker-input').datepicker({
'setDate', new Date(1960, 01, 01 ),
'format': 'mm-dd-yyyy',
});
});
</script>
Try with this.
<script type="text/javascript">
$(document).ready(function () {
$('.datepicker-input').datepicker({
dateFormat: 'yy-mm-dd'
});
$('.datepicker-input').datepicker('setDate', new Date(1960,00,01));
$('.datepicker-input').val('');
});
</script>
It Works for me.
$('.datepicker-input').datepicker({
useCurrent: false,
setDate: new Date(1960, 01, 01),
});
Set useCurrent to false, then setDate would work.
To fix the following error:
error-Uncaught TypeError: data[option] is not a function
You should use the option setValue instead of setDate!
$(".datepicker-input").datepicker("setValue", new Date());
I found the simple solution for setting default value on this problem.
According to the research from google, you cannot simple add 'default date' option here but you can set 'setDate' option. Thus, For example...
<div class="fullDate input-group date" id="atdcRegReqDtDiv">
<input type="text" class="form-control inputstl" id="REQ_DT">
<span class="input-group-addon"><i class="dtPick glyphicon glyphicon-calendar"></i></span>
</div>
Add the setDate option, to the object, and then put empty value to the text input.
$('#atdcRegReqDtDiv').datepicker('setDate', "2018-09-14");
$('#REQ_DT').val("");
Then, you can see the empty input box with the calendar has default Year/Month.
Good Luck.
You can set default date using Jquery defaultDate :
defaultDate: new Date(1960, 01, 01);

Jquery age verification script on BigCommerce, not working

I have used this same script on other websites and I just can't get it to work with my current project at http://www.torchwoodworks.com/. After delving into the firefox script debugger, it seems to be a problem with cookies.js not loading, as i'm getting a "$.cookie is not a function" error. I know i've had troubles in the past if jquery itself is loaded after this script, but that is not the case. As far as I can tell, it should be working.
Here is my code added to the BigCommerce header:
<!--Scripting for age verification, added LM 02/03/15 -->
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/jquery.min.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/lightbox_me.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/cookies.js"></script>
<link rel="StyleSheet" href="http://store-kdukte.mybigcommerce.com/template/js/verify.css" type="text/css" media="all">
<script type="text/javascript">
$(window).load(function () {
// Halt! Age identification
// Includes checking for and setting a cookie with cookies.js
if(!$.cookie('legal-age')){
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
overlayCSS: {background: 'black', opacity: 1},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: 'torchwoodworks.com', path: '/', expires: date});
}
});
e.preventDefault();
}
});
</script>
<!--end Scripting for age verification -->
Any insight would be appreciated. Thanks!
To use $.cookie you need to include jquery cookie plugin

Need datepicker which shows date in other format

I want a date picker which gives the date in this format
January 19, 2012
I already have some date pickers but they are showing dates like this:
12/10/2013
Lots of formats here
You can even customise them. Hope it helps!
Try this Demo
Script
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
dateFormat: 'MM dd,yy', onSelect: function (datetext) {
$('#datepicker').val(datetext);
},
});
});
</script>
HTML
<input type="text" id="datepicker"/>
Try this.
set this to ur date picker.
datePicker.timeZone = [NSTimeZone localTimeZone];
self.datePicker.datePickerMode = UIDatePickerModeDate;

CodeMirror HTML mode not working

I'm trying to style code samples with CodeMirror, but it works partially - it applies the selected theme to the textarea but the syntax is not highlighted.
There is my page:
<textarea id="template-html" name="code" class="CodeMirror">
<!DOCTYPE html>
<foobar>
<blah>Enter your xml here and press the button below to display it as highlighted by the CodeMirror XML mode</blah>
<tag2 foo="2" bar="bar" />
</foobar>
</textarea>
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/codemirror.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/ambiance.css">
<link rel="stylesheet" type="text/css" href="/site.com/css/codemirror/theme/solarized.css">
<script type="text/javascript" src="/site.com/js/libs/codemirror/codemirror.js"></script>
<script type="text/javascript" src="/site.com/js/libs/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript">
var config, editor;
config = {
lineNumbers: true,
mode: "text/html",
theme: "ambiance",
indentWithTabs: false,
readOnly: true
};
editor = CodeMirror.fromTextArea(document.getElementById("template-html"), config);
function selectTheme() {
editor.setOption("theme", "solarized dark");
}
setTimeout(selectTheme, 5000);
</script>
Here is an image of the result. It seems to work but without the syntax highlighting (image top), I've also tried without my CSS, but the result is the same (image bottom):
The problem is with mode: "text/html" which seems to be not working properly, if I use mode: "javascript" it colorizes the tags by the JavaScript syntax rules. How can I fix this?
CodeMirror parses HTML using the XML mode. To use it, the appropriate script must be included, same as with any other mode.
Add its dependency in your markup:
<script type="text/javascript"
src="/site.com/js/libs/codemirror/mode/xml/xml.js"></script>
and set the mode to xml:
config = {
mode : "xml",
// ...
};
In addition, you may want to configure the parser to allow for non well-formed XML. You can do so by switching the htmlMode flag on:
config = {
mode : "xml",
htmlMode: true,
// ...
};
See the XML/HTML mode demo for a live example.
Just in case if my experience can be helpful to someone.
I did following mistake:
<script src="lib/codemirror.js"></script>
<script type="text/javascript">
const editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
</script>
<script src="addons/lint/lint.js"></script>
<script src="addons/lint/css-lint.js"></script>
<script src="addons/fold/brace-fold.js"></script>
<script src="addons/fold/foldcode.js"></script>
<script src="addons/fold/foldgutter.js"></script>
<script src="addons/fold/indent-fold.js"></script>
<script src="addons/fold/markdown-fold.js"></script>
<script src="mode/css.js"></script>
<script src="//unpkg.com/csslint#1.0.5/dist/csslint.js"></script>
This is wrong: I called first codemirror.js - main file, then initialized Editor and later called its assets. In this case it didn't work and it took time for me to find the issue (I was doing it in WordPress so I just made my script depend on codemirror.js only).
<script>
window.onload = function() {
var editor = CodeMirror.fromTextArea(document.getElementById('textarea'), {
mode: "text/css",
lineNumbers: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
lint: true
});
}
</script>

Categories

Resources