How to make date selection using javascript fromat?

How to make date selection using javascript fromat? - javascript

In my PHP project I'm using 3 comboboxes to select Year, month and date. But I can't format that 3 values to save as a date in database in 2013-10-01 type. Given below is my code to select date.
<p>
<label class="floated" for="dtb_yr"><b>Date of Birth :</b></label>
<select name="dtb_yr">
<option value="2013" />2013
<option value="2014" />2014
<option value="2015" />2015
<option value="2016" />2016
<option value="2017" />2017
<option value="2018" />2018
<option value="2019" />2019
<option value="2020" />2020
<option value="2021" />2021
<option value="2022" />2022
</select>
<select name="dtb_mon">
<option value="january" />January
<option value="february" />February
<option value="March" />March
<option value="Apirl" />Apirl
<option value="May" />May
<option value="June" />June
<option value="July" />July
<option value="August" />August
<option value="September" />September
<option value="October" />October
<option value="November" />November
<option value="December" />December
</select>
<select name="dtb_day">
<option value="01" />01
<option value="02" />02
<option value="03" />03
<option value="04" />04
<option value="05" />05
<option value="06" />06
<option value="07" />07
<option value="08" />08
<option value="09" />09
<option value="10" />10
<option value="11" />11
<option value="12" />12
<option value="13" />13
<option value="14" />14
<option value="15" />15
<option value="16" />16
<option value="17" />17
<option value="18" />18
<option value="19" />19
<option value="20" />20
<option value="21" />21
<option value="22" />22
<option value="23" />23
<option value="24" />24
<option value="25" />25
<option value="26" />26
<option value="27" />27
<option value="28" />28
<option value="29" />29
<option value="30" />30
<option value="31" />31
</select>
<br class="clear"/>
</p>
Is there any way to select date and save date in more accuracy way, like given below textfeild?
<p>
<label class="floated" for="model_no"><b>Model no :</b></label>
<input type="text" name="model_no" id="model_no" placeholder="Enter Modle No" />
<br class="clear" />
</p>

You can use Jquery Date picker that you only need to select date and it can be save in specified format in database.
Add this code in head of your HTML document.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dtb_yr" ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
Add this in your form
in HTML:
<input type="text" name="dtb_yr" id="dtb_yr" placeholder="Select Date" />
Add this code in PHP file
In PHP:
$dtb_yr = $_POST['dtb_yr'];

use Month option like this
<select name="dtb_mon">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">Apirl</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
after submit your form
<?php
$date_string=$_POST['dtb_yr']."-".$_POST['dtb_mon']."-".$_POST['dtb_day'];
?>

Rather than using 3 different combo boxes to format your date, I think it might be easier to use a single text field with Jquery UI's datepicker. http://jqueryui.com/datepicker/#date-formats
For the format you are looking for, you can customize the datepicker's output. The documentation covers this quite well.
If you really want 3 different boxes, Zahidul's answer should work.
EDIT
Use this code as a guide:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", "dd mm yy" );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"></p>
The important part is $( "#datepicker" ).datepicker( "option", "dateFormat", "dd mm yy" ); where you are formatting the date according to your needs.

You can use the values that you get and at the PHP side you can use STR_TO_DATE function of MYSQL.you need a little mapper for having the month number from the text. Then you use this function--->get the output and use it for insertion in your database.check out the article here http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_str-to-date
STR_TO_DATE('01,5,2013','%d,%m,%Y');
BTW, theres a typo in April.

Related

How to select multiple option automatically in jquery?

I am using multi-select picker. I want to automatically select options on ajax response.
I have data in this form
tuesday,wednesday,Thursday
here is a select picker
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday" >Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday" >Wednesday</option>
<option value="thursday" >Thursday</option>
<option value="friday">Friday</option>
<option value="saturday" >Saturday</option>
<option value="sunday" >Sunday</option>
</select>
this is the variable which is having data
var operation_day = editData.attr('data-operation_day');
How i can automatically select those option which are in variable with help of jquery?

You can use .split(",") to convert them in array and then set value using selectpicker('val', operation_day.split(",")) lastly refresh your selectpicker.
Demo Code :
var operation_day = "tuesday,wednesday,thursday";
console.log(operation_day.split(","))
$('select').selectpicker('val', operation_day.split(",")); //split them and set value
$('select').selectpicker('refresh') //refresh ..selectpicker
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>

You can pass the array for multiple selections like below.
var operation_day = "tuesday,wednesday,thursday" //editData.attr('data-operation_day');
var arr = operation_day.split(',');
$(".kt-selectpicker").val(arr)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control kt-selectpicker" multiple="" name="operation_day[]" tabindex="-98">
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
Note: It's case sensitive. thursday is not equal to Thursday.

Output is not my ideal thing

Output is not my ideal thing.I wanna make drill down buttons.
Now output is
index.html is
<html>　
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">
</head>
<body>
<select data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
</body>
<script type="text/javascript">
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
</script>
</html>
I wanna make only 2 drill down buttons in index.html .And if I select A in first button,a-1~4 is shown in second button.If I select B in first button,b-1~5 is shown in second button.If I select C in first button,c-1~2 is shown in second button・・・・.
So output now is different form my ideal one.I use Chosen in jQuery plugin. Why can't I do my ideal this? What is wrong? Why can't I filter to second button?

Hope this helps..
<html>　
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="chosen.jquery.min.js"></script>
<link href="chosen.css" rel="stylesheet">-->
</head>
<body>
<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:350px;">
<option value="0">---</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<select name="type" id="type1">
<option value="1">a-1</option>
<option value="2">a-2</option>
<option value="3">a-3</option>
<option value="4">a-4</option>
</select>
<select name="type" id="type2">
<option value="5">b-1</option>
<option value="6">b-2</option>
<option value="7">b-3</option>
<option value="8">b-4</option>
<option value="9">b-5</option>
</select>
<select name="type" id="type3">
<option value="10">c-1</option>
<option value="11">c-2</option>
</select>
<select name="type" id="type4">
<option value="10">d-1</option>
<option value="11">d-2</option>
<option value="11">d-3</option>
</select>
<script type="text/javascript">
// $(".chzn-select").chosen();
// $(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(document).ready(function () {
$('#mainDD').on('change', function() {
console.log($(this).val());
console.log($('#mainDD :selected').text()) ;
var thisType = "type" + $(this).val();
for(i=1; i<5; i++) {
var thisId = "type" + i;
console.log(thisType + " " + thisId);
if(thisType !== thisId) {
$("#"+thisId).hide();
}
else {
$("#"+thisId).show();
}
}
})
});
</script>
</body>
</html>

Convert <select> into <ul>, but keep functionality

I want to convert "select" into "ul" list to be able to style it nicely. The way it works in my plugin, is when you select one of the "select" options you get another section loaded below it. So, I have managed to convert "select" into "ul" using jQuery, but when I click on an option from "li" list it doesn't load my content as per original "select" dropdown.
Is there a way to do it? I guess it's something to do with values?
Below is my code:
$(".jr-form-categories").append('<ul id="property-list"></ul>');
$(".jr-cat-select option").each(function(){
$("#property-list").append('<li>' + $(this).html() + '</li>');
});
$("#property-list").on("click", "li a", function(e){
e.preventDefault();
$(".jr-cat-select").val($(this).attr("href"));
});
Here is HTML:
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
And this is how the converted list looks like, which doesn't work when you click on of the links:
<ul id="property-list">
<li>- Select Category -</li>
<li> Flat</li>
<li> House</li>
<li> Shared Flat</li>
<li> Shared House</li>
<li> Studio</li>
</ul>

I believe you are looking for something like Select2. This can convert your <select> into <ul> and <li> and not only that, it also gives you options like autosuggest and other things.
If you wanna convert it back, use .select2("destroy"). Very simple.
$(function () {
$("select").select2();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
A demonstration to convert it back to <select>:
$(function () {
$("select").select2();
$("#remBtn").click(function () {
$("select").select2("destroy");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1">
<option value="0">- Select Category -</option>
<option value="4"> Flat</option>
<option value="5"> House</option>
<option value="7"> Shared Flat</option>
<option value="6"> Shared House</option>
<option value="8"> Studio</option>
</select>
<button id="remBtn">Remove</button>

Hidden value not working in Chosen

If I use combobox like this :
<select>
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option></select>
</select>
Hidden value working. Value three hidden.
But, I use Chosen like this :
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<select class="chosen-select">
<option value="select">Select</option>
<option value="one" selected>one</option>
<option value="two" disabled>two</option>
<option value="three" hidden>three</option>
</select>
<script type="text/javascript">
$(".chosen-select").chosen();
</script>
Hidden value not working. Value three not hidden.
How do I get Chosen to hide an option with the hidden attribute set as in three?

Joomla, cannot display slider and datepicker on the same page! Conflict?

I have a slider on my main page and developed a simple datepicker app that also should be displayed on the homepage. I used Jumi to make a module that has the complete datepicker module including a piece of Javascript and a call for the Joomla Jquery library. However when I try to display both the slider and the datepicker on the same page, the slider disappears. I'm confident that this is a Jquery issue. When I remove the Jquery call from my module the slider appears but the datepicker functionality stops working.
I tried pretty much everything including the NoConflict mode, that does not resolve anything however. What is the best way to call for the Jquery library in this Jumi module? I basically need to call for this library only once and have both functionalities use it but the way to do this is beyond me.
The code in the module:
<link rel="stylesheet" href="/js/css/ui- lightness/jquery-ui-1.10.3.custom.css" type="text/css" />
<script src="/js/jquery-1.9.1.js"></script>
<script src="/js/jquery-ui-1.10.3.custom.js"> </script>
<script src="/js/jquery.ui.datepicker-nl.js"></script>
<script src="/js/staying_length_cal.js"></script>
<script type="text/javascript">
$(function() {
$('input.datepicker').datepicker({
dateFormat: 'dd/mm/yy',
yearRange: "-0:+2",
changeMonth: true,
buttonImage: 'images/calendar.gif',
changeYear: true,
showOn: 'both',
buttonImageOnly: false
},
$.datepicker.regional['nl']);
});
</script>
<?php
if(isset($_POST['submit']))
{
$nights = $_POST['nights'];
$persons = $_POST['persons'];
$start_date = $_POST['start_date'];
$end_date = $_POST['end_date'];
header ("Location: Link that uses form information");}
?>
<form method="post" id="stayingCalculation">
<fieldset>
<h4>Ik zoek</h4>
<select id="stayLength" name="nights" onchange="calculateTotal(); " />
<option value="week">Week</option>
<option value="midweek">Midweek</option>
<option value="weekend">Weekend</option>
<option value="twoweek">Twee weken</option>
<option value="threeweek">Drie weken</option>
<option value="3">3 Nachten</option>
<option value="4">4 Nachten</option>
<option value="5">5 Nachten</option>
<option value="6">6 Nachten</option>
<option value="7">7 Nachten</option>
<option value="8">8 Nachten</option>
<option value="9">9 Nachten</option>
<option value="10">10 Nachten</option>
<option value="11">11 Nachten</option>
<option value="12">12 Nachten</option>
<option value="13">13 Nachten</option>
<option value="14">14 Nachten</option>
<option value="15">15 Nachten</option>
<option value="16">16 Nachten</option>
<option value="17">17 Nachten</option>
<option value="18">18 Nachten</option>
<option value="19">19 Nachten</option>
<option value="20">20 Nachten</option>
</select>
<h4>met</h4>
<select name="persons">
<option value="0">Niet relevant</option>
<option value="1">1 persoon</option>
<option value="2">2 personen</option>
<option value="3">3 personen</option>
<option value="4">4 personen</option>
<option value="5">5 personen</option>
<option value="6">6 personen</option>
</select>
<br/>
<h4>tussen</h4>
<p> <input type="text" name="start_date" id="start_date" value="" class="datepicker" data-jquerydateformat="dd-mm-yy" data-isodateformat="dd-mm-yyyy" onchange="setExpDate(this.value)" />
</p>
<h4>en</h4>
<p> <input type="text" name="end_date" id="end_Date" value="" class="datepicker" data-jquerydateformat="dd-mm-yy" data-isodateformate="dd-mm-yyyy" onchange="setStartDate(this.value)" /> </p>
</fieldset>
<input type="submit" name="submit" value="Zoeken" class="btn btn-primary"><br>
</form>
Thanks in advance!

For multiple jQuery inclusions you can use the jQueryEasy plugin which tries to include only one time jQuery.
Download the plugin
Install plugin
Enable plugin
In the plugin's configuration page, enable jQuery.
That's all.
http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327

I had the same problem and I solved it using:
<script>
jQuery.noConflict();
jQuery(function() {
jQuery( "#datepicker1" ).datepicker();
jQuery( "#datepicker2" ).datepicker();
});
</script>
instead of $(...
Perhaps this might help you, too!

We Keep Coding

JavaScript is the programming language of the Web.

How to make date selection using javascript fromat? - javascript

Related

How to select multiple option automatically in jquery?

Output is not my ideal thing

Convert <select> into <ul>, but keep functionality

Hidden value not working in Chosen

Joomla, cannot display slider and datepicker on the same page! Conflict?

Categories

Resources