How to rewrite this datepicker code? - javascript

I use this library and I have some JS code for initialization:
$(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker3').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('#datetimepicker4').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
$('#datetimepicker5').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
I don't like it because if I have 10 more elements I will have 50 more strings of repeated code, so the thing I wanna do is this:
var DateTimePicker = {
constructor: function(id, language, maskInput,pickTime,pickSeconds,pick12HourFormat){
this.language = language;
this.maskInput = maskInput;
this.pickTime = pickTime;
this.pickSeconds = pickSeconds;
this.pick12HourFormat = pick12HourFormat;
this.id = id;
return this;
},
initialization: function() {
document.getElementById(this.id).datetimepicker({
language: this.language,
maskInput: this.maskInput,
pickTime: this.pickTime,
pickSeconds: this.pickSeconds,
pick12HourFormat: this.pick12HourFormat
});
}
};
var firstDatepicker, secondDatepicker, firstTimepicker, secondTimepicker;
firstDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker2','en', true, false, false, false);
secondDatepicker = Object.create(DateTimePicker).constructor('#datetimepicker3','en', true, false, false, false);
firstTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker4','en', true, true, false, true);
secondTimepicker = Object.create(DateTimePicker).constructor('#datetimepicker5','en', true, true, false, true);
firstDatepicker.initialization();
secondDatepicker.initialization();
firstTimepicker.initialization();
secondTimepicker.initialization();
This gives me an error:
Uncaught TypeError: Cannot read property 'datetimepicker' of null
So I think I am trying to do something really weird. I suspect that datetimepicker is an object which I am trying to manipulate incorrectly. Could you please help me with this, I am just learning JS.

The error you get is because you're calling datetimepicker() on a DOMElement. Use $(this.id).datetimepicker() instead.
That being said, I would argue that your 'simplified' version is actually more complex and difficult to maintain.
If you look at the settings you're using you only really have two different settings; those with pickSeconds and pick12HourFormat and those without. As such you could just use two classes by placing the relevant one on the required datepicker. Try this:
$(function() {
$('.simple-datepicker').datetimepicker({
language: 'en',
maskInput: true,
pickTime: false
});
$('.adv-datepicker').datetimepicker({
language: 'en',
pickDate: false,
maskInput: true,
pickSeconds: false,
pick12HourFormat: true
});
});
Obviously the class names can be adjusted as you require, but you can now use the above code for an infinite number of datepickers in your page, so long as they have the right class added to them.

Related

Cropper.js only enable zoom

Is it possible to disable all cropper functionality and only enable cropper.zoom() for example?
If I disable cropper with cropper.disable() it disables everything.
From the source code it’s seems that this option isn’t supported:
// Disable (freeze) the cropper
disable() {
if (this.ready && !this.disabled) {
this.disabled = true;
addClass(this.cropper, CLASS_DISABLED);
}
return this;
},
Source:
https://github.com/fengyuanchen/cropperjs/blob/89f0b50c7f580135582a087cbf2417126b67d5fd/src/js/methods.js#L137
You can open an issue or do it yourself...
One possible way to do it is by setting these options like this:
autoCrop: false,
dragMode: 'move
This configuration might help:
config: any = {
dragMode: 'none',
highlight: false,
modal: false,
responsive: true,
scalable: true,
autoCrop: false,
center: false,
background: false,
zoomable: true,
zoomOnWheel: true,
};

DateRangePicker - autoUpdateInput:false, autoapply:true not working

I used daterangepicker for my application.
Below code works fine as expected.on load it picks today date and displays. But, i need to show only 'placeholder' value. Not date.
When i use autoUpdateInput : false, it shows 'placeholder' value onload. But, after dates are picked, selected date values are not getting inserted.
Is it possible to do autoUpdateInput: false and autoApply: true make work as expected for my application?
Thanks
JS:
$('input[name="Two way"]').daterangepicker({
"autoApply": true,
"minDate": today,
"locale": {
format: 'DD MMM YYYY'
}
});
You can use function(start,end) {} for this.
Look at this:
$('#start_date').daterangepicker({
"showDropdowns": true,
"autoApply": true,
locale: {
format: 'DD/MM/YYYY'
},autoclose: true,
"alwaysShowCalendars": true,
"startDate": '<%= start_date %>',
"endDate": '<%= end_date %>'
}, function(start, end) {
$("#start_date_input").val(start.format('DD/MM/YYYY'));
$("#end_date_input").val(end.format('DD/MM/YYYY'));
Materialize.updateTextFields();
}
);
$('#start_date').on("change", function(){
console.log("changes");
});
Answer of 3rd point-
Yes it is possible to use autoApply=true & autoUpdateInput=false both at same time.
for this you just need to put autoApply parameter before autoUpdateInput
Look at this:
$('input[name="Two way"]').daterangepicker({
autoApply: true,
autoUpdateInput: false,
minDate: today,
locale: {
format: 'DD MMM YYYY'
}
});

jsonlint is not defined - codemirror

I have ui-codemirror implemented in angular application. After turning on lint I have an error in console:
ReferenceError: jsonlint is not defined
at https://localhost:9000/bower_components/codemirror/addon/lint/json-lint.js:20:3
lint.js:20:3 :
jsonlint.parseError = function(str, hash) {
These are my options for editor
$scope.cmOption = {
value: "/*WRITE YOUR INSTRUCTION HERE*/",
lineWrapping : true,
lineNumbers: true,
textWrapping: true,
indentWithTabs: true,
readOnly: false,
theme: 'neat',
mode: "application/json",
matchBrackets: true,
autoCloseBrackets: true,
gutters: ["CodeMirror-lint-markers"],
lint: true
};
And here lint.js included (at the very bottom of my index, after all other codemirror scripts)
<script src="bower_components/codemirror/addon/lint/lint.js"></script>
<script src="bower_components/codemirror/addon/lint/javascript-lint.js"></script>
<script src="bower_components/codemirror/addon/lint/json-lint.js"></script>

set custom date in jquery

I saw a jQuery library here for date and I set it with default date.
this is for set current date:
$(document).ready(function () {
$("#enddate").pDatepicker({
persianDigit: true,
viewMode: "year",
position: "auto",
autoClose: true,
format: false,
observer: false,
altField: false,
format : "YYYY-MM-DD HH:mm:ss",
inputDelay: 800
});
});
for "YYYY-MM-DD HH:mm:ss" format I want set my custom year like
(1392-12-11 13:51:11)
according the DOC,It says I must use
$( "#enddate" ).pDatepicker("setDate",[1392,12,11,13,51,11] );
but it does not work.
how can combine these codes?
this is html code:
<input type="text " placeholder="pick up date" id="enddate" name="enddate" tabindex="8">
You are missing one option. If you want to set also the time, not just the date, you need to enable the timePicker.
The documentation is not very clear about it.
You need to add this line to the DatePicker initialisation
timePicker: {enabled: true}
So it will look like this:
$("#enddate").pDatepicker({
persianDigit: true,
viewMode: "year",
position: "auto",
autoClose: true,
format: false,
observer: false,
altField: false,
format : "YYYY-MM-DD HH:mm:ss",
inputDelay: 800,
timePicker: {enabled: true}
});
You also have more options, for the timePicker, and you should define them on the initialisation. Check the documentation to see more options.
Since you already fixed the typo, I only leave this comment:
For javascript coding standards you should use CamelCase, so the id should be endDate. This will make your code easier to read.

change format bootstrap-datepicker in same input text doesn´t work

I've had some issues in my website...
when I change my radioButton, I wanna set my bootstrap-datepicker format to 'dd/MM/yyyy' or 'MM/yyyy' using just one input text field, but it doesn't work, someone can help me?
This is my javascript function below
function setDatePicker(value) {
if (value === "D") {
LimparCampo('date1');
$('#datetimepicker1, #datetimepicker2').datepicker({
language: 'pt-BR',
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
todayBtn: true
});
}
else {
LimparCampo('date1');
$('#datetimepicker1, #datetimepicker2').datepicker({
language: 'pt-BR',
format: 'mm/yyyy',
autoclose: true,
todayHighlight: true,
todayBtn: true
});
}
}
I´ve found the solution
I just use $('#datetimepicker1, #datetimepicker2').datepicker('remove');
Cya ^^

Categories