How to Minimize the Code of JavaScript In DatePicker - javascript

I am Using jQuery date picker,and I have created multiple instances of DatePicker (an example)
In JavaScript this script is used four time:
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage:"images/calendar.gif",
buttonImageOnly: true });
I want to minimize the code of javascript. What should I do?

You can select all ids together:
$( "#datepicker, #datepicker2, #datepicker3, #datepicker4" ).datepicker({
...
Although, personally I would've introduced class my-datepicker and used it:
$(".my-datepicker").datepicker({

You could give each of the input elements same class say myDatepicker and then try
Here is the HTML
<p>Date: <input type="text" id="datepicker" class="myDatepicker"></p>
<p>Date: <input type="text" id="datepicker2" class="myDatepicker"></p>
<p>Date: <input type="text" id="datepicker3" class="myDatepicker"></p>
<p>Date: <input type="text" id="datepicker4" class="myDatepicker"></p>
and javascript
$( ".myDatepicker" ).datepicker({ showOn: "button",
buttonImage:"images/calendar.gif",
buttonImageOnly: true
});
and here try the fiddle

Related

Clone jQuery input date picker element

I am using the jQuery date picker and I want to clone the input element. The jQuery code seems to be working fine when cloning and static element but not with the date picker. Below is the code:
$(function(){
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
});
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Shown Field :
<input id="thedate" type="text" class="datepicker-input--checkin" /><br />
Hidden Field :
<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br />
<input id="thesubmit" type="button" value="Submit" />
<div class="package">
</div>
Fiddle:
After cloning the input, you would need to initialize the datepicker again on the input.
You could do that by adding a class datepicker on the input intended to have the datepicker, and then initializing the datepicker (after cloning) using:
$(".package .datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
Here's the updated fiddle: https://jsfiddle.net/txqepe36/3/
You could simplify the code even further by removing the datepicker initialization through element ID, since you have a class datepicker on both inputs expected to have a date picker control.
Your JS code could be simplified to:
$(function() {
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Note that you would need to add a datepicker class to the input. So it should look like:
<input id="thedate" type="text" class="datepicker-input--checkin datepicker" />
Here's the fiddle: https://jsfiddle.net/txqepe36/4/

JQuery Datepicker: show on input group addon button click

I have the following div:
<div class="input-group">
<input type="hidden" id="datepicker">
<input type="text" id="input_date" class="form-control" value="" readonly='readonly'>
<span class="input-group-addon" id="input_btn_calendar"><i class="fa fa-calendar"></i></span>
</div>
And the following JQuery call:
var today = new Date();
$("#input_date").datepicker({
changeYear: false,
numberOfMonths: 1,
altFormat: "yy-mm-dd",
altField: "#datepicker",
minDate: today,
onSelect : function () {
var inputdate = $.datepicker.parseDate('yy-mm-dd', $("#datepicker").val());
}
}).datepicker("setDate",today);
This makes the datepicker appear correctly when I press the text field. However, I also want it to show up when I click the input_btn_calendar button inside the accompanying span.
I've tried this:
$("#input_btn_calendar").click(function() {
$("input_date").datepicker('show')
});
But unfortunately, that does nothing. What am I missing?
You have an invalid selector of $('input_date').
Try this instead,
$("#input_btn_calendar").click(function() {
$("#input_date").datepicker('show')
});

Jquery datepicker to Input normal text and Date

How can I use the jquery datepicker to input date from an icon and also to take random text from keyboard.
For example
I need a text box to take Exact date (26-10-2015) and also text like since 3 years.
Thanks in advance.
You could just use a hidden input as datepicker with this kind of logic e.g:
$(function() {
$(".date").datepicker({
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText) {
$(this).prev().val(dateText);
}
});
$('input + .date').prev().on('change', function() {
var dateStr = this.value.split(/[\/-]/);
$(this).next().datepicker("setDate", new Date(dateStr[2], dateStr[1] - 1, dateStr[0]) );
})
});
.date {
display: none;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input placeholder="Any text there" />
<input type="text" name="date" class="date" readonly />

Is it possible to use contentEditable with jQuery DatePicker?

I'm looking for a way to use contentEditable with jQuery DatePicker. How can I use it on editable tables??
I found one answer here : http://www.sencha.com/forum/showthread.php?229598-Looking-to-enable-contenteditable-true-for-custom-input-type
And this is what I tried to do using the example given on the link above.
HTML code:
<td>
<div class='date' contenteditable='false'>2014-04-05</span>
<input type='hidden' class='datepicker' />
</td>
Javascript code:
$(".datepicker").datepicker({
dateFormat: 'yyyy-mm-dd',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
onClose: function(dateText, inst) {
$(this).parent().find("[contenteditable=true]").focus().html(dateText).blur();
}
});
But this method doesn't work for me.
Additional Info: I'm using bootstrap and jquery-tablesorter.
I made it for myself with the following steps:
Used a hidden input for the datepicker, to work along with the contenteditable div:
<div class="holder">
<input name="date" class="datepicker-input" type="hidden" />
<div class="date" contentEditable="true"></div>
</div>
With the following jQuery:
// Binds the hidden input to be used as datepicker.
$('.datepicker-input').datepicker({
dateFormat: 'dd-mm-yy',
onClose: function(dateText, inst) {
// When the date is selected, copy the value in the content editable div.
// If you don't need to do anything on the blur or focus event of the content editable div, you don't need to trigger them as I do in the line below.
$(this).parent().find('.date').focus().html(dateText).blur();
}
});
// Shows the datepicker when clicking on the content editable div
$('.date').click(function() {
// Triggering the focus event of the hidden input, the datepicker will come up.
$(this).parent().find('.datepicker-input').focus();
});
None of them worked for me.
I think there must have been a change in the browser specs where hidden type can't have focus.
Anyway, my solution is to hide the input with in a div.
Fyi: Trying to hide the input or wrapping it in a span will not work.
$('.datepicker-input').datepicker({
minDate: 0,
onClose: function(dateText, inst) {
$('.date').text(
inst.selectedDay +"-"+
(inst.selectedMonth+1) +"-"+
inst.selectedYear);
}
});
$('.date').click(function() {
$('.datepicker-input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css">
<div style="height:0px; overflow:hidden">
<input class="datepicker-input" type="date"/>
</div>
<span class="date" contentEditable="true">Date?</span>
Enjoy! ^_^
You are not closing the div tag in your html
this
<div class='date' contenteditable='false'>2014-04-05</span>
should be
<div class='date' contenteditable='true'>2014-04-05</div>
Since the rows of the tables are generated dynamically, so you have to create the datepicker dynamically on editing the row. You can use the "focus" or "click" event of the row to bind the datepicker dynamically. Below code demonstrates the same:
//Add dynamic row when focused on the row
$(document).on("focus", "#tblMeetingDetails tr", function() {
if ($(this).find("input[type=hidden].datepicker").attr("id") === undefined) {
$(this).find("input[type=hidden].datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "images/calendar-icon.png",
buttonImageOnly: true, onSelect: function() { },
onClose: function(dateText, inst) {
$(this).parent().find("[contenteditable=false]").html(inst.input.text()).blur();
}
});
$(this).find(".ui-datepicker-trigger").css("visibility", "hidden");
}
return false;
});
and your html for the row would look some what like the below code:
<tr>
<td>
<div class="date" contenteditable="false">
</div>
<input type="hidden" class="datepicker" />
</td>
</tr>
you can even use the ".date" class to find the contenteditable field for setting the date in the close event as below :
$(this).parent().find(".date").html(inst.input.text()).blur();
Hope this would help :)

datepicker send data to database

How i can get picked data in inline mode.
With popup its easy to do with input tag
<input type="hidden" id="defaultInlineDatepicker" size="60">. And when i can write data to database. But i need calendar on my page inline.
<p>
<span id="defaultInlineDatepicke" class="datepicker"></span>
</p>
<script>
$('#defaultInlineDatepicke').datepick({multiSelect: 999,
showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
</script>
The datepicker is not an input tag, it is a UI enhancement plugin. SO you need to change the span to an input field.
<p>
<input id="defaultInlineDatepicke" class="datepicker" type="text"/>
</p>
<script>
$('#defaultInlineDatepicke').datepick({multiSelect: 999,
showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
</script>
Here is working code for you:
Script::
$(function() {
$('#datepicker').datepicker({
altField: '#datepicker_pick',
onSelect: function() {
alert($("#datepicker_pick").val());
}
});
});
HTML:
Date: <div id="datepicker"></div>
<input type="hidden" id="datepicker_pick" name="datepicker_pick">

Categories

Resources