jQuery - Cloning a datepicker field - javascript

I'm trying to clone a table row and get a datepicker box working on all rows. At the moment, the first one works, but not later boxes.
Can anyone offer any tips? Any help much appreciated!
Here's the code:
HTML
<link rel="stylesheet" type="text/css" href="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/redmond.datepick.css">
<script type="text/javascript" src="http://brenda.upreach.org.uk/plugins/jquery.datepick.package-4.1.0/jquery.datepick.js"> </script>
<div class="clone_Associate">
<input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013">
</div>
<div class="placer_Associate"></div>
Clone a new datebox!
jQuery
$(function() {
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'});
});
$(document).ready(function(){
$(".clone_trigger_Associate").click(function () {
var total = $('[name^="UPDATE_METHOD"]').length;
var index = Math.round(total / 2);
$('.clone_Associate').last().clone().insertBefore(".placer_Associate");
$('input.cl:last').val('');
$('.clone_Associate').last().find("input[type='checkbox']").prop("name","UPDATE_METHOD["+index+"][]")
// Date pick element
$('.datepick').datepick({
dateFormat: 'dd/mm/yyyy', showTrigger: '#calImg'}
);
event.preventDefault();
});
});
A jsfiddle is here: http://jsfiddle.net/dalepotter/aSG6e/

Demo: http://jsfiddle.net/aSG6e/15/
$(function() {
var options = {dateFormat: 'dd/mm/yy'}
$('.datepick').datepicker(options);
$(".clone_trigger_Associate").click(function (e) {
e.preventDefault();
var $newInput = $('.datepick:last').clone(true).removeAttr('id');
$(this).before($newInput);
$newInput.datepicker('destroy').datepicker(options);
});
});

Change this code;
$('.clone_Associate').last().clone().insertBefore(".placer_Associate");
with this;
var newDate = '<div class="clone_Associate"><input type="text" name="DATE_SET[]" class="datepick" value="04/12/2013"></div>';
$('.clone_Associate:last').after(newDate);

Related

how to convert jquery datepicker format to timestamp format like dd-mm-yyyy (28/09/2019 3:40pm)

I dont wanna manual convertion, i have the jquery datepicker v.1.12.1
if i select the date from datepicker it will automatically convert timestamp format.
i want a date format in timestamp like 28/09/2019 3:40 GMT-0400 this format to 1569668513 this format.
Can you please help me?
var dateString = '#referdate',
dateTimeParts = dateString.split(' '),
timeParts = dateTimeParts[1].split(':'),
dateParts = dateTimeParts[0].split('/'),
date;
date = new Date(dateParts[2], parseInt(dateParts[1], 10) - 1, dateParts[0], timeParts[0], timeParts[1]);
console.log(date.getTime()); //1379426880000
console.log(date); //28-09-2019 3:40 GMT-0400
You can try this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<script>
function getTimeAndDate(){
let today = new Date();
let date = today.getDate()+'/' + (today.getMonth()+1) + '/'+today.getFullYear();
let h = today.getHours();
let m =today.getMinutes();
console.log(h+':'+m);
console.log(date);
}
</script>
<body>
<input type="button" onclick="getTimeAndDate()" value="Button">
</body>
</html>
Are you looking for the dateFormat option?
From the docs:
$( ".selector" ).datepicker({
dateFormat: "yy-mm-dd"
});
$( "#datepicker" ).datepicker({
dateFormat: "#"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<input id="datepicker">
If you just want to log the timestamp of the chosen date, you can get the javascript date object directly from the picker on change.
// however you initialize the datepicker does not matter
$("#datepicker").datepicker();
// when a date is picked the change event is fired
$("#datepicker").change(function() {
// get the date object
let theDate = $("#datepicker").datepicker("getDate");
console.log(theDate.getTime())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<input id="datepicker">

jQuery - Get values from jQuery array got from field

First I have one field with daterangepicker.
I get value using $("#field").val().
I got like
{"start":"2018-03-23","end":"2018-03-29"}
But, I need start date and end date value from
{"start":"2018-03-23","end":"2018-03-29"}
My code is
<input id="field" type="text" value='' /><br/>
$(function() {
'use strict';
$("#field").daterangepicker({
dateFormat:'dd M',
datepickerOptions : {
numberOfMonths : 2
}
});
var curnt = moment().startOf('day').toDate();
var weeks = moment().subtract('days', 6).startOf('day').toDate();
$("#field").daterangepicker("setRange", {start: weeks, end: curnt});
});
function get_graph_data(){
var dates = JSON.parse($("#field").val());
console.log(dates.start);
console.log(dates.end);
var data = {
'action' : 'example_ajax_request',
'wp_graph': $("#field").val()
};
jQuery.post(ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
}
What you get from the $("#field").val() is a JSON. You can easily do something like:
var dates = JSON.parse($("#field").val());
dates.start; // "2018-03-23"
dates.end; // "2018-03-29"
A snippet to help you:
$(function () {
var dates = JSON.parse($("#field").val());
console.log(dates.start); // "2018-03-23"
console.log(dates.end); // "2018-03-29"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="field" type="hidden" value='{"start":"2018-03-23","end":"2018-03-29"}' />
You are using daterangepicker plugin so you should use it's methods instead of jQuery's val(). Select an input field and call data('daterangepicker'). Returned object contains startDate and endDate objects. Keep in mind that they are Date objects (not Strings), so you will need to format if you want to print them.
$('#field').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2018-01-01',
endDate: '2018-12-31'
});
$("#getDateRange").click(function() {
var data = $("#field").data('daterangepicker');
var startDate = data.startDate.format('YYYY-MM-DD');
var endDate = data.endDate.format('YYYY-MM-DD');
alert('Start date: ' + startDate + ', end date: ' + endDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input id="field" type="text" value='' />
<button type="button" id="getDateRange">Get start date</button>
It's always a good habit to check out official documentation of a plugin. You can check it out here.

Hover bootstrap datepicker

I'm trying to use the hover() function of JQuery to do some formatting to my DatePicker when entering the mouse in one of its rows but unfortunately my hover() is never call.
Here is how I initialize my datepicker:
//WEEK PICKER
moment.locale('fr', {
week: { dow: 1 } // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'MM-DD-YYYY'
});
//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function (e) {
var value = $("#weeklyDatePicker").val();
var firstDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
var lastDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(firstDate + " - " + lastDate);
});
Here is how I'm setting my hover() function:
$( ".bootstrap-datetimepicker-widget tr" ).hover(
function() {
console.log('in');
}, function() {
console.log('out');
}
);
But no logs are being written. I'm sure to have the right selector because I got this in my CSS:
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}
And the color is updating when the mouse goes hover.
Any idea?
EDIT
Here is a Jfiddle that reproduce my code: https://jsfiddle.net/5kzjvL1u/
I believe Robert C is correct in his comment in that it's being loaded intor the DOM after the page has loaded and you are correct in your suggestion of placing the :hover within a click event for the input field. See this snippet for a working example.
$(document).ready(function() {
moment.locale('fr', {
week: {
dow: 1
} // Monday is the first day of the week
});
//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can //have your owh)
$("#weeklyDatePicker").datetimepicker({
format: 'MM-DD-YYYY'
});
$('#weeklyDatePicker').on('dp.change', function(e) {
var value = $("#weeklyDatePicker").val();
var startDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY");
var endDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY");
$("#weeklyDatePicker").val(startDate + " - " + endDate);
});
$("#weeklyDatePicker").click(function() {
$(".bootstrap-datetimepicker-widget tr").hover(
function() {
console.log('in');
},
function() {
console.log('out');
}
);
});
});
.bootstrap-datetimepicker-widget tr:hover {
background-color: #808080;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 form-group">
<div class="input-group" id="DateDemo">
<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
</div>
</div>
</div>
</div>

Bootstrap datepicker: how to add class (e.g. "month active") to specific months i want to highlight

I'm using boostrap datepicker and i want to permanently highlight specific months to look something like this: example i want to achieve.
I saw some methods for example beforeShowMonth but i don't really understand how does it work
NOTE: I have datepicker configured to show only months and years
I would really appreciate all the help. Thanks in advance!!!
var makeMonthActiveForThisYear = false;
$('.datepicker').datepicker({
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
}).on("show", function (date) {
if (makeMonthActiveForThisYear) {
var year = parseInt($(".table-condensed thead tr th:eq(1).datepicker-switch").text().split(" ")[1]);
var highlightMonth = GetMonthToActive(year)
$('.datepicker-months table tbody tr:first td span.month').each(function () {
if ($.inArray($(this).text(), highlightMonth) > -1) {
makeMonthActiveForThisYear = false;
$(this).addClass('active');
}
});
}
}).on("changeYear", function (date) {
var highlightYear = [2015, 2014];
var year = date.date.getFullYear();
if ($.inArray(year, highlightYear) > -1) {
makeMonthActiveForThisYear = true;
}
});
function GetMonthToActive(year) {
if (year == 2014)
return ["Jan", "Feb", "Mar"];
if (year == 2015)
return ["Jan", "Mar", "Apr"];
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css">
<input type="text" type="text" class="form-control datepicker" />
You can do it like below.... this is working and I have tested it before posting but still if you don't get the desired result I will update it with demo.
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
endDate: '+0d',
autoclose: true
}).on("show", function () {
var highlightMonth = ["Jan", "Feb", "Mar"];
$('.datepicker-months table tbody tr:first td span.month').each(function () {
if ($.inArray($(this).text(), highlightMonth) > -1) {
$(this).addClass('active');
}
});
});

Capturing a value in a jQuery UI datepicker and alerting it back to the user

I need your help.
How can some functionality be added onto the existing code below such that it will make the options below possible:
If the date1 field is blank and the user selects a date, an alert message will popup and say "User has selected [date]"
If the date1 field is not blank and the user selects a new date, an alert message will popup and say "User has change [old_date_value] to [new_date_value]
I am entirely new to jQuery, so go easy while criticizing me =\
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function() {
$("#date1").datepicker({
changeMonth: true,
changeYear: true
});
}
</script>
</head>
<body>
<input type="text" id="date1">
</body>
</html>
Change the datepicker part of code to this:
var prevDate = null;
$("#date1").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(date) {
if (prevDate === null) {
alert('User has selected ' + date);
} else {
alert('User has change ' + prevDate + ' to ' + date);
}
prevDate = date;
}
});
You can find a suitable place to put the prevDate.
Also jQuery-datepicker would help you a lot.
You'll want to use the onSelect option which is part of the datepicker. The onSelect function has two parameters, the dateText, which is the date string, and the datepicker instance. You can get the last value from the datepicker instance, as lastVal.
Using the above information, your javascript would look like this:
$("#date1").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function(dateText,inst) {
if(dateText !== inst.lastVal){
if (inst.lastVal == null) {
alert("User has selected: "+dateText);
} else {
alert("User has change "+inst.lastVal+" to "+dateText)
}
}
}
});
With this solution, you do not need to manage the previous date value in a variable, which is nice.
I've replicated your setup in jsFiddle so you can play around with this while you get used to jQuery.

Categories